pixthehe/vite-app

Set up a Vue.js app running on Vite

set up Vite

kolchi kayn f doc,

$ npm init @vitejs/app

set up Tailwind CSS

see doc

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

create config file:

$ npx tailwindcss init -p

include Tailwind in your CSS

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, ensure your CSS file is being imported in your ./src/main.js file:

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Install ESLint & Prettier

$ npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier

create file .eslintrc.js and past those configs, if you want,

module.exports = {
    extends: [
        'plugin:vue/vue3-essential',
        'prettier',
    ],
    rules: {
        // override/add rules settings here, such as:
        'vue/no-unused-vars': 'error',
    },
}

create file .prettierrc.js with those configs:

module.exports = {
    semi: false,
    tabWidth: 4,
    useTabs: false,
    printWidth: 80,
    endOfLine: 'auto',
    singleQuote: true,
    trailingComma: 'es5',
    bracketSpacing: true,
    arrowParens: 'always',
}

Install Vue Router

For what! why we need Vue Router?
Vue Router is the official router for Vue.js. It deeply integrates with Vue.js core to make building Single Page Applications with Vue.js a breeze. see for more...

npm install vue-router@4

Ps: we need version 4 for vue3

see commit changes

create src/router/index.js file with the following code where we will create the router, initiate it with a component called Home linked to the path / (yes, we will create the component in the coming steps):

import { createRouter, createWebHistory } from 'vue-router'
import Home from '/src/components/Home.vue'

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes,
})

export default router

in App.vue replace the helloworld component to <router-view/>.
Create a home component eg:

<template>
  <h1>Home!!</h1>
</template>

import the router in main.js and use it before the app mounted!

import router from "./router/index"
createApp(App).use(router).mount('#app')

Install Vuex

What is Vuex?

It's basically a state management library, that you probably won't need it if you're building a simple app.

$ npm install vuex@next --save

see doc for more.

pixthehe / vite-app