How to Create a Vue Project with Vite Quickly

To create a Vue project with Vite, run npm create vite@latest and select vue as the framework. Then, install dependencies with npm install and start the development server using npm run dev.

Syntax

Use the npm create vite@latest command to start a new project. You will be prompted to enter a project name and choose a framework. Select vue for a Vue.js project. After that, run npm install to install dependencies and npm run dev to start the local server.

• npm create vite@latest: Initializes a new Vite project.
• Project name: Your folder name for the project.
• Framework choice: Select vue for Vue.js.
• npm install: Installs all needed packages.
• npm run dev: Starts the development server.

bash

npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Output

  VITE v4.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Example

This example shows creating a Vue project named my-vue-app using Vite. It installs dependencies and runs the development server. You will see a local URL where your Vue app is running.

bash

npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Output

  VITE v4.x.x  ready in 300 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Common Pitfalls

Some common mistakes when creating a Vue project with Vite include:

• Not selecting vue as the framework during setup.
• Skipping npm install before running the dev server.
• Running commands outside the project folder.
• Using an outdated Node.js version (use Node 14 or higher).

Always check your Node.js version with node -v before starting.

bash

npm create vite@latest my-vue-app
# Wrong: skipping npm install
npm run dev

# Right way:
npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev

Quick Reference

Steps to create a Vue project with Vite:

• Run npm create vite@latest and choose vue.
• Navigate into your project folder.
• Run npm install to add dependencies.
• Start the server with npm run dev.

Ensure Node.js version is 14 or newer for compatibility.

Key Takeaways

Use npm create vite@latest and select vue to start a Vue project.

Always run npm install before starting the development server.

Run npm run dev inside your project folder to launch the app locally.

Check that your Node.js version is 14 or higher for smooth setup.

Avoid skipping steps or running commands outside the project directory.