How to Set Up a Vue 3 Project with Node.js

Installing Vue.js Project with Command Line (Step-by-Step)

So, you want to install a Vue.js project, right? No worries, I will walk you through it in simple steps.

Open Your Command Prompt

First, you need to open your terminal. It could be PowerShell or Command Prompt, doesn't matter much.

Navigate to Your Folder

Now, go to the folder where you want to create your Vue project. Use the command below:

It takes you one step back in your folder structure. You can replace cd.. with your own path if needed.

Create Vue Project

Now, we use npm create to start the project setup. This will download the latest Vue project template for you.

This is where the magic starts! You'll see something like:

Vue.js will now ask you a few questions to set up your project. Don’t worry, just answer accordingly.

Questions During Setup

Here’s what you will be asked and what to choose:

1. Project Name:

You will be asked for a project name, for example, news-app-dev — that’s your project’s name.

2. TypeScript?:

If you don’t need TypeScript (it’s optional), just choose No.

3. JSX Support?:

Again, No if you don't need it.

4. Vue Router for SPA?:

Yes, select Yes if you're building a Single Page Application (SPA), otherwise, pick No.

5. Pinia for State Management?:

Yes, if you want easy state management with Pinia.

6. Vitest for Unit Testing?:

If you want unit testing, select Yes. If not, choose No.

7. End-to-End Testing (Cypress)?:

For e2e testing, choose Cypress. If you're unsure, it's always good to have it.

8. ESLint for Code Quality?:

Always a good choice, select Yes for code quality.

9. Prettier for Code Formatting?:

Optional but helpful. Choose Yes if you want auto-formatting.

After Setup

Once the setup is done, you’ll see something like:

Now, let’s go ahead and do what Vue tells us.

Go to your project directory

Install all dependencies

Run this command to install all the necessary packages:

You might see something like this:

Cypress will be installed for end-to-end testing.

Run Your Project

After the installation, run the development server:

You’ll see:

And that’s it! Your Vue 3 project is now running locally. Go ahead, open http://localhost:5173/ in your browser and see your app in action.