#36
Vue Tip: Avoid Empty Wrapper for Conditions
There are many situations when you need to conditionally display multiple Vue components. To avoid "empty" wrappers you should use not use HTML tags.
1 minTemplate
Vue tips · 132 tips
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.
#35
Vue Tip: Delay Loading Appearance of Spinner
Eager delay spinners are not a good user experience. They can make a snappy user interface feel slower. We want delay spinners to appear only after a perceivable delay.
1 minTemplate
#34
Vue Tip: Check if Slot Is Empty
You can check if a slot is empty, for example, only to render it if it has content.
2 minTemplate
#33
Vue Tip: Memoize a Sub-Tree of the Template Using v-memo
The v-memo directive is like a computed prop for the template.
1 minTemplate
#32
Vue Tip: watch() vs. watchEffect()
Understand the difference between the watch() and watchEffect() Vue hooks.
1 minScript
#31
Vue Tip: Use Fallthrough Attributes
A 'fallthrough attribute' is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.
2 minTemplate
#30
Vue Tip: Provide Fallback Content for Slots
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided.
1 minTemplate
#29
Vue Tip: Debug Computed Properties
We can debug properties by passing computed() a second options object.
1 minScript
#28
Vue Tip: Use Lazy v-model to Sync State After Change Events
By default, v-model syncs with the state of the Vue instance on every input event. The .lazy modifier syncs after change events.
1 minv-model
#27
Vue Tip: Create Custom v-model Modifier
v-model has some built-in modifiers, but in some cases, you might need to add your custom modifier.
1 minv-model
#26
Vue Tip: Query Inner Elements in Third-Party Components
In some cases, we have to deal with third-party Vue components where we cannot put a ref on inner HTML elements to access them in our Vue code.
1 minScript
#25
Vue Tip: Check Version at Runtime
You can easily check the Vue version at runtime.
1 minScript
#24
Vue Tip: Measure Performance
Learn some tools to measure the performance of your Vue application.
1 minPerformance
#23
Vue Tip: Animate Child Component Before Route Leave
Vue Router provides a way to use transitions on route components and animate the navigations. But sometimes, you might want to animate a specific (sub-)component before a route is left.
1 minRouter
#22
Vue Tip: Use v-bind to Pass Multiple Props to Components
Instead of passing each property individually to a component, you can bind an object to it.
1 minScript
#21
Vue Tip: Watch Nested Values
The watch options support a dot-delimited path as key to watch nested values.
1 minScript
#20
Vue Tip: Use Vuex in Vue Router Navigation Guards
It's possible to use Vuex state to determine if a user is allowed to visit certain Vue Router routes.
1 minVuex
#19
Vue Tip: Special CSS Selectors
Vue provides some special CSS pseudo-selectors you can use in your Vue SFC.
1 minStyle
#18
Vue Tip: Use Optional Chaining in Templates
It's possible to use optional chaining in Vue templates.
1 minTemplate
#17
Vue Tip: Use Two Script Blocks
<script setup> can be used alongside normal <script>. A normal <script> may be needed in special cases.
1 minScript
#16
Vue Tip: Speed Up Initial Load Using Async Components
Using async components is a great way to speed up the initial load time of your app.
1 minPerformance
#15
Vue Tip: Scroll to Top When Navigating to a New Route
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does.
1 minRouter
#14
Vue Tip: Display Raw HTML
The double mustaches interpret the data as plain text, not HTML. To output real HTML, you will need to use the v-html directive.
1 minTemplate
#13
Vue Tip: Automatic Global Registration of Base Components
We can use webpack to register our Vue.js base components globally.
1 minScript
Page 5 of 6