Glossary

133 terms from Vue.js, in plain words, each with the chapter that teaches it.

Search the glossary

#

<script setup>: The compact way to write a component's script: it runs once when the component is created, and its top-level variables, functions and imports are available in the template.
<style scoped>: A style block whose CSS applies only to this component. Vue adds a `data-v-...` attribute to make the rules local.

A

AbortController: A browser object whose `signal` is passed to `fetch`, and whose `abort()` method cancels that request. Kettle & Crane's search box uses it to cancel an out-of-date request when the user keeps typing.
Action: A function in a Pinia store that changes the store's state, such as `add`, `remove` or `clear` in the cart store.
Alias (Vite): A shortcut set in `vite.config.js` so you can write `@/` in imports to mean the `src/` folder.
API (Application Programming Interface): A server address that a program can request data from or send data to, usually returning JSON. Kettle & Crane's order API supplies the products and accepts orders.
aria-live: An HTML attribute that makes screen readers announce changes inside an element, such as validation messages appearing in Priya's checkout form.
Async function: A function written with `async` that can `await` a slow step such as `fetch`, pausing until the answer arrives. Vue code uses it inside `onMounted` or watchers to load data.
Auto-imports: A Nuxt feature that makes `ref`, `computed`, `useRoute` and your own utility functions available without `import` lines.

C

Catch-all route: A route placed last whose path matches any address no earlier route matched, used to show a "Page not found" view.
Child component: A component used inside another (the parent) component's template, such as ProductCard inside App.vue.
Chunk: A separate file of code that the browser downloads only when needed, such as the cart page's code when someone first visits `/cart`.
Cleanup function: A function a watcher runs just before its next run, used to cancel earlier work such as an in-flight request. It is registered with `onWatcherCleanup(fn)`.
Client-side routing: Changing pages in the browser by swapping components as the address changes, without asking the server for new HTML.
Compiler macro: A function such as `defineProps`, `defineEmits` or `defineModel` that works only inside `<script setup>` and needs no import.
Component: A reusable piece of the page with its own template, code and styles, such as a product card.
Composable: A function whose name starts with `use` that uses refs, computed values or watchers and returns refs, so several components can share the same logic. For example, `useFetchJSON` loads data from a URL and returns `data`, `error` and `loading` refs.
Composition API: Vue's way of writing components with `ref`, `computed` and plain functions, typically inside `<script setup>`. It is the newer alternative to the Options API, which uses `data()` and `methods`.
computed: A read-only value derived from other reactive values. Vue caches it and recalculates only when those values change, like the cart's `subtotalCents`.
CORS (Cross-Origin Resource Sharing): A browser security rule that blocks a page from reading responses from a different origin (such as another port) unless the server allows it. The `/api` proxy avoids it.
create-vue: Vue's official project starter, run with `npm create vue@latest`. It asks a few questions and generates a Vite-based Vue project.
createApp: The Vue function that makes an app whose top component is the one you pass in. `.mount("#app")` then renders it into the matching page element.
createPinia: The function that creates Pinia's central instance. Passing it to `app.use(...)` in `main.js` turns stores on.
createRouter: Vue Router's function for making the router from a `routes` list and a `history`. `createWebHistory()` gives normal-looking paths like `/cart` and makes Back and Forward work.
curl: A command-line tool that requests a web address and prints what the server sends back. It can show whether a page's HTML already contains its content, such as a heading rendered on the server by Nuxt.

D

Declarative rendering: Describing what the page should look like for the current data in a template, and letting Vue work out the DOM changes.
Deep reactivity: A ref holding an array or object is reactive all the way down, so `push`, changing a property and replacing the whole value all update the page.
Deep watcher: A watcher created with `{ deep: true }` that also notices changes inside nested objects and arrays, such as one cart line's `qty`.
defineEmits: A compiler macro in `<script setup>` that declares the events a component can send and returns the `emit` function used to send them.
defineEventHandler: A Nuxt server function that turns a plain function into a route handler. Whatever it returns is sent to the browser as JSON.
defineModel: A compiler macro that gives a component its own `v-model`: it returns a ref linked to the parent's value, so changing it updates the parent. QtyPicker uses it for quantity.
defineProps: A compiler macro in `<script setup>` that declares which props a component accepts, optionally with `type`, `required` and `default`. It needs no import.
defineStore: The Pinia function that creates a store from an id and a setup function. Refs become state, computeds become getters, and functions become actions.
Dev server: The program `npm run dev` starts to serve your app while you edit, updating it as you save.
Directive: A special attribute starting with `v-` that Vue reads to do something, such as `v-if`, `v-for` or `v-bind`.
dist/: The folder `npm run build` fills with the finished site: plain files any static host can serve.
DOM (Document Object Model): The browser's live tree of page elements that JavaScript can change. Vue updates it for you instead of you doing it by hand.
Dynamic segment: A part of a route path, written with a colon like `:sku`, that matches any value. `/product/MUG-BL` and `/product/NB-DOT` both use the same view.

E

Emit: To send a custom event from a child component to its parent. ProductCard emits `add` with the product when its button is clicked.
Event modifier: A word after a dot on an event, such as `.prevent` or `.stop`, that does a chore like calling `preventDefault()` or `stopPropagation()`.
Expression: A piece of JavaScript that produces a value, such as `products.length` or a ternary. Templates allow expressions but not statements like `if`.

F

Fallback content: What a slot shows when the parent passes nothing, written between `<slot>` and `</slot>`.
fetch: The browser's built-in function for requesting data from a server. A helper such as `fetchJSON` can wrap it to return parsed JSON, or throw an `HttpError` when the response has a bad status.
Fetch states: The four situations a data-loading page must show: loading, failed, empty and ready. A `v-if` chain shows one at a time, in that order.
File-based routing: Making routes from the files in a folder instead of writing a router file. In Nuxt, `app/pages/index.vue` is `/`.
Framework: A library that runs your app's structure for you: you fill in the parts and it calls them. Vue is a framework for user interfaces.

G

Getter: In a Pinia store, a computed value derived from state, such as `count`. In `watch`, a getter is a function returning the value to watch.
Global state: Data that many components or pages share, kept in a store instead of being passed through props, such as the cart.

H

Hot module replacement (HMR): Vite updating the running page when you save a file, without a full reload.
HTTP status codes (400, 404, 500): A number the server sends with its answer. 400 means the server refused the request (such as an invalid order), 404 means nothing was found, and 500 means a server error.
HttpError: The error `fetchJSON` and `postJSON` throw when the server answers with a bad status. It carries `status` and `body`, for example the `problems` list on a 400.
Hydration: Vue taking over server-rendered HTML in the browser so that buttons and other interactive parts start working.

I

immediate: A `watch` option that runs the callback once at the start, as well as on later changes.
instanceof: A JavaScript operator that checks whether an object was created from a given class. For example, `err instanceof HttpError` tells a server refusal apart from other kinds of failure.
Interpolation: Double braces `{{ }}` in a template that insert the value of an expression into the page as plain text.

J

JSON (JavaScript Object Notation): A text format for data that JavaScript can read and write easily. The order API sends and receives JSON, and `loadJSON` and `saveJSON` use it for localStorage.

K

kebab-case: Writing a name in lowercase with hyphens between words, like `button-text`. A prop named `buttonText` in the script is written this way in templates.
Key (:key): A unique ID, such as the SKU, given to each `v-for` element so Vue can move, add and remove the right elements when a list changes.
Key modifier: A suffix such as `.enter` or `.esc` that runs a handler only for one key.

L

Lazy loading: Loading a route's code only the first time it's visited, by writing the component as `() => import(...)`. Kettle & Crane's cart page works this way.
Lifecycle hook: A function such as `onMounted` or `onUnmounted` that runs code at a particular stage of a component's life.
localStorage: Browser storage that keeps small values after a page reload. The cart is saved there under the key `kc-cart`.

M

Method handler: An event listener written as a function's name, such as `@click="addBag"`, which Vue calls with the event object. The alternatives are an inline statement or an inline call with your own arguments.
mount: To render a Vue app or component into the page. `.mount("#app")` renders into the element matching that CSS selector, and a component is "mounted" once its elements are in the page.

N

Named route: A route with a `name`, so you can link to it by name and parameters instead of building the path.
Named slot: A slot with a `name`, which the parent fills using `<template #name>`.
Navigation guard: A router function that runs before a page change and can allow, stop or redirect it, such as sending logged-out visitors to a login page.
Nested routes: Routes shown inside another route's page by placing a `RouterView` inside a view.
nextTick: A Vue function that waits until Vue has finished updating the DOM after a change, for code that must read the updated page.
Node.js: A program that runs JavaScript outside the browser. Vue's tools and the practice server need it, and Nuxt apps run on it in production; LTS means the long-term-support version.
npm: Node.js's package manager and script runner. It downloads libraries such as `vue-router` and runs commands like `npm run dev` and `npm run build`.
Nuxt: A framework built on Vue that adds server-side rendering, file-based routing, auto-imports and server routes. Choose it for public pages that must load fast and be found by search engines.
NuxtLink: Nuxt's counterparts to `RouterLink` and `RouterView`: `<NuxtLink>` links between pages and `<NuxtPage />` shows the page for the current address.

O

One-way data flow: The rule that props go from parent to child and a child must never change them. If a child needs a change, it emits an event.
onMounted: Lifecycle hooks: `onMounted(fn)` runs once the component's elements are on the page, and `onUnmounted(fn)` runs when it is removed. Anything started in the first, such as a timer, should be stopped in the second.
onWatcherCleanup: A function called inside a watcher that registers code to run just before the watcher runs again, so each run can cancel the previous one's work.
Options API: Vue's older way of writing components with `data()` and `methods` instead of `<script setup>`. You'll see it in older code and tutorials.

P

PascalCase: Writing a name with each word capitalized and no separators, like `ProductCard`. Vue component names use it so they never clash with HTML tags.
Pinia: Vue's official store library, used to share state such as the cart between components and pages.
postJSON: A helper in `api.js` that sends a body as JSON to a URL and reads the JSON answer, throwing `HttpError` on a bad status. Kettle & Crane uses it to place an order.
Preview server: What `npm run preview` starts so you can try the built `dist/` folder locally.
Progressive framework: A framework you can adopt a little at a time, from one corner of an existing page to a whole app, adding the router and store only when needed.
Prop: A value a parent passes into a child component, like a function argument. ProductCard receives its `product` as a prop.
Prop drilling: Passing data through many layers of components that don't use it, only to reach one that does. A store avoids it.
Props down, events up: Vue's main pattern: a parent owns the data and passes it down as props, and children report what happened by emitting events.
Proxy (JavaScript): A built-in JavaScript object type that lets code notice when properties are read or written. Vue uses it behind the scenes to track reactivity.
Proxy (Vite): A Vite dev-server setting that forwards requests starting with `/api` to another server, here the practice server on port 8080. It avoids CORS errors.

Q

Query string: The `?q=mug` part of an address that sends extra details to the server. `URLSearchParams` builds it and encodes spaces and symbols.

R

reactive: A Vue function that makes an object itself reactive, with no `.value` needed. Destructuring it or replacing the whole object breaks reactivity, so it suits a single grouped object such as a form.
Reactivity: Vue recording which state a template reads and updating those parts of the page when the state is written to.
reduce: A JavaScript array method that combines all items into one value, such as summing quantities into the cart `count`.
ref: A reactive box for one value that Vue watches. You read and write it with `.value` in script, and just by name in templates.
Ref unwrapping: Templates read and assign a ref by its plain name, with no `.value`. In the script you still need `.value`.
Route: A rule that pairs an address path such as `/cart` with the component to show.
Route props: The route setting `props: true`, which passes each dynamic segment to the view as a prop, so ProductView can simply declare `sku`.
RouterLink: Vue Router's link component. It works like `<a href>` but changes the page without a reload, and the link matching the current page gets the class `router-link-active`.
RouterView: A Vue Router component that marks where the current route's component appears, inside a frame such as App.vue.

S

Scoped slot: A slot that hands data back to the parent so the parent decides how each item looks, received with `<template #default="{ line }">`.
Server route: A file in Nuxt's `server/api/` that answers requests such as `/api/products` from the same project.
Server-side rendering (SSR): Running components on a server for each request and sending finished HTML, so the first view appears fast and search engines can read it.
Single-file component (SFC): A `.vue` file that holds one component's script, template and style together.
Single-page application (SPA): An app that loads one HTML page and then swaps views in the browser as the address changes, with no page reloads.
SKU (Stock Keeping Unit): A product code, such as `MUG-BL`, that identifies one item. It works well as the `:key` in a `v-for` list and as the route parameter for a product page.
Slot: A spot in a child's template that the parent fills with its own content. `<slot />` marks it, and anything inside is fallback content.
Spread (...): JavaScript syntax that copies an object's properties into a new object, as in `{ ...form, items }` which copies name, email and state into the order.
State: The data an app or store keeps, such as the cart lines. In a Pinia setup store, state is made with `ref`.
Store: A shared object outside any component that holds state, getters and actions, so any component can use the same data, like the cart.
storeToRefs: A Pinia function that turns a store's state and getters into refs that stay connected, so you can destructure them without losing reactivity.
Suspense: A Vue feature that lets components `await` during setup and shows a fallback while they wait. A top-level `await` in `<script setup>` without a `<Suspense>` boundary triggers a warning, so data is usually fetched in `onMounted` or a composable instead.

T

Template: The HTML-like part of a component, between `<template>` tags, describing what it shows.
toRefs: A function that turns each property of a reactive object into a linked ref, so you can destructure without losing reactivity.
toValue: A Vue function that gives the value of a string, a ref or a getter: it returns a string as is, reads a ref's `.value`, or calls a getter. Composables use it to accept any of the three.
try/catch: JavaScript syntax that runs the code in `try` and, if it throws an error, runs the `catch` block to handle it. It lets a failed fetch show an error message instead of breaking the page.
Two-way binding: Keeping a form field and its data in step both ways: data fills the field, and typing updates the data. Vue does it with `v-model`.
TypeScript: A version of JavaScript that adds types, so many mistakes are caught before the code runs. It compiles to plain JavaScript and can be used with Vue projects.

U

useFetch: Nuxt's data-fetching function. It fetches during server rendering and passes the result to the browser with the HTML, so the browser doesn't fetch again.
useRoute: A Vue Router function that returns the current route, so you can read `params` such as `sku`, or the `path`.
useRouter: A Vue Router function that returns the router itself, used to move between pages from code with `router.push("/cart")`.

V

v-bind: A directive that sets an HTML attribute or component prop from a JavaScript expression. It's usually written with the colon shorthand, like `:alt="p.name"`.
v-for: A directive that repeats an element once per item in a list, like `p in products`, and should always be paired with a unique `:key`.
v-html: A directive that inserts HTML instead of plain text. Never use it with text your users typed, because it opens the page to XSS.
v-if: A directive that renders an element only when its expression is true. `v-else-if` and `v-else` must follow it directly.
v-model: A directive that ties a form field to a ref in both directions. `.trim` strips surrounding spaces and `.number` converts the text to a number.
v-on: A directive, written with the `@` shorthand, that runs code when a DOM event happens, such as `@click`. In inline handlers, `$event` is the browser's event object.
v-show: A directive that always renders an element and hides it with `display: none`. It suits things that toggle often, like a dropdown.
Vapor Mode: A faster rendering mode for Vue that skips the virtual DOM, planned for Vue 3.6. It was still in testing as of October 2026.
Vite: The build tool and dev server behind a Vue project created by create-vue. Its settings live in `vite.config.js`, and it provides hot reloading and builds.
Vue: A JavaScript framework for building reactive user interfaces from components and templates.
Vue DevTools: A browser panel or extension for inspecting your components, their data, events and, with Pinia, store state.
Vue Router: Vue's official routing library, which gives an app pages with their own addresses and swaps components without a reload.

W

watch: A function that runs a callback whenever a ref or getter changes, receiving the new and old value. Use it for actions like saving or fetching; use `computed` to derive values.
watchEffect: A shorter watcher that runs its function at once, tracks every ref it reads, and runs again whenever any of them changes. It keeps the tab title up to date.

X

XSS (cross-site scripting): An attack where harmful code typed by a user ends up running in other visitors' browsers. Vue's `{{ }}` always inserts plain text, so templates are safe by default.