#84
Vue Tip: Use Eager Computed Without Lazy Evaluation
Computed properties are evaluated lazily which means they are only evaluated when they are accessed. The computedEager() from VueUse is a good alternative for simple operations.
1 minScript
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.
#83
Nuxt Tip: Lazy Load Components in Nuxt 3
Learn how you can dynamically import components in Nuxt 3 only when they’re needed.
1 minNuxt
#82
Vue Tip: Don't Use v-if With v-for
It can be tempting to combine v-if with v-for but you should avoid it as it will throw an error.
2 minTemplate
#81
Vue Tip: Detect Mouse Hover
You can use Vue event handlers to detect mouse hover events.
1 minTemplate
#80
Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools
Nuxt DevTools is designed to be extensible. You can add your own modules' integration to the DevTools.
1 minNuxt
#79
Vue Tip: Debug Watcher
You can debug watchers by passing a third options object with onTrack and onTrigger callbacks.
1 minScript
#78
Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3
Use the path property in the page's definePageMeta to move the homepage to a sub-folder in Nuxt 3.
1 minNuxt
#77
Vue Tip: Chaining Event Modifiers
By chaining multiple event modifiers together, you can create sophisticated event handling scenarios with ease.
1 minTemplate
#76
Vue Tip: Effortless Handle Asynchronous Components With Suspense
Suspense components are used to display fallback content when waiting for some sort of asynchronous component to resolve.
2 minTemplate
#75
Nuxt Tip: Use Nuxt Layers to Share Components, Utils, and Configuration Between Your Apps
One of the core features of Nuxt 3 is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration.
2 minNuxt
#74
Vue Tip: Declare and Mutate v-model Props as Normal Variable Using defineModel
Declaring and mutate v-model props as the same as normal variable using the defineModel.
2 minScript
#73
Vue Tip: Optimize Performance Using shallowRef
shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.
1 minScript
#72
Nuxt Tip: Render Component Only on Client-Side
By default, Nuxt uses universal (client-side + server-side) rendering to render your application. The ClientOnly component can be used torender its slot only in client-side.
1 minNuxt
#71
Vue Tip: Validate Events and Prop Types
You can validate prop types and events in Vue. If a requirement is not met, Vue will warn you in the browser's JavaScript console.
1 minScript
#70
Nuxt Tip: Refresh Data by Watching Sources Using useAsyncData
Nuxt 3's useAsyncData() composable can be used within your pages, components, and plugins to get access to data that resolves asynchronously. It can also be used to refresh the data loaded from the API based on the user's action. (pagination, filtering results, searching, etc.)
1 minNuxt
#69
Vue Tip: When to Use Render Function
When should I use a render function in Vue.js? We’re going to cover some advanced Vue.js patterns when you need to use render functions.
1 minTemplate
#68
Nuxt Tip: Rendering Modes
Nuxt 3 provides plenty of options for rendering. There are SSG, SSR, Universal, SPA, ISG, or mix it up per route with hybrid rendering.
2 minNuxt
#67
Vue Tip: Debugging in Templates
Guide to debug Vue component templates using the Browser DevTools.
1 minTemplate
#66
Vue Tip: Use Scoped Slots in a Child Component to Provide Data for Parent Component
A Scoped Slot in a child component can provide data for presentation in the parent component using a slot.
1 minSlots
#65
Nuxt Tip: Use DevTools to Know Your App Better
Nuxt DevTools is a set of visual tools that help you to know your app better.
1 minNuxt
#64
Vue Tip: Re-Rendering Vue Routes When Path Parameters Change
In SPA that uses the Vue Router, it’s common to create a path parameter that changes the behavior of a route.
2 minRouter
#63
Vue Tip: Destructure Props in Composition API Without Losing Reactivity
How to correctly destructure props object in a Vue component while maintaining the reactivity.
1 minScript
#62
Nuxt Tip: Analyse Production Bundle
Nuxi analyze is an experimental feature that builds your Nuxt app and analyses the production bundle.
1 minNuxt
#61
Pinia Tip: Use Setup Stores for More Flexibility
Besides Option Stores you can also use Setup Stores to define stores in Pinia. They bring more flexibility as you can create watchers within a store and freely use any composable.
1 minPinia
Page 3 of 6