What is Vue.js?

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Explain what Vue's "progressive framework" idea actually means
Tell declarative UI apart from component-based UI

Let's break it down simply

Vue automatically reflects changes in your JavaScript state back into the DOM. You can start small with a single file loaded via CDN, and as your app grows, scale it up with Single-File Components, a router, and a state store.

javascript

import { createApp, ref } from 'vue'

createApp({
  setup() {
    const message = ref('မင်္ဂလာပါ Vue!')
    return { message }
  },
  template: '<h1>{{ message }}</h1>'
}).mount('#app')

You should see

Hello Vue!

Try it yourself

Change message to include your own name and render it in the browser.

Vue.js Guide — Vue.js

Easy traps

Changing a ref's value in JavaScript without using .value
Forgetting to add the mount target #app to your HTML

Exercise

Change message to include your own name and render it in the browser.

You'll know it worked when: Hello Vue!