Lesson 1 of 7

Hello, Vue!

You will write your first Single File Component, a .vue file that keeps a component's template, script and styles together. Every Vue app is built from these.

<!-- App.vue — a Vue Single File Component (SFC) -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// ref() makes a value reactive
const message = ref("Hello, Vue!")
const count   = ref(0)
</script>

<style scoped>
/* scoped — styles only apply to this component */
h1 { color: #42b883; }
</style>
Sandboxed page

`<script setup>` is Vue 3's Composition . The `setup` attribute is syntactic sugar — everything you declare at the top level is automatically available in the template. No need for `return {}` or wrapping in `setup()`.

<!-- CDN version — no build step, great for quick experiments -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">{{ count }}</button>
  </div>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const message = ref("Hello from CDN!")
        const count   = ref(0)
        return { message, count }
      }
    }).mount('#app')
  </script>
</body>
</html>
Sandboxed page
Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.