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.
Tailwind CSS JIT installed along with PostCSS and autoprefixer
- New Vite Vue 3 app
npm create vite@latest app-name --template vue
npm i
- Vue Router
npm i vue-router@4
- create a new router (
./src/router.js
)
// ./src/router.js
import { createRouter, createWebHistory } from "vue-router"
const routes = [
{
path: "/",
name: "Home",
component: _ => import("./components/Home.vue")
},
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router
- include
<router-view />
<!-- App.vue -->
<template>
<router-view />
</template>
- mount the router
import { createApp } from "vue"
import App from "./App.vue"
import router from "./router.js"
import "index.css"
createApp(App).use(router).mount("#app")
- TailwindCSS (JIT)
npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
- Configure - edit
tailwind.config.js
// tailwind.config.js
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js}",
],
theme: {
extend: {},
},
plugins: [],
}
- Use Tailwind directives in your CSS (for example
./src/index.css
)
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
import { createApp } from "vue"
import App from "./App.vue"
import "index.css"
createApp(App).mount("#app")