Michael Hoffmann

ende

Michael Hoffmann

Vue & Nuxt Tips

Over the last few years, I've collected a list of valuable tips while developing and writing about Vue & Nuxt. Some are clever, some I use almost every day, and some are more advanced — but they're all useful.You can search for my Vue & Nuxt tips using Google or the minimal list.

More General Web Development Tips

Script

Router

Animations

Template

Style

Slots

v-model

Debugging

Devtools

Performance

Nuxt

Pinia

Store

Composables

Testing

Vuex

Vue Tip: Debug Watcher

Vue Tip: Debug Watcher Image

Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3 Image

Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3

Vue Tip: Chaining Event Modifiers Image

Vue Tip: Chaining Event Modifiers

Vue Tip: Effortless Handle Asynchronous Components With Suspense Image

Vue Tip: Effortless Handle Asynchronous Components With Suspense

Nuxt Tip: Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps Image

Nuxt Tip: Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps

Vue Tip: Declare and Mutate v-model Props as Normal Variable Using defineModel Image

Vue Tip: Declare and Mutate v-model Props as Normal Variable Using defineModel

Vue Tip: Optimize Performance Using shallowRef Image

Vue Tip: Optimize Performance Using shallowRef

Nuxt Tip: Render Component Only on Client-Side Image

Nuxt Tip: Render Component Only on Client-Side

Vue Tip: Validate Events and Prop Types Image

Vue Tip: Validate Events and Prop Types

Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData Image

Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData

Vue Tip: When to Use Render Function Image

Vue Tip: When to Use Render Function

Nuxt Tip: Rendering Modes Image

Nuxt Tip: Rendering Modes

Vue Tip: Debugging in Templates Image

Vue Tip: Debugging in Templates

Vue Tip: Use Scoped Slots in a Child Component to Provide Data for Parent Component Image

Vue Tip: Use Scoped Slots in a Child Component to Provide Data for Parent Component

Nuxt Tip: Use DevTools to Know Your App Better Image

Nuxt Tip: Use DevTools to Know Your App Better

Vue Tip: Re-Rendering Vue Routes When Path Parameters Change Image

Vue Tip: Re-Rendering Vue Routes When Path Parameters Change

Vue Tip: Destructure Props in Composition API Without Losing Reactivity Image

Vue Tip: Destructure Props in Composition API Without Losing Reactivity

Nuxt Tip: Analyse Production Bundle Image

Nuxt Tip: Analyse Production Bundle

Pinia Tip: Use Setup Stores for More Flexibility Image

Pinia Tip: Use Setup Stores for More Flexibility

Nuxt Tip: Adding a Latest Route Image

Nuxt Tip: Adding a Latest Route

Vue Tip: Typing Component Events Image

Vue Tip: Typing Component Events

Vue Tip: Dynamically Change Page Title Image

Vue Tip: Dynamically Change Page Title

Vue Tip: Access DOM in Watcher Callback After Vue Updated It Image

Vue Tip: Access DOM in Watcher Callback After Vue Updated It

Vue Tip: Pass Custom Arguments to Event Handler Method Image

Vue Tip: Pass Custom Arguments to Event Handler Method

Vue Tip: Avoid Mutating a Prop Directly Image

Vue Tip: Avoid Mutating a Prop Directly

Vue Tip: Disable Attribute Inheritance Image

Vue Tip: Disable Attribute Inheritance

Vue Tip: Dynamically Add & Remove Route While App Is Running Image

Vue Tip: Dynamically Add & Remove Route While App Is Running

Vue Tip: Force-Enable Vue Devtools in Production Build Image

Vue Tip: Force-Enable Vue Devtools in Production Build

Vue Tip: Use Provide & Inject to Avoid Prop Drilling Image

Vue Tip: Use Provide & Inject to Avoid Prop Drilling

Vue Tip: Change the Interpolation Delimiter Image

Vue Tip: Change the Interpolation Delimiter

Vue Tip: Use Vue Without Build Step Image

Vue Tip: Use Vue Without Build Step

Vue Tip: Defining and Registering Vue Web Components Image

Vue Tip: Defining and Registering Vue Web Components

Vue Tip: Share Composable State Across Components Image

Vue Tip: Share Composable State Across Components

Vue Tip: Expose Properties in a Script Setup Component Image

Vue Tip: Expose Properties in a Script Setup Component

Vue Tip: Expose Slots From a Child Component Image

Vue Tip: Expose Slots From a Child Component

Vue Tip: Lifecycle Hooks for Debugging Image

Vue Tip: Lifecycle Hooks for Debugging

Vue Tip: Typing Template Refs With TypeScript Image

Vue Tip: Typing Template Refs With TypeScript

Vue Tip: Avoid Side Effects in Computed Properties Image

Vue Tip: Avoid Side Effects in Computed Properties

Vue Tip: Test Vue Components Using Vue Testing Library Image

Vue Tip: Test Vue Components Using Vue Testing Library

Vue Tip: Creating a Custom Directive Image

Vue Tip: Creating a Custom Directive

Vue Tip: Avoid Directly DOM Manipulation Image

Vue Tip: Avoid Directly DOM Manipulation

Vue Tip: Use Vue App Instance as Global Store Image

Vue Tip: Use Vue App Instance as Global Store

Vue Tip: When to Use v-if Image

Vue Tip: When to Use v-if

Vue Tip: Avoid Empty Wrapper for Conditions Image

Vue Tip: Avoid Empty Wrapper for Conditions

Vue Tip: Delay Loading Appearance of Spinner Image

Vue Tip: Delay Loading Appearance of Spinner

Vue Tip: Check if Slot Is Empty Image

Vue Tip: Check if Slot Is Empty

Vue Tip: Memoize a Sub-Tree of the Template Using v-memo Image

Vue Tip: Memoize a Sub-Tree of the Template Using v-memo

Vue Tip: watch() vs. watchEffect() Image

Vue Tip: watch() vs. watchEffect()

Vue Tip: Use Fallthrough Attributes Image

Vue Tip: Use Fallthrough Attributes

Vue Tip: Provide Fallback Content for Slots Image

Vue Tip: Provide Fallback Content for Slots

Vue Tip: Debug Computed Properties Image

Vue Tip: Debug Computed Properties

Vue Tip: Use Lazy v-model to Sync State After Change Events Image

Vue Tip: Use Lazy v-model to Sync State After Change Events

Vue Tip: Create Custom v-model Modifier Image

Vue Tip: Create Custom v-model Modifier

Vue Tip: Query Inner Elements in Third-Party Components Image

Vue Tip: Query Inner Elements in Third-Party Components

Vue Tip: Check Version at Runtime Image

Vue Tip: Check Version at Runtime

Vue Tip: Measure Performance Image

Vue Tip: Measure Performance

Vue Tip: Animate Child Component Before Route Leave Image

Vue Tip: Animate Child Component Before Route Leave

Vue Tip: Use v-bind to Pass Multiple Props to Components Image

Vue Tip: Use v-bind to Pass Multiple Props to Components

Vue Tip: Watch Nested Values Image

Vue Tip: Watch Nested Values

Vue Tip: Use Vuex in Vue Router Navigation Guards Image

Vue Tip: Use Vuex in Vue Router Navigation Guards

Vue Tip: Special CSS Selectors Image

Vue Tip: Special CSS Selectors

Vue Tip: Use Optional Chaining in Templates Image

Vue Tip: Use Optional Chaining in Templates

Vue Tip: Use Two Script Blocks Image

Vue Tip: Use Two Script Blocks

Vue Tip: Speed Up Initial Load Using Async Components Image

Vue Tip: Speed Up Initial Load Using Async Components

Vue Tip: Scroll to Top When Navigating to a New Route Image

Vue Tip: Scroll to Top When Navigating to a New Route

Vue Tip: Display Raw HTML Image

Vue Tip: Display Raw HTML

Vue Tip: Automatic Global Registration of Base Components Image

Vue Tip: Automatic Global Registration of Base Components

Vue Tip: Use Teleport to Render a Component in a Different Place Image

Vue Tip: Use Teleport to Render a Component in a Different Place

Vue Tip: Assign Handler for Uncaught Errors Image

Vue Tip: Assign Handler for Uncaught Errors

Vue Tip: Simple Expressions in Templates Image

Vue Tip: Simple Expressions in Templates

Vue Tip: Trigger Watcher Immediately Image

Vue Tip: Trigger Watcher Immediately

Vue Tip: Use Multiple v-model Bindings Image

Vue Tip: Use Multiple v-model Bindings

Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once Image

Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once

Vue Tip: Destructure in v-for Image

Vue Tip: Destructure in v-for

Vue Tip: Avoid Empty Class Attributes Image

Vue Tip: Avoid Empty Class Attributes

Vue Tip: Props and Context in Setup Method Image

Vue Tip: Props and Context in Setup Method

Vue Tip: Detailed Prop Definitions Image

Vue Tip: Detailed Prop Definitions

Vue Tip: Reactive Values in CSS Image

Vue Tip: Reactive Values in CSS

Vue Tip: Prefer Slots Over Props Image

Vue Tip: Prefer Slots Over Props