LuisLlamas Logo
EN
crear-app-vue

How to Create a New Vue App

  • 4 min
  • Beginner

In this tutorial, we will see how to create a new Vue application from scratch. Which, logically, is the first step to start working with Vue.

There are two main ways to create a Vue application currently, both based on Vite (a web development tool).

This is because the Vue team decided that Vite is a more modern and faster option for development, providing a great experience for developers.

In this tutorial, we will look at both methods and when it is convenient to use each one.

Before Vue 3, the recommended method for creating a Vue application was through the official tool called Vue CLI. It is no longer used.

Prerequisites

Before we begin, let’s make sure we have the following installed.

  1. Node.js: Astro runs on Node.js, so you need to have it installed on your system.
  2. NPM: The package manager included with Node.js
  3. Code Editor or IDE: I recommend using Visual Studio Code.

That is, more or less the usual tools for any web development. But, in case you are not familiar with any of them, here are some links.

If you want to know more,

Create a New Vue.js Application

As I mentioned, there are two main ways to create a Vue application, and both are based on Vite:

Use the Official Vue Template

The recommended way is to use the official Vue template. It provides an optimized setup for Vue and a project structure, prepared with the best practices from the Vue team.

To create an application with the official Vue 3 template, run:

npm create vue@latest

create-vue-app

The assistant will ask us a series of questions to configure the project:

  • Project name: The name of the project. For example: my-vue-app
  • Add TypeScript? → No (for this tutorial, we will only work with JavaScript)
  • Add JSX Support? → No
  • Add Vue Router for Single Page Application development? → Yes
  • Add Pinia for state management? → Yes
  • Add Vitest for Unit Testing? → No
  • Add End-to-End Testing with Cypress? → No
  • Add ESLint for code quality? → Yes
  • Add Prettier for code formatting? → Yes

Use the Vite Template

The second option is to use the Vite template directly. As we mentioned, Vue internally uses Vite, so we can also create a Vue project by running:

npm create vite@latest

The assistant will ask us to choose from various frameworks, among which Vue is included.

  • Vue → Select Vue as the framework
  • JavaScript or TypeScript → Choose JavaScript for this tutorial

The structure generated by vite is very similar to that of the official Vue template, but it is less customized specifically for Vue and more oriented towards a minimal configuration environment.

This will create a much lighter and more straightforward Vue setup, but without Vue Router or Pinia preconfigured. If we need these tools, we must install them manually.

Which option is better?

✅ If you want a ready-to-use setup with Vue Router, Pinia, and the best Vue practices, choose npm create vue@latest.

✅ If you want a minimal and more customized setup, or you are configuring a mixed architecture, choose npm create vite@latest (with Vue).

For the course, I will use the official template (npm create vue@latest) because it is more complete and optimized for Vue projects.

Run the Application

Now that we have our application created, regardless of the chosen method, let’s see how we can run our application.

When the process is finished, we will see that the project has been created in a directory with the name we provided. First, let’s go to the folder we created with:

cd my-vue-app

First, we need to install the project dependencies. For that, we run:

npm install

We can now launch the application and verify that everything is working. We can start the development environment with:

npm run dev

This will start a development server, and we can open the application in the browser at the URL http://localhost:5173.

If everything went well, you should see a webpage with an initial message from our HelloWorld.vue component.

Congratulations! You are ready to start practicing with Vue.js 🎉.

When you want to distribute your application, run:

npm run build

Vite will create the application and save the result in the dist folder of your project. Ready

On this page