DEV Community

Roel
Roel

Posted on

How to Vue.js: Create Your First Project (using Vite)

#webdev #tutorial #vue #vite

In this guide, we will set up a brand new Vue.js 3 project using the standard build tool, Vite.

Why Vite?

If you are coming from older Vue tutorials, you might be used to the "Vue CLI" (Webpack). That is now legacy. We use Vite (French for "quick") because it significantly improves the development experience:

  1. Instant Startup: It uses Native ES Modules (ESM) to serve files on demand, rather than bundling the entire app before starting.
  2. Performance: Hot Module Replacement (HMR) stays fast regardless of how large your app grows.
  3. Configuration: You will now use vite.config.js for your settings instead of the old vue.config.js.

Prerequisites

  • Node.js version 18.3 or higher.
  • A terminal (PowerShell, Bash, or cmd).
  • Visual Studio Code (recommended).

Step 1: Initialize the Project

Open your terminal and navigate to your projects folder. Run the following command to initialize the official Vue scaffolder. This command explicitly sets up a Vite-based project:

npm create vue@latest
Enter fullscreen mode Exit fullscreen mode

Step 2: Configure the Project

The command line will prompt you for a project name and several optional features. For a clean start, use the following configuration:

  • Project name: my-first-vue-app
  • Add TypeScript? No (keep it simple for now)
  • Add JSX Support? No
  • Add Vue Router? No
  • Add Pinia for state management? No
  • Add Vitest for Unit Testing? No
  • Add ESLint for code quality? Yes

Step 3: Install Dependencies

Navigate into your new project folder and install the NPM packages.

cd my-first-vue-app
npm install
Enter fullscreen mode Exit fullscreen mode

Step 4: Run the Development Server

Start the local development server. Because of Vite, this should be nearly instant.

npm run dev
Enter fullscreen mode Exit fullscreen mode

You will see the output pointing to http://localhost:5173/. Open this URL to see the default Vue welcome page.

Step 5: Clean up the boilerplate

Open the project in VS Code. To start with a blank slate, open src/App.vue and replace the contents with this basic structure:

<script setup>
import { ref } from 'vue'

const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style scoped>
h1 {
  color: #42b883;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Save the file. Your browser will automatically reload to show your changes.

Conclusion

You now have a running Vue 3 application powered by Vite. From here, you can start building out components in the src/components folder and importing them into App.vue.

Top comments (0)