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.
References:
- https://tailwindcss.com/docs/guides/vite
- https://levelup.gitconnected.com/vue-3-composition-with-vite-and-tailwind-css-221358b4d7b5
- vitejs/vite#4065 (comment)
Prerequisites: Install node.js
(brew install node
)
-
To setup this project from a clean slate, run the following. If you cloned this project, skip to step 2.
$ npm init vite my-vite-project
- Select
vue
as the framework - Select variant
vue
- Select
-
Install dependencies:
$ npm install
-
Run the development server:
$ npm run dev
- Visit http://localhost:3000 to test it out
-
Install Tailwind CSS:
$ npm install --save-dev tailwindcss postcss autoprefixer $ npx tailwindcss init --postcss
-
Install other plugins for development:
$ npm install --save-dev eslint eslint-plugin-vue $ npm install --save-dev eslint-config-prettier $ npm install --save-dev eslint-plugin-prettier $ npm install --save-dev --save-exact prettier $ npm install --save-dev prettier-plugin-tailwindcss
-
To debug from VS Code using Google Chrome:
- Run
npm run dev
as usual - Open Run and Debug (Cmd+Shift+D) and click "Launch Chrome"
- Set some breakpoints in
.vue
files and reload Chrome to hit
- Run
-
Activate
pre-commit
:$ pre-commit install