VUE
115 bites tagged VUE — interview questions with model answers, and 60-second explainers.
Nuxt Server Data Fetching: useAsyncData & useFetch
Avoid client-side request waterfalls by fetching data on the server and embedding it in the page. Nuxt's `useAsyncData` and `useFetch` handle this SSR hydration for you. The main footgun: not providing a stable key, leading to re-fetches.
Universal Rendering: Server-First, Client-Interactive
Universal Rendering sends a pre-built HTML page from the server for a fast load, then adds interactivity on the client. It's the default in frameworks like Nuxt for better SEO, but the footgun is writing code that crashes on the server by assuming a browser.
Framework Reactivity: Coarse vs. Fine-Grained Updates
Frameworks sync UI and state differently. Coarse-grained systems like React re-run component code, while fine-grained systems like Vue (Proxies) or Angular (Signals) track dependencies to update only what's needed.
Vue's <script setup>: Less Boilerplate, More Performance
Vue's <script setup> is compile-time sugar that automatically exposes variables and functions to your template, cutting boilerplate. It yields more succinct, performant components with better type-safety.
Vue Single-File Components (SFCs)
Vue's Single-File Components (SFCs) bundle a component's template, logic, and styles into one `.vue` file. A build tool compiles this into browser-readable JS and CSS, turning your template into optimized render functions.
Vue's Virtual DOM: Efficient UI Updates
Vue keeps a JavaScript copy of the UI (the Virtual DOM) in memory. When data changes, it compares a new virtual tree to the old one and efficiently updates only the changed parts of the real DOM, avoiding costly full re-renders.
Cypress Component Testing: Test in a Real Browser
Cypress component testing mounts your UI components in a real browser, not a simulated DOM, so you test them exactly as users see them. Use it for faster feedback on individual React, Vue, or Angular components.
Unit Testing Vue Components with Vitest
Think of it as a two-part system: Vue Test Utils mounts your component in a virtual environment, and a runner like Vitest executes the test and reports pass/fail. Use this to verify a component's logic in isolation.
Vue Async Components: Defer Loading Until Needed
Vue async components defer loading a component's code until it's rendered, speeding up initial app loads. Use them for heavy components not needed right away, like modals or admin panels. The footgun is a blank UI if you don't handle loading/error states.
Vue's v-once: Render Once, Then Ignore
Use `v-once` to render a part of your template exactly once. After the initial render, Vue treats it as static content, ignoring future data updates for that element and its children. This is a performance optimization for content that never needs to change.
Vue Plugins: Add App-Wide Functionality
A Vue plugin packages reusable logic to add features across your entire app, like a global toolbox. Use them for routing, state management, or making custom functions globally available.
Vue Render Functions: Trading Templates for JS Power
Render functions trade Vue's declarative templates for the full programmatic power of JavaScript. Use them for highly dynamic components where logic is too complex for templates. The footgun is losing template optimizations and readability for imperative code.
Vue Composables: Reusable Stateful Logic
A Vue composable is a function for bundling reusable stateful logic, like tracking mouse position. Use it to share complex logic like API fetches across components. The footgun: each component gets a fresh, independent state, not a shared one.
Vue Custom Directives: For Low-Level DOM Access
Vue custom directives are for low-level DOM access. Use them for tasks like auto-focusing a dynamically inserted input. The footgun is using them for stateful logic or UI structure, where a composable or component is the right tool.
Vue Router: Controlling Scroll Behavior
In a SPA, the browser doesn't manage scroll position; `scrollBehavior` is your manual override. Use it to scroll to top on new pages or restore position on back/forward. The footgun is forgetting `savedPosition`, breaking native back-button behavior.
Router History vs. Hash Mode: URL Style and Server Setup
Router history mode determines your SPA's URL style. History mode uses clean URLs (`/users`) but needs server setup, while hash mode uses a hash symbol (`/#/users`) and works out-of-the-box.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a `<transition>` component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
Navigation Guards: Vue's Route Bouncers
Think of navigation guards as bouncers for your app's routes. They intercept route changes to check permissions or fetch data before rendering a page. The old `next()` callback is a trap; accidentally calling it twice can break navigation.
Nested Routes: Mapping URLs to Component Trees
Nested routes map URL segments to components inside other components, like a sub-page within a main layout. This is common for user dashboards with sections like 'profile' and 'settings'. The footgun is forgetting the child router outlet.
Vue Dynamic Routes: Using Parameters
Dynamic routes use one component for many URLs, like a `User` page for `/users/johnny` and `/users/jolyne`. Define a path with a param like `/users/:id` and access its value via `$route.params.id`.
Programmatic Navigation: Changing Routes with Code
Instead of a user clicking a link, you trigger navigation from your JavaScript. This is useful for redirecting after an action, like a successful login. The main footgun: `params` are ignored if you also provide a `path`—use a named route instead.
Vuex: A Central Store for Your App's State
Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.
VeeValidate: Vue Forms Without the Boilerplate
VeeValidate manages the entire lifecycle of a Vue form—tracking values, validation, and submissions—so you don't write the state boilerplate. Use it for simple contact forms or complex wizards, especially with async validation. The footgun is mixing its APIs.
Component v-model: Two-Way Binding with defineModel
v-model on a component creates a two-way binding, letting a parent and child share and update data. The `defineModel()` macro is the modern way to enable this for custom form inputs. The footgun is that a `default` value can de-sync parent/child state.
Get VUE bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.