Javascript is required
Mokkapps 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
v-model
Slots
Devtools
Debugging
Performance
Nuxt
Pinia
Store
Composables
Testing
Vuex
Featured Tip
Vue Tip: Destructure Props in Composition API Without Losing Reactivity
Jan 26, 2023
Vue Tip: Destructure Props in Composition API Without Losing Reactivity Image
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