Introduction

Vue is a JavaScript framework for building user interfaces. You describe the page once, in a template, and mark the parts that come from your data. Vue watches that data and updates those parts of the DOM when it changes. You never call textContent or appendChild yourself. This course documents Vue 3.5.

Two ways it is written

The first is a build step. You write single-file components: one file ending in .vue holding the markup, the logic and the styles for one piece of the page. A compiler turns each file into a JavaScript module before the browser sees it. That is what this course uses, and what nearly every Vue application ships.

The second is a <script> tag. You load the global build from a CDN, call createApp, and Vue compiles the template out of the HTML already on the page, at runtime. Nothing to install. It suits adding one interactive widget to a page you already serve.

What trips people up

There are also two ways to write the inside of a component. The Composition API, written with <script setup>, is the current form and is used in every lesson here. The Options API — a data() method and a methods object, reached through this — is the older form, and it still works. You will meet it in older tutorials and answers, so it is worth recognising. Mixing both in one file only makes the file harder to read.

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value += 1
}
</script>

<template>
  <button type="button" @click="increment">
    Clicked {{ count }} times
  </button>
</template>

<style scoped>
button {
  font: inherit;
  padding: 0.5rem 1rem;
}
</style>

<!-- counter.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Counter</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <button type="button" @click="count++">Clicked {{ count }} times</button>
    </div>

    <script>
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const count = ref(0)
          return { count }
        }
      }).mount('#app')
    </script>
  </body>
</html>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    increment() {
      this.count += 1
    },
  },
})
</script>

<template>
  <button type="button" @click="increment">
    Clicked {{ count }} times
  </button>
</template>