kolchi kayn f doc,
$ npm init @vitejs/app
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')
$ 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',
}
- 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
- create
src/router/index.js
file with the following code where we will create the router, initiate it with a component calledHome
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 thehelloworld
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')
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.