DEV Community

jgngo
jgngo

Posted on • Edited on

3 1

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up