Getting Started with Vue.js: Step-by-Step Setup Tutorial

What You’ll Need

Before you start, ensure you have the following:

Node.js: Install the latest stable version from nodejs.org.
npm (comes with Node.js) or Yarn as your package manager.
A code editor such as VS Code.

Setting Up Vue.js

Vue.js offers multiple ways to get started. We will cover three common methods:

Using Vue CDN

If you want to quickly test Vue.js without installing any tools, you can include Vue via a CDN:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.js App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          message: 'Hello, Vue!'
        };
      }
    }).mount('#app');
  </script>
</body>
</html>

Save this file as index.html and open it in your browser. You should see “Hello, Vue!” displayed on the page.

Using Vue CLI

Install Vue CLI globally:

npm install -g @vue/cli

Create a new project:

vue create my-vue-app

Navigate to the project folder:

cd my-vue-app

Run the development server:

npm run serve

Open http://localhost:8080 in your browser to view your app.

Using Vite

Create a new Vue project with Vite:

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

Navigate to the project folder:

cd my-vue-app

Install dependencies:

npm install

Run the development server:

npm run dev

Open the URL shown in the terminal (e.g., http://localhost:5173).

Project Structure

A typical Vue.js project structure looks like this:


my-vue-app
├── node_modules/      # Installed dependencies
├── public/            # Static assets
├── src/
│   ├── assets/        # Images, CSS, etc.
│   ├── components/    # Reusable components
│   ├── App.vue        # Root component
│   └── main.js        # Application entry point
├── package.json       # Project metadata
└── vite.config.js     # Vite configuration (if using Vite)

Your First Component

Create a HelloWorld.vue file in src/components:


<template>
  <div>
    <h1>{{ title }}</h1>
    <p>This is a reusable component.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Welcome to Vue!'
    };
  }
};
</script>

<style>
h1 {
  color: #42b983;
}
</style>

Import and use the component in App.vue:


<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

Building for Production

Run the build command:

npm run build

This creates an optimized dist/ folder with your compiled app.

Deploy the dist/ folder to a static hosting provider like Netlify, Vercel, or your web server.

Additional Resources

If you found this tutorial helpful, share it with your friends or leave a comment below with your thoughts!