Creating a New Vue App with Vite

Vite is a modern frontend build tool that provides extremely fast development server startup and hot module replacement. Here’s how to create a new Vue app using Vite:

Quick Start

1. Create the project:

   npm create vite@latest my-vue-app -- --template vue
   

   Or using yarn:

   yarn create vite my-vue-app --template vue
   

2. Navigate to the project directory:

   cd my-vue-app
   

3. Install dependencies:

   npm install
   # or
   yarn
   

4. Start the development server:

   npm run dev
   # or
   yarn dev
   

Alternative Methods

Using pnpm

pnpm create vite my-vue-app --template vue
cd my-vue-app
pnpm install
pnpm dev

Using Vue CLI (legacy)

While Vite is now the recommended approach, you can still use Vue CLI:

npm install -g @vue/cli
vue create my-vue-app
# Then select Vue 3 preset

Project Structure

A typical Vite + Vue project structure looks like:

my-vue-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js

Additional Configuration

To add TypeScript support:

npm create vite@latest my-vue-app -- --template vue-ts

To add Vue Router:

npm install vue-router@4

To add Pinia (state management):

npm install pinia

The Vite+Vue combination provides a blazing fast development experience with modern tooling out of the box.