Vue / Basic: reactive components and input contracts / Lesson 1

Vue applications and single-file components

Connect a Vue application instance, component state, template, and build context without confusing source files with browser-ready output.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Explain the application boundary and SFC compilation.
Identify the explicit Vue baseline and surrounding setup.

Describe the interface as a function of state

Vue is a framework for building interfaces from components and reactive state. A component describes what should be rendered for current inputs and handles events that change state. The framework coordinates updates instead of requiring the application to manually replace every affected DOM node. This does not remove the need to understand JavaScript, HTML, accessibility, or browser behavior. A reading-notes interface provides the course’s synthetic context. Begin by naming the state owner and the user action that changes it, then follow how that change becomes visible rather than treating directives as isolated magic words.

Keep the version and API family explicit

This course targets Vue 3.5 with Composition API and single-file components, reviewed against the official stable 3.5.44 release on 2026-10-25. The same release page lists 3.6 release candidates separately, so their experimental or prerelease behavior is outside the baseline. Pin compatible compiler, runtime, and tooling versions in a real project. A newer compiler can generate code requiring newer runtime behavior. Vue also supports Options API; examples using setup bindings should not be copied into an Options API context without understanding the different instance and declaration rules. State the project assumptions before evaluating a snippet.

Read the three SFC responsibilities

A .vue file can contain script, template, and style sections that tooling compiles together. script setup is compile-time syntax for declaring a component’s setup logic; its top-level bindings are available to the template. The setup body runs for component instances rather than acting like an ordinary shared module singleton. The example owns a local counter and uses a real button so keyboard interaction is available. Its scoped style limits matching through generated scoping attributes; it is neither a security boundary nor a guarantee that every descendant style is isolated. The surrounding app and compiler remain required.

vue A local counter component

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <button type="button" @click="count++">Read {{ count }} notes</button>
</template>

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

Save as App.vue inside a compatible Vue SFC project. The initial button text is Read 0 notes; each activation increments the visible count. This framework fragment was not browser-executed and remains non-runnable in the course.

Mount through a clear application entry

createApp creates an application instance, and mount attaches it to an existing host element. The host must exist in the HTML before this entry runs. SFC imports require build tooling with Vue compilation support; a browser does not interpret a raw .vue file as JavaScript. Keep application-wide plugins and configuration at the entry boundary, while feature state belongs to a suitable component or store owner. Multiple applications can exist on one page, but they have separate app configuration. Do not mount repeatedly to repair a state bug: investigate state ownership and rendering inputs instead.

javascript The entry for an already configured SFC project

import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)
app.mount("#app")

The project HTML must contain an element with id app, and the bundler must compile App.vue. Package installation, build configuration, and browser mounting are intentionally outside this fragment; no project files or services are changed.

Separate compile, runtime, and state failures

A missing compiler plugin, invalid template expression, unresolved import, absent mount target, and nonreactive state produce different failures. Read the first relevant diagnostic and identify the phase before changing dependencies. A development preview is useful but does not establish production build behavior, server rendering, or accessibility. Keep a small reproducible component and its setup assumptions when reporting a problem. The course validates harmless local JavaScript separately and labels framework fragments honestly; a syntax check does not prove Vue compiled or rendered them. This distinction keeps examples useful without inventing a browser test result.

Common errors and fixes

The browser cannot load an SFC directly

Why it happens: A source component is treated as compiled JavaScript.
How to fix it: Use the project’s compatible SFC build integration.
Prevent it next time: Document compiler and runtime setup beside examples.

Mounting fails to find the host

Why it happens: The HTML target is absent or unavailable when entry runs.
How to fix it: Verify host identity and script loading order.
Prevent it next time: Keep the application entry explicit.

An Options API example is mixed into setup incorrectly

Why it happens: Different declaration and instance models are assumed equivalent.
How to fix it: Translate the example according to its API context.
Prevent it next time: State the API family and version baseline.

Check your understanding

1. Does scoped CSS make a component safe to render untrusted HTML?

Show worked solution

No. Style scoping concerns selector matching, while untrusted HTML is a separate content and security boundary. Use normal escaped interpolation for text and a reviewed sanitization strategy only when rich content is actually required.

2. A counter works in a development page. Which claims remain unverified?