Starting a Vue 3 project

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

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...

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

Then edit the following 3 files:

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

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

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

@tailwind base;
@tailwind components;
@tailwind utilities;

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

import './index.css'

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