Vue.js Setup

Setting up Vue.js means adding the Vue library to your project. You have three main methods: CDN (Content Delivery Network), npm (Node Package Manager), and Vue CLI. Beginners start with CDN because it requires no build tools.

Method 1: CDN Setup - Quickest for Learning

Copy the script tag below and paste it into your HTML file right before the closing </body> tag.

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

This loads the development version of Vue. It includes helpful warnings and debugging messages. For production websites, replace the URL with the minified production version: https://unpkg.com/vue@2/dist/vue.min.js

Complete HTML Template for First Vue Project

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First Vue App</title>
</head>
<body>
    <div id="app">
        <h1>{{ greeting }}</h1>
        <p>Current time: {{ time }}</p>
    </div>

    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                greeting: 'Hello Vue learner!',
                time: new Date().toLocaleTimeString()
            }
        });
    </script>
</body>
</html>

Save this as index.html. Open in any modern browser. You see your greeting and current time. Vue is now working.

Step-by-Step Setup Diagram

Step 1: Create a new folder on your computer
        |
        v
Step 2: Create index.html inside that folder
        |
        v
Step 3: Write standard HTML structure
        |
        v
Step 4: Add a div with id="app" inside body
        |
        v
Step 5: Add Vue CDN script tag
        |
        v
Step 6: Add your Vue instance script after CDN
        |
        v
Step 7: Open index.html in Chrome or Firefox

Method 2: Vue CLI for Real Projects

Vue CLI creates a full project with webpack, hot reloading, and build optimization. Install Node.js first. Then run these commands in your terminal:

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

This starts a development server at http://localhost:8080. Vue CLI supports Single File Components (.vue files). Use this method for serious applications.

Method 3: Direct Download

Visit https://vuejs.org/v2/guide/installation.html. Right-click the development version link. Choose "Save Link As". Save vue.js to your project folder. Then reference it locally:

<script src="vue.js"></script>

This method works without internet once downloaded.

Verifying Vue Installation

Open your browser's developer tools (F12). Go to the Console tab. Type Vue and press Enter. You see the Vue constructor function. Type Vue.version to see the version number. Any output confirms Vue loaded correctly.

Common Setup Mistakes and Fixes

Mistake 1: Vue script placed before the app div

Fix: Always put Vue script after the div with id="app". The div must exist before Vue tries to find it.

Mistake 2: Wrong element ID in el property

Fix: Check spelling. el: '#app' uses a hash symbol. The div id must match exactly without the hash.

Mistake 3: Using Vue 3 CDN with Vue 2 syntax

Fix: Use the exact CDN URL provided above. Vue 3 has different syntax for creating an app.

Online Editors for Vue Practice

You can also use CodePen, JSFiddle, or StackBlitz without local setup. Search for "Vue 2 template" on any of these platforms. They provide a ready-to-code environment with Vue already loaded.

Previous lessons
Back to courses
Next lessons

Leave a Comment