Vue Tutorials

28 tutorials

Vue 3 from the ground up — single-file components, the Composition API and reactivity, props and events, composables, Pinia, Vue Router, forms and shipping to production, every example lifted from a real short-video CMS.

Vue – Interview Questions
The questions Vue interviews actually ask, answered the way you would say them out loud. `ref` versus `reactive`, computed versus watch, how the reactivity system tracks a dependency, what `<script setup>` compiles to, why `:key` matters, props down and events up, Pinia versus provide/inject, and the Composition-versus-Options question that is really asking whether you have shipped Vue or only read about it.
Vue – Building and Deploying to Production
The last mile. What `vite build` produces and how to read the output, environment variables with `import.meta.env` and the `VITE_` prefix that decides what gets baked into a public bundle, the history-mode rewrite rule every static host needs or your routes 404 on refresh, cache headers for hashed assets, and a GitHub Actions workflow that ships it.
Vue – Testing with Vitest and Vue Test Utils
Tests you will keep running. Vitest and why a Vite project gets it almost for free, mounting a component with Vue Test Utils, asserting on rendered output rather than internals, testing props and emitted events, `flushPromises` for anything async, testing a Pinia store on its own, and where an end-to-end Playwright test earns its much higher cost.
Vue – Performance
Making it fast, and knowing whether it was slow. Where re-renders actually come from, `v-once` and `v-memo`, `shallowRef` for a large object you replace rather than edit, why an IntersectionObserver beats a scroll listener, cursor pagination instead of offset, keeping heavy work out of computeds, and reading a flame chart in Vue DevTools before changing anything.
Vue – Async Components, Suspense and KeepAlive
Not shipping everything on the first load. `defineAsyncComponent` with loading and error components, route-level code splitting and what Vite actually emits, `<Suspense>` and its still-experimental status, and `<KeepAlive>` for the tab or list that should not throw away its state and refetch every time you navigate back to it.
Vue – Transitions and Teleport
Two small features that solve disproportionately annoying problems. `<Transition>` and the six CSS classes it toggles, `<TransitionGroup>` for a list that gains and loses items — the toast stack — and `<Teleport>`, which renders a modal at the end of `<body>` so it stops being clipped by whatever `overflow` and `z-index` its parent happened to set.
Vue – Fetching Data from an API
Talking to a backend without scattering `fetch` through thirty components. One module that owns the transport, loading and error state that the UI can actually render, a typed error that separates "the API is down" from "your password is wrong", attaching a JWT and handling a 401 in exactly one place, and the mock implementation that lets the UI be built before the API exists.
Vue – Forms and Validation
A real form, end to end. Binding every input type, a submit handler that cannot double-fire, disabling the button while a request is in flight, client-side checks and why they are a convenience rather than a guarantee, and — the part tutorials skip — rendering the field errors the server sends back next to the fields they belong to.
Vue – Route Guards and Navigation
Deciding who gets in. `beforeEach` and returning a redirect, `meta` fields that mark a route as needing auth or an admin role, sending someone to the login page and bouncing them back to where they were going, `afterEach` for the document title, per-route and in-component guards, and `scrollBehavior` — including when to switch it off.
Vue – Routing with Vue Router
Turning one page into an application. `createRouter` and history mode, `<RouterLink>` and `<RouterView>`, route params and `useRoute`, nested routes and the layout trick the demo app uses to serve a public site and an admin console from one build, named routes, the catch-all 404, and lazy route components that keep the first load small.
Vue – The Options API (and Why This Track Uses the Composition API)
You will meet the Options API in every Vue 2 codebase and plenty of Vue 3 ones, so you need to read it. `data`, `methods`, `computed`, `watch` and the lifecycle options, what `this` binds to and why arrow functions break it, the same component written both ways side by side, and a straight answer on which to use for new work — after which this track does not use it again.
Vue – State Management with Pinia
App-wide state, the official way. Setup stores versus option stores and why this track uses setup stores, state as refs, getters as computeds and actions as plain functions, `storeToRefs` and the destructuring bug it exists to prevent, using a store outside a component, and how the demo app's auth store survives a refresh without trusting anything it cached.
Vue – provide and inject
Getting a value to a deep descendant without threading it through every component in between. `provide` and `inject`, injection keys and why a Symbol beats a string, default values, keeping provided state readonly so a child cannot silently rewrite it, and the honest comparison with Pinia — which one a piece of shared state actually belongs in.
Vue – Composables: Reusing Logic
The pattern that replaced mixins and the single most useful thing the Composition API bought. What makes a function a composable, the `useX` naming convention, returning refs so the caller keeps reactivity, accepting refs or getters as arguments, cleaning up inside one, and where custom directives fit as the other half of Vue's reusability story.
Vue – Lifecycle Hooks and Template Refs
When your code runs. `onMounted`, `onBeforeUnmount` and the ones in between, why every listener, timer and observer you create needs an unmount that undoes it, template refs for reaching a real DOM node — the `<video>` element the player controls — refs inside a `v-for`, and `nextTick` for the moment after the DOM has caught up with your data.
Vue – Slots
Letting a caller pass markup in, not just data. The default slot and fallback content, named slots and the `#name` shorthand, scoped slots that hand data back out to the caller, and how to tell when a problem wants a slot rather than another prop — the question is whether the parent is deciding *what it looks like* or *what it says*.
Vue – v-model and Two-Way Binding
What `v-model` desugars to on an input, its `.lazy`, `.number` and `.trim` modifiers, and then the part that matters: `v-model` on your own component. The `modelValue` prop and `update:modelValue` event the demo app's tag editor implements by hand, named models for multiple bindings, and `defineModel` — the 3.4+ shorthand that collapses all of it into one line.
Vue – Events and Emits
Passing messages back up. `defineEmits` and why declaring events is worth the line, emitting with a payload, event modifiers — `.prevent`, `.stop`, `.once`, `.self` — and key modifiers like the `@keydown.enter.prevent` the tag editor uses, plus why a child emits a request rather than reaching up and changing something itself.
Vue – Props
Passing data down. `defineProps` with an object declaration, types, `required`, `default` and the function form every object and array default needs, why props are one-way and what to do instead of mutating one, prop casing between template and script, and reading a prop in script versus in a template.
Vue – Components
Breaking a page into pieces. Importing and using a component with `<script setup>` and no registration step, naming and casing in templates, where components live in a project that has grown past a dozen of them, and how the demo app splits `ui/`, `public/` and `admin/` so that a component's folder tells you who is allowed to use it.
Vue – Conditional and List Rendering
`v-if` versus `v-show` and which one to reach for, `v-else-if` and `v-else`, `v-for` over arrays and objects, and `:key` — what it is for, why an index is usually the wrong choice, and the class of bug that only appears once you reorder or delete. Also why `v-if` and `v-for` on the same element is a mistake Vue now warns about.
Vue – Watchers: watch and watchEffect
For the side effects a computed must not do. `watch` with a getter source, the `immediate` and `deep` options and what each really costs, `watchEffect` and how it collects dependencies for you, cleaning up so a stale request cannot overwrite a fresh one, and the demo app's rule that the URL — not component state — is the single source of truth a watcher reacts to.
Vue – Computed Properties
Derived state that caches. Why a computed beats a method for anything a template reads more than once, how caching is invalidated, writable computeds with a getter and a setter, and the rule that keeps them predictable — a computed must be pure, so anything that fetches or mutates belongs in a watcher instead.
Vue – Reactivity: ref and reactive
The core of Vue. Why `ref()` needs `.value` in script but not in a template, how `reactive()` differs and the three ways it will surprise you — destructuring, reassignment and primitives — the rule this track follows (`ref` for everything unless you have a reason), and what actually happens when a dependency changes.
Vue – Template Syntax and Directives
Everything you can write in a template. Text interpolation and what expressions are allowed inside `{{ }}`, attribute binding with `v-bind` and its `:` shorthand, `v-on` and `@`, dynamic `:class` and `:style` — object, array and the template literal form the demo app uses for Bootstrap variants — plus `v-html` and the injection risk that comes with it.
Vue – The Single-File Component
A `.vue` file holds a template, a script and a style block, and that co-location is the whole idea. What `<script setup>` compiles to and why it replaced `export default`, why `<style scoped>` does not leak, when a component needs a name, and how the build turns three blocks in one file into a render function.
Vue – Set Up a Project with Vite
One command scaffolds the project: what `npm create vue@latest` generates, what each file is for, how `index.html` is the real entry point under Vite, what `createApp(App).use(pinia).use(router).mount('#app')` is actually doing, the dev server and its proxy, and the handful of npm scripts you will run every day.
Vue – Get Started
Start here. What Vue is and what problem it solves, how it compares to React and Angular and when a team picks it, the exact versions this track is written against — Vue 3.5, Vite 8, Pinia, Vue Router 4 — one command to create a project and see it running, the demo application every example is taken from, and the full lesson index in reading order.