Note

• Thre exists a number of branches , that once completed are meregd to the develop branch and after testing they are finaly merged to the main brancg which is dedicated for production. At aany given point the branches will always be merged to the develop branch

Vue 3 + Vite

installation : $ npm create vite@latest

This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VSCode + Volar

Tailwind CSS

• npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

Tailwind.config.js

• module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

Formatter

Prettier Package :

• npm install --save-dev --save-exact prettier

Create a config file for Prettier :

• echo {}> .prettierrc.json

Set up Eslint : Install :

• npm install --save-dev eslint eslint-plugin-vue

Configure ESlint ( create .elintrc.js ) :

• $echo {}> .eslintrc.js with the Configuration below
• 'module.exports = { env: { node: true, }, extends: [ 'eslint:recommended', 'plugin:vue/vue3-recommended', ], rules: { // override/add rules settings here, such as: // 'vue/no-unused-vars': 'error' } }'

Turn off conflicting ESlint config rules that would affect Prettier, by installing eslint-config-prettier :

• npm install eslint-config-prettier --save-dev

Configuration at .eslintrc.js

• extends: [ 'eslint:recommended', "plugin:vue/vue3-recommended", "prettier" ], the above configuration should be tghe last thing defined in th extends array

in Package.json add the following under scripts:

• "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
• "format": "prettier . --write"

Configure Format on Save :

Ability to run on / test using external device not local host : This is achieved through running vite --host, however this can not be run directly hence in the package.json file under the scripts object alter the dev value from 'vite' to 'vite --host'

"scripts": {
    "dev": "vite --host ",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    "format": "prettier .  --write"
  },

Vue Router Setup

Installing using npm : npm install vue-router@4 --save

• Import createRouter in the main.js file : import { createRouter,createWebHashHistory } from "vue-router";

• Create Routes and an instance of the routes

const routes = [
  { path: "/", component: HomePage },
  { path: "/home", component: HomePage },
  { path: "/projects", component: ProjectsDone },
  { path: "/blog", component: Blog },
  { path: "/about", component: About },
];

const router = createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: createWebHistory(),
    routes, // short for `routes: routes`
  })

Errors :

Solution :

• git remove -v

• git remote set-url origin https://github.com/{{yourUserName}}/{{YourRepoName}}.git/

Adding Firebase tool

• npm install firebase

Error enocuntered amid download :

npm install -g firebase-tools

firebase login

Solution

Firebase Hosting

npm install -g firebase-tools

• update node first to the latest version as firebase may not work with older verison

• Successful setup ![firebasedeploy](https://user-images.githubusercontent.com/42699812/170370389-ec5511f0-0e85-4d00-8ccb-915916929ec5.png

Usefull Links :

• Setting up your Code formatter - Prettier by kiran.jasvanee-Medium

• Setting Up a formatter and a linter

• Firebase with Vuejs

• Firebase Hosting