Introduction to Vue

By Syncfusion®, Inc. · Last updated November 14, 2026

What Vue is and why it was created, the progressive framework idea, the Vue ecosystem, Vue 2 vs Vue 3, Options API vs Composition API, CDN vs Vite, creating and running a project, its files, and your first app with createApp(), mount(), ref() and a click.

Vue Introduction

• Vue is a JavaScript tool for building web pages that change when you click, type or load data.
• You write what the page should look like.
• Vue keeps the page up to date for you.
• In this lesson, you will set up Vue and build your first small app.

Simple lesson: Vue updates the page for you when your data changes.

A Real-World Example

• Meera runs a small food stall called Meera's Kitchen.
• She wants a web page with a menu and an order counter.
• Each time a customer taps Add order, the number must go up.
• With plain JavaScript, she must find the number on the page and change it by hand.
• With Vue, she only changes the number in her code. Vue changes the page.

Press ▶ Run, then click the button in the preview.

• What happened: the button adds 1 to orders.
• Vue saw the change and showed the new number at once.

What You Will Learn

1. What Vue is and why people use it.
2. What a progressive framework means.
3. The difference between Vue 2 and Vue 3.
4. The two ways to write Vue code: Options API and Composition API.
5. Two ways to add Vue to a page: CDN and build tool.
6. How to create, run and build a Vue project.
7. What each file in a new project does.
8. How to start your first app with createApp() and mount().
9. Which tools help you find problems.

What Is Vue?

• Vue = a JavaScript framework for building user interfaces.
• Framework = ready-made code and rules that help you build apps faster.
• User interface (UI) = the part of an app you see and click.
• Vue is free and open source.
• It is said like the English word "view".

Data Drives the Screen

• In Vue, you keep values like orders in your code. These values are called state.
• The template shows the state on the screen.
• When the state changes, Vue updates only the part of the page that uses it.
• Watch the animation: the code changes first, then Vue, then the screen.

Simple lesson: change the state, and Vue changes the screen.

Why Vue Was Created

• Vue was made by Evan You. He used AngularJS in projects while working at Google.
• He wanted the useful parts of AngularJS in a smaller, simpler tool.
• The first version came out in 2014.
• Vue 3 came out in 2020. It became the default version in 2022.
• Today, a core team and a large community look after Vue.

Features of Vue

• Easy start: a page with one script tag is enough to try it.
• Templates: you write HTML with a few extra Vue rules.
• Reactivity: the screen updates when data changes.
• Components: you build the page from small, reusable parts.
• Single-File Components: the HTML, code and CSS of one part live in one .vue file.
• Fast and small: Vue only updates what changed.
• TypeScript support: Vue 3 itself is written in TypeScript.

Simple lesson: Vue was built to be simple to start and strong enough for big apps.

A Progressive Framework

• Progressive = you can use a little of Vue, or all of it.
• You add more pieces only when your app needs them.
• Some tools ask you to learn everything on day one. Vue does not.
• Watch the layers build up, from one script tag to full websites.

The Vue Ecosystem

• Ecosystem = the official tools that work with Vue.
• Vite: starts and builds your project.
• Vue Router: moves between pages. You will learn it in Vue Router Basics.
• Pinia: keeps data that many parts share. You will learn it in State Management with Pinia.
• Vue DevTools: lets you look inside your running app.
• Nuxt: a bigger framework built on Vue for full websites. You will learn it in Nuxt: Full-Stack Vue.

Simple lesson: start small, and add tools only when you need them.

Where Vue Is Used

• Interactive pages: search boxes, filters, order counters.
• Single-Page Application (SPA) = one page that changes its content without a full reload.
• Progressive Web App (PWA) = a website you can install and use like a phone app.
• Dashboards: charts and tables that update often.
• Online shops: product lists, carts and checkout.
• Business apps: big apps for offices and teams.

Simple lesson: Vue works for small widgets and for big apps.

Vue 2 vs Vue 3

• This course teaches Vue 3 only.
• You may still see Vue 2 code in old projects and old blog posts.
• If you see new Vue(...), it is Vue 2 code.

Simple lesson: learn Vue 3. Vue 2 no longer gets updates.

Options API vs Composition API

• Vue gives you two styles to write the same component.
• Options API = you fill in named sections such as data and methods.
• Composition API = you write normal variables and functions inside <script setup>.
• Both styles make the same page.
• This course uses the Composition API. New Vue projects and the official docs use it.
• You will learn to read the older style in Options API.

Both boxes below build the same counter. Run each one.

• What happened: this.orders++ changed the data, and the page updated.

• What happened: the same page, but the code uses plain variables and functions.
• There is no this to worry about.

Simple lesson: two styles, same result. This course uses the Composition API.

Two Ways to Add Vue

Using Vue from a CDN

• CDN = a website that hosts files you can link to.
• You add one <script> tag, and Vue is ready.
• No install is needed.
• It is good for trying Vue or adding it to an old page.

A whole CDN page looks like this:

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app">
      <h1>{{ shop }}</h1>
      <p>Today's special: {{ special }}</p>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
      Vue.createApp({
        setup() {
          const shop = "Meera's Kitchen";
          const special = "Masala dosa";
          return { shop, special };
        },
      }).mount("#app");
    </script>
  </body>
</html>

• The script tag creates a global Vue object.
• Vue.createApp() uses the HTML inside #app as the template.
• Run the same script below.

Using Vue with a Build Tool

• Build tool = a program that prepares your code for the browser.
• Vue uses a build tool called Vite (said "veet", French for fast).
• It lets you write .vue files and TypeScript.
• It makes the final files small and fast.
• Real Vue apps use this way.

Simple lesson: use the CDN to try Vue. Use Vite for real projects.

Creating a Vue Project

Install Node.js

• Node.js = a program that runs JavaScript outside the browser. Vite needs it.
• npm = a tool that comes with Node.js. It downloads code packages.
• Download a recent LTS version from nodejs.org. LTS means it gets long-term fixes.
• Current Vite needs Node.js 20.19 or newer (or 22.12+). An older Node gives a start-up error.
• Then check both versions in a terminal.

node -v
# v22.12.0
npm -v
# 10.9.0

• Each command prints a version number.
• Your numbers may be different. Any recent LTS version works.

Create the Project with create-vue

• create-vue = the official tool that makes a new Vue project with Vite.
• It asks you a few questions, then creates the folder.

npm create vue@latest

It asks for a project name, then shows a list of features. Press Space to tick one and Enter when done. For this course:

• Project name: meeras-kitchen.
• TypeScript: tick it if you picked TypeScript in the top bar. Leave it if you picked JavaScript.
• Router and Pinia: leave them for now. You will add them later.
• Vitest: tick it. You will use it in Testing Vue Apps.
• ESLint: tick it. It warns you about mistakes.
• The exact questions can change between versions. If you see Yes/No questions instead, give the same answers.

Install, Run and Build

cd meeras-kitchen
npm install      # 1. download the packages the project needs
npm run dev      # 2. start the dev server
#   ➜  Local:   http://localhost:5173/
npm run build    # 3. make the final files in the dist folder

• npm install: fills a node_modules folder with packages.
• npm run dev: starts a dev server = a small local website for testing. Open the link it prints.
• npm run build: makes small, fast files in dist/. You upload these to a real website.
• Stop the dev server with Ctrl + C.

Simple lesson: create, install, run. Build only when you want to publish.

Project Structure

• A new project has a few folders and files.
• You will write most of your code inside src/.
• Click each file below to see what it does.

• Every box in this course is a small version of this project.
• Press the download button in a box to get it as a real project.

Simple lesson: index.html holds the empty box, main starts the app, and App.vue is what you see.

Your First Vue App

How a Vue App Starts

• createApp() = makes a new Vue app from a component.
• Root component = the first, top component. Here it is App.vue.
• mount() = puts the app inside a box on the HTML page.
• Watch the four steps light up in order.

Hello World

• This project has two files: App.vue and the main file.
• Open each tab, then press ▶ Run.

• What happened: the main file made the app from App.vue and mounted it in #app.
• {{ message }} showed the text.
• <template> = what the component shows on screen.
• <script setup> = the component's code. Every variable here can be used in the template.
• {{ }} = "show this value here". You will learn more in Templates and Directives.
• lang="ts" = this script is TypeScript. The JavaScript flavour leaves it out.

Showing Reactive Data

• ref() = makes a value reactive. Vue watches it.
• In the script, read or change it with .value.
• In the template, just write its name. Vue adds .value for you.
• You will learn this fully in Reactive State.

• What happened: after 2 seconds, the code changed status.value.
• Vue updated the screen. The Console below the preview shows the old and new values.

Handling a Button Click

• @click = "run this when the button is clicked".
• The function changes the state.
• Vue updates the page.

• What happened: each click ran addOrder().
• It changed orders.value, and both lines on the page updated.

Simple lesson: createApp() makes the app, mount() shows it, and ref() keeps the screen in sync.

Development Tools

• Vue DevTools = a browser extension for Chrome and Firefox. It shows your components and their state.
• You can change a value in Vue DevTools and watch the page update.
• Browser DevTools: press F12. The Console tab shows errors and console.log output.
• Hot Module Replacement (HMR) = when you save a file, the page updates without a full reload.
• HMR keeps your state, so you do not lose what you typed.

Simple lesson: use Vue DevTools to see state, and the Console to see errors.

TL;DR

• Vue = a JavaScript framework for building user interfaces.
• Progressive = use a little of Vue or all of it.
• Vue 3 = the current version. Vue 2 support ended in 2023.
• Composition API = <script setup> with plain variables and functions. This course uses it.
• CDN = one script tag. Vite = the build tool for real projects.
• Project steps = npm create vue@latest, npm install, npm run dev, npm run build.
• createApp(App) = makes the app. mount("#app") = shows it in the page.
• ref() = a reactive value. Use .value in the script, not in the template.
• @click = run a function on a click.

Common mistakes

Check Yourself

Exercises

What to Remember

• Vue keeps the screen in sync with your data.
• You can start with one script tag, but real apps use Vite.
• A new project has index.html, the main file and App.vue at its heart.
• createApp() plus mount() starts every Vue 3 app.
• ref() makes a value reactive. Change it with .value in the script.

Next: Templates and Directives