Javascript is required
Michael Hoffmann LogoMichael 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.
Script
Router
Animations
Template
Style
Slots
v-model
Debugging
Devtools
Performance
Nuxt
Pinia
Store
Composables
Testing
Vuex
Featured Tip
Vue Tip: Debug Watcher
May 23, 2023
Vue Tip: Debug Watcher Image
Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3 Image
May 18, 2023
Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3
Vue Tip: Chaining Event Modifiers Image
May 4, 2023
Vue Tip: Chaining Event Modifiers
Vue Tip: Effortless Handle Asynchronous Components With Suspense Image
Apr 28, 2023
Vue Tip: Effortless Handle Asynchronous Components With Suspense
Nuxt Tip: Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps Image
Apr 19, 2023
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
Apr 9, 2023
Vue Tip: Declare and Mutate v-model Props as Normal Variable Using defineModel
Vue Tip: Optimize Performance Using shallowRef Image
Apr 7, 2023
Vue Tip: Optimize Performance Using shallowRef
Nuxt Tip: Render Component Only on Client-Side Image
Apr 5, 2023
Nuxt Tip: Render Component Only on Client-Side
Vue Tip: Validate Events and Prop Types Image
Mar 28, 2023
Vue Tip: Validate Events and Prop Types
Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData Image
Mar 22, 2023
Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData
Vue Tip: When to Use Render Function Image
Mar 15, 2023
Vue Tip: When to Use Render Function
Nuxt Tip: Rendering Modes Image
Mar 6, 2023
Nuxt Tip: Rendering Modes
Vue Tip: Debugging in Templates Image
Feb 16, 2023
Vue Tip: Debugging in Templates
Vue Tip: Use Scoped Slots in a Child Component to Provide Data for Parent Component Image
Feb 15, 2023
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
Feb 14, 2023
Nuxt Tip: Use DevTools to Know Your App Better
Vue Tip: Re-Rendering Vue Routes When Path Parameters Change Image
Feb 6, 2023
Vue Tip: Re-Rendering Vue Routes When Path Parameters Change
Vue Tip: Destructure Props in Composition API Without Losing Reactivity Image
Jan 26, 2023
Vue Tip: Destructure Props in Composition API Without Losing Reactivity
Nuxt Tip: Analyse Production Bundle Image
Jan 23, 2023
Nuxt Tip: Analyse Production Bundle
Pinia Tip: Use Setup Stores for More Flexibility Image
Jan 20, 2023
Pinia Tip: Use Setup Stores for More Flexibility
Nuxt Tip: Adding a Latest Route Image
Jan 11, 2023
Nuxt Tip: Adding a Latest Route
Vue Tip: Typing Component Events Image
Jan 9, 2023
Vue Tip: Typing Component Events
Vue Tip: Dynamically Change Page Title Image
Jan 7, 2023
Vue Tip: Dynamically Change Page Title
Vue Tip: Access DOM in Watcher Callback After Vue Updated It Image
Jan 2, 2023
Vue Tip: Access DOM in Watcher Callback After Vue Updated It
Vue Tip: Pass Custom Arguments to Event Handler Method Image
Dec 26, 2022
Vue Tip: Pass Custom Arguments to Event Handler Method
Vue Tip: Avoid Mutating a Prop Directly  Image
Dec 13, 2022
Vue Tip: Avoid Mutating a Prop Directly
Vue Tip: Disable Attribute Inheritance Image
Dec 10, 2022
Vue Tip: Disable Attribute Inheritance
Vue Tip: Dynamically Add & Remove Route While App Is Running Image
Dec 6, 2022
Vue Tip: Dynamically Add & Remove Route While App Is Running
Vue Tip: Force-Enable Vue Devtools in Production Build Image
Nov 29, 2022
Vue Tip: Force-Enable Vue Devtools in Production Build
Vue Tip: Use Provide & Inject to Avoid Prop Drilling Image
Nov 22, 2022
Vue Tip: Use Provide & Inject to Avoid Prop Drilling
Vue Tip: Change the Interpolation Delimiter Image
Nov 17, 2022
Vue Tip: Change the Interpolation Delimiter
Vue Tip: Use Vue Without Build Step Image
Nov 8, 2022
Vue Tip: Use Vue Without Build Step
Vue Tip: Defining and Registering Vue Web Components Image
Nov 4, 2022
Vue Tip: Defining and Registering Vue Web Components
Vue Tip: Share Composable State Across Components Image
Oct 28, 2022
Vue Tip: Share Composable State Across Components
Vue Tip: Expose Properties in a Script Setup Component Image
Oct 8, 2022
Vue Tip: Expose Properties in a Script Setup Component
Vue Tip: Expose Slots From a Child Component  Image
Oct 1, 2022
Vue Tip: Expose Slots From a Child Component
Vue Tip: Lifecycle Hooks for Debugging Image
Sep 26, 2022
Vue Tip: Lifecycle Hooks for Debugging
Vue Tip: Typing Template Refs With TypeScript Image
Sep 3, 2022
Vue Tip: Typing Template Refs With TypeScript
Vue Tip: Avoid Side Effects in Computed Properties Image
Aug 25, 2022
Vue Tip: Avoid Side Effects in Computed Properties
Vue Tip: Test Vue Components Using Vue Testing Library Image
Aug 19, 2022
Vue Tip: Test Vue Components Using Vue Testing Library
Vue Tip: Creating a Custom Directive Image
Aug 13, 2022
Vue Tip: Creating a Custom Directive
Vue Tip: Avoid Directly DOM Manipulation Image
Aug 10, 2022
Vue Tip: Avoid Directly DOM Manipulation
Vue Tip: Use Vue App Instance as Global Store Image
Jul 25, 2022
Vue Tip: Use Vue App Instance as Global Store
Vue Tip: When to Use v-if Image
Jul 20, 2022
Vue Tip: When to Use v-if
Vue Tip: Avoid Empty Wrapper for Conditions Image
Jul 14, 2022
Vue Tip: Avoid Empty Wrapper for Conditions
Vue Tip: Delay Loading Appearance of Spinner Image
Jul 12, 2022
Vue Tip: Delay Loading Appearance of Spinner
Vue Tip: Check if Slot Is Empty Image
Jul 6, 2022
Vue Tip: Check if Slot Is Empty
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo Image
Jun 29, 2022
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo
Vue Tip: watch() vs. watchEffect() Image
Jun 22, 2022
Vue Tip: watch() vs. watchEffect()
Vue Tip: Use Fallthrough Attributes Image
Jun 15, 2022
Vue Tip: Use Fallthrough Attributes
Vue Tip: Provide Fallback Content for Slots Image
Jun 8, 2022
Vue Tip: Provide Fallback Content for Slots
Vue Tip: Debug Computed Properties Image
Jun 1, 2022
Vue Tip: Debug Computed Properties
Vue Tip: Use Lazy v-model to Sync State After Change Events Image
May 22, 2022
Vue Tip: Use Lazy v-model to Sync State After Change Events
Vue Tip: Create Custom v-model Modifier Image
May 11, 2022
Vue Tip: Create Custom v-model Modifier
Vue Tip: Query Inner Elements in Third-Party Components Image
Apr 21, 2022
Vue Tip: Query Inner Elements in Third-Party Components
Vue Tip: Check Version at Runtime Image
Apr 10, 2022
Vue Tip: Check Version at Runtime
Vue Tip: Measure Performance Image
Apr 4, 2022
Vue Tip: Measure Performance
Vue Tip: Animate Child Component Before Route Leave Image
Mar 25, 2022
Vue Tip: Animate Child Component Before Route Leave
Vue Tip: Use v-bind to Pass Multiple Props to Components Image
Mar 18, 2022
Vue Tip: Use v-bind to Pass Multiple Props to Components
Vue Tip: Watch Nested Values Image
Mar 11, 2022
Vue Tip: Watch Nested Values
Vue Tip: Use Vuex in Vue Router Navigation Guards Image
Mar 4, 2022
Vue Tip: Use Vuex in Vue Router Navigation Guards
Vue Tip: Special CSS Selectors Image
Feb 25, 2022
Vue Tip: Special CSS Selectors
Vue Tip: Use Optional Chaining in Templates Image
Feb 19, 2022
Vue Tip: Use Optional Chaining in Templates
Vue Tip: Use Two Script Blocks  Image
Feb 14, 2022
Vue Tip: Use Two Script Blocks
Vue Tip: Speed Up Initial Load Using Async Components Image
Feb 4, 2022
Vue Tip: Speed Up Initial Load Using Async Components
Vue Tip: Scroll to Top When Navigating to a New Route Image
Jan 28, 2022
Vue Tip: Scroll to Top When Navigating to a New Route
Vue Tip: Display Raw HTML Image
Jan 24, 2022
Vue Tip: Display Raw HTML
Vue Tip: Automatic Global Registration of Base Components Image
Jan 14, 2022
Vue Tip: Automatic Global Registration of Base Components
Vue Tip: Use Teleport to Render a Component in a Different Place Image
Jan 9, 2022
Vue Tip: Use Teleport to Render a Component in a Different Place
Vue Tip: Assign Handler for Uncaught Errors Image
Dec 15, 2021
Vue Tip: Assign Handler for Uncaught Errors
Vue Tip: Simple Expressions in Templates Image
Dec 10, 2021
Vue Tip: Simple Expressions in Templates
Vue Tip: Trigger Watcher Immediately Image
Dec 2, 2021
Vue Tip: Trigger Watcher Immediately
Vue Tip: Use Multiple v-model Bindings Image
Nov 25, 2021
Vue Tip: Use Multiple v-model Bindings
Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once Image
Nov 21, 2021
Vue Tip: Avoid Unwanted Re-Renders of an Element Using v-once
Vue Tip: Destructure in v-for Image
Nov 16, 2021
Vue Tip: Destructure in v-for
Vue Tip: Avoid Empty Class Attributes Image
Nov 14, 2021
Vue Tip: Avoid Empty Class Attributes
Vue Tip: Props and Context in Setup Method Image
Nov 13, 2021
Vue Tip: Props and Context in Setup Method
Vue Tip: Detailed Prop Definitions Image
Nov 12, 2021
Vue Tip: Detailed Prop Definitions
Vue Tip: Reactive Values in CSS Image
Nov 11, 2021
Vue Tip: Reactive Values in CSS
Vue Tip: Prefer Slots Over Props Image
Nov 10, 2021
Vue Tip: Prefer Slots Over Props