Javascript is required
Mokkapps Logo

Vue Tips

Over the last few years, I've collected a list of valuable tips while developing and writing about Vue. 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 tips using Google or the minimal list.
Router
Animations
Script
Template
Style
v-model
Slots
Devtools
Debugging
Performance
Composables
Testing
Vuex
Featured Tip
Force-Enable Vue Devtools in Production Build
Nov 29, 2022
Force-Enable Vue Devtools in Production Build Image
Use Provide & Inject to Avoid Prop Drilling Image
Nov 22, 2022
Use Provide & Inject to Avoid Prop Drilling
Change the Interpolation Delimiter Image
Nov 17, 2022
Change the Interpolation Delimiter
Use Vue Without Build Step Image
Nov 8, 2022
Use Vue Without Build Step
Defining and Registering Vue Web Components Image
Nov 4, 2022
Defining and Registering Vue Web Components
Share Composable State Across Components Image
Oct 28, 2022
Share Composable State Across Components
Expose Properties in a Script Setup Component Image
Oct 8, 2022
Expose Properties in a Script Setup Component
Expose Slots From a Child Component  Image
Oct 1, 2022
Expose Slots From a Child Component
Lifecycle Hooks for Debugging Image
Sep 26, 2022
Lifecycle Hooks for Debugging
Typing Template Refs With TypeScript Image
Sep 3, 2022
Typing Template Refs With TypeScript
Avoid Side Effects in Computed Properties Image
Aug 25, 2022
Avoid Side Effects in Computed Properties
Test Vue Components Using Vue Testing Library Image
Aug 19, 2022
Test Vue Components Using Vue Testing Library
Creating a Custom Directive Image
Aug 13, 2022
Creating a Custom Directive
Avoid Directly DOM Manipulation Image
Aug 10, 2022
Avoid Directly DOM Manipulation
Use Vue App Instance as Global Store Image
Jul 25, 2022
Use Vue App Instance as Global Store
When to Use v-if Image
Jul 20, 2022
When to Use v-if
Avoid Empty Wrapper for Conditions Image
Jul 14, 2022
Avoid Empty Wrapper for Conditions
Delay Loading Appearance of Spinner Image
Jul 12, 2022
Delay Loading Appearance of Spinner
Check if Slot Is Empty Image
Jul 6, 2022
Check if Slot Is Empty
Memoize a Sub-Tree of the Template Using v-memo Image
Jun 29, 2022
Memoize a Sub-Tree of the Template Using v-memo
watch() vs. watchEffect() Image
Jun 22, 2022
watch() vs. watchEffect()
Use Fallthrough Attributes Image
Jun 15, 2022
Use Fallthrough Attributes
Provide Fallback Content for Slots Image
Jun 8, 2022
Provide Fallback Content for Slots
Debug Computed Properties Image
Jun 1, 2022
Debug Computed Properties
Use Lazy v-model to Sync State After Change Events Image
May 22, 2022
Use Lazy v-model to Sync State After Change Events
Create Custom v-model Modifier Image
May 11, 2022
Create Custom v-model Modifier
Query Inner Elements in Third-Party Components Image
Apr 21, 2022
Query Inner Elements in Third-Party Components
Check Version at Runtime Image
Apr 10, 2022
Check Version at Runtime
Measure Performance Image
Apr 4, 2022
Measure Performance
Animate Child Component Before Route Leave Image
Mar 25, 2022
Animate Child Component Before Route Leave
Use v-bind to Pass Multiple Props to Components Image
Mar 18, 2022
Use v-bind to Pass Multiple Props to Components
Watch Nested Values Image
Mar 11, 2022
Watch Nested Values
Use Vuex in Vue Router Navigation Guards Image
Mar 4, 2022
Use Vuex in Vue Router Navigation Guards
Special CSS Selectors Image
Feb 25, 2022
Special CSS Selectors
Use Optional Chaining in Templates Image
Feb 19, 2022
Use Optional Chaining in Templates
Use Two Script Blocks  Image
Feb 14, 2022
Use Two Script Blocks
Speed Up Initial Load Using Async Components Image
Feb 4, 2022
Speed Up Initial Load Using Async Components
Scroll to Top When Navigating to a New Route Image
Jan 28, 2022
Scroll to Top When Navigating to a New Route
Display Raw HTML Image
Jan 24, 2022
Display Raw HTML
Automatic Global Registration of Base Components Image
Jan 14, 2022
Automatic Global Registration of Base Components
Use Teleport to Render a Component in a Different Place Image
Jan 9, 2022
Use Teleport to Render a Component in a Different Place
Assign Handler for Uncaught Errors Image
Dec 15, 2021
Assign Handler for Uncaught Errors
Simple Expressions in Templates Image
Dec 10, 2021
Simple Expressions in Templates
Trigger Watcher Immediately Image
Dec 2, 2021
Trigger Watcher Immediately
Use Multiple v-model Bindings Image
Nov 25, 2021
Use Multiple v-model Bindings
Avoid Unwanted Re-Renders of an Element Using v-once Image
Nov 21, 2021
Avoid Unwanted Re-Renders of an Element Using v-once
Destructure in v-for Image
Nov 16, 2021
Destructure in v-for
Avoid Empty Class Attributes Image
Nov 14, 2021
Avoid Empty Class Attributes
Props and Context in Setup Method Image
Nov 13, 2021
Props and Context in Setup Method
Detailed Prop Definitions Image
Nov 12, 2021
Detailed Prop Definitions
Reactive Values in CSS Image
Nov 11, 2021
Reactive Values in CSS
Prefer Slots Over Props Image
Nov 10, 2021
Prefer Slots Over Props