DEV Community

jgngo
jgngo

Posted on • Edited on

Starting a Vue 3 project

#vue #vite

tl;dr

Use npm init vue@latest. This uses Vite as the build tool and provides options to enable state management, routing and testing tools.

Starting a vue project

There are 3 official ways to start a Vue project. Vue CLI appears to be obsolete with the arrival of Vue 3.

  1. Vue create-vue: the official Vue project scaffolding tool

    npm init vue@latest

  2. Vite preset: a build tool that aims to provide a faster and leaner development experience for modern web projects

    npm create vite@latest

  3. Vue CLI: aims to be the standard tooling baseline for the Vue ecosystem. This appears to be for Vue 2.

    vue create hello-world

Vue create-vue

The official docs recommend this command to start a build-tool-enabled project. The command provides several options that default to No. I recommend you enable Typescript, Vue Router and Pinia. The others can be added to your project when you are ready to use them.

npm init vue@latest

Vue.js - The Progressive JavaScript Framework √ Project name: ... vuecreate √ Add TypeScript? ... No / Yes √ Add JSX Support? ... No / Yes √ Add Vue Router for Single Page Application development? ... No / Yes √ Add Pinia for state management? ... No / Yes √ Add Vitest for Unit Testing? ... No / Yes √ Add Cypress for both Unit and End-to-End testing? ... No / Yes √ Add ESLint for code quality? ... No / Yes
Enter fullscreen mode Exit fullscreen mode

Vite vue preset

npm create vite@latest

√ Project name: ... vite-project √ Select a framework: » vue √ Select a variant: » vue Scaffolding project in C:\Users\ngoja\sandbox\vite-project...
Enter fullscreen mode Exit fullscreen mode

Post project creation

Install Tailwind

After project creation, cd to your project folder and install Tailwind.

https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Then edit the following 3 files:

./tailwind.config.js - replace the content line with this

content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ],
Enter fullscreen mode Exit fullscreen mode

./src/index.css - create this new file

@tailwind base; @tailwind components; @tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

./src/main. - insert after the last import statement

import './index.css'
Enter fullscreen mode Exit fullscreen mode

You will then want to delete the <style> section in ./src/App.vue so it won't conflict with the Tailwind css.

Top comments (0)