#60
Nuxt Tip: Adding a Latest Route
Utilizing Nuxt Middleware, you can implement an easy way for visitors to always read the latest blog posts (or any other content) without needing to know its name or specific URL.
1 minNuxt
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.
#59
Vue Tip: Typing Component Events
To declare emits with full type inference support, we can use the defineEmits API, which is automatically available inside <script setup>.
1 minScript
#58
Vue Tip: Dynamically Change Page Title
I will show you a few ways how you can easily change the page title when navigating your application
2 minRouter
#57
Vue Tip: Access DOM in Watcher Callback After Vue Updated It
To access the DOM after Vue has updated it in a watcher callback, you can use the flush post option.'
1 minScript
#56
Vue Tip: Pass Custom Arguments to Event Handler Method
Sometimes we need to pass custom arguments to the event handler method and access the original DOM event.
1 minScript
#55
Vue Tip: Avoid Mutating a Prop Directly
Mutating props is an anti-pattern. You should use computed properties instead.
4 minTemplate
#54
Vue Tip: Disable Attribute Inheritance
By default, parent scope attribute bindings that are not recognized as props will "fallthrough". This may not always be the desired behavior and, therefore, can be disabled. A typical use case is a component with multiple root nodes.
1 minTemplate
#53
Vue Tip: Dynamically Add & Remove Route While App Is Running
Adding routes to your router is usually done via the `routes` option, but in some situations, you might want to add or remove routes while the application is already running.
1 minRouter
#52
Vue Tip: Force-Enable Vue Devtools in Production Build
Usually, the Vue Devtool extension is disabled in production builds, but there is a way to force-enable it.
1 minDevtools
#51
Vue Tip: Use Provide & Inject to Avoid Prop Drilling
Props are the standard way to pass data from the parent to a child component. Sometimes, we want to share data from a parent component to all its children components without using a store. Provide / Inject solves this problem and avoids prop drilling.
2 minScript
#50
Vue Tip: Change the Interpolation Delimiter
It is possible to adjust the delimiters used for text interpolation within the template to avoid conflicting with server-side frameworks that also use mustache syntax.
1 minTemplate
#49
Vue Tip: Use Vue Without Build Step
When using Vue from a CDN, no "build step" is involved. This makes the setup much more straightforward and is suitable for enhancing static HTML or integrating with a backend framework.
1 minTemplate
#48
Vue Tip: Defining and Registering Vue Web Components
Web Components is an umbrella term for a set of web native APIs that allows developers to create reusable custom elements. Vue has excellent support for both consuming and creating custom elements.
1 minTemplate
#47
Vue Tip: Share Composable State Across Components
It is possible to sync composable state across components by lifting its definition outside the exported function.
1 minComposables
#46
Vue Tip: Expose Properties in a Script Setup Component
Components using script setup are closed by default and will not expose any of the bindings declared inside script setup.
1 minTemplate
#45
Vue Tip: Expose Slots From a Child Component
Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost.
1 minTemplate
#44
Vue Tip: Lifecycle Hooks for Debugging
Vue provides two lifecycle hooks that we can use for debugging purposes.
1 minScript
#43
Vue Tip: Typing Template Refs With TypeScript
Template refs only exist after the component is mounted. Thus, it’s necessary to type template refs with a union type that includes the DOM element type as well as null.
1 minTemplate
#42
Vue Tip: Avoid Side Effects in Computed Properties
It is considered bad practice to introduce side effects inside computed properties and functions because it makes the code unpredictable and hard to understand.
1 minScript
#41
Vue Tip: Test Vue Components Using Vue Testing Library
Vue Testing Library is my preferred Vue.js testing library that encourages good testing practices.
2 minTesting
#40
Vue Tip: Creating a Custom Directive
In addition to the default set of directives like v-model or v-show, you can also register your own custom directives.
2 minTemplate
#39
Vue Tip: Avoid Directly DOM Manipulation
It is a no-go to manipulate the DOM in Vue.js directly. Instead, you should use the "ref" attribute.
1 minTemplate
#38
Vue Tip: Use Vue App Instance as Global Store
Vue provides an object that can be used to register global properties that can be accessed on any component instance inside the application.
1 minTemplate
#37
Vue Tip: When to Use v-if
v-if has higher toggle costs while v-show has higher initial render costs.
1 minTemplate
Page 4 of 6