Creating a new Vue project

Introduction

Starting a new Vue project sets up all the files and tools you need to build a web app easily.

When you want to build a new interactive website or web app using Vue.

When you need a ready setup with modern tools like hot reload and build scripts.

When you want to organize your code with Vue's recommended structure.

When you want to learn Vue by starting with a clean, working project.

When you want to add Vue to a new project without manually configuring everything.

Syntax

Vue

npm create vue@latest
# or
pnpm create vue@latest
# or
yarn create vue@latest

This command uses the official create-vue scaffolding tool to scaffold a new project.

You will be asked some questions to customize your project setup.

Examples

Runs the Vue project creation tool using npm.

Vue

npm create vue@latest

Runs the Vue project creation tool using pnpm, a fast package manager.

Vue

pnpm create vue@latest

Runs the Vue project creation tool using yarn package manager.

Vue

yarn create vue@latest

Sample Program

This example shows creating a new Vue project named my-vue-app with Vue Router and ESLint enabled. After creation, you install dependencies and start the development server.

Vue

npm create vue@latest
# Follow prompts:
# Project name: my-vue-app
# Add TypeScript? No
# Add JSX Support? No
# Add Vue Router? Yes
# Add Pinia? No
# Add Vitest? No
# Add ESLint? Yes

cd my-vue-app
npm install
npm run dev

Important Notes

You need Node.js installed on your computer before running these commands.

The prompts let you choose features like TypeScript, routing, and testing.

After setup, use npm run dev to start a local server and see your app in the browser.

Summary

Use npm create vue@latest to start a new Vue project easily.

Answer the setup questions to customize your project features.

Run npm run dev inside your project folder to see your app live.