#108
Vue Tip: Watch Slot Changes
You can use the MutationObserver API to react to changes in the slot content.
1 Min.Template
Vue-Tipps · 132 Tipps
Vue- & Nuxt-Tipps
In den letzten Jahren habe ich beim Entwickeln und Schreiben über Vue & Nuxt eine Liste wertvoller Tipps gesammelt. Einige sind clever, einige benutze ich fast jeden Tag, und einige sind fortgeschrittener - aber sie sind alle nützlich.
#107
Nuxt Tip: Handle Client-Side Errors
Nuxt provides the NuxtErrorBoundary component to handle client-side errors.
1 Min.Nuxt
#106
Vue Tip: Best Way to Force Re-Render Vue Component
In certain scenarios, Vue's reactivity approach isn’t sufficient, and we need to force re-rendering of specific components.
1 Min.Script
#105
Vue Tip: Document Your Component Props Using JSDoc
You can use JSDoc to document your component props so that they show up when you hover over the component in your IDE.
1 Min.Script
#104
Vue Tip: Composable to Define Keyboard Shortcuts
I show you a handy Vue composable that allows you to define keyboard shortcuts in your app.
1 Min.Script
#103
Vue Tip: Use a Head Manager
Unhead is a framework-agnostic document head manager that can be used to manage page metadata like the title in your Vue application.
1 Min.Script
#102
Vue Tip: Automatically Import Components
Use the unplugin-vue-components tool to automatically import your Vue components.
1 Min.Script
#101
Pinia Tip: Simple History With Undo and Redo Functionality
Build a simple history with undo and redo functionality using the useRefHistory composable from VueUse.
1 Min.Pinia
#100
Vue Tip: Accessing Template Ref in Child Component
Learn how to access template refs in a child component within a Vue.js application, enabling you to manipulate and interact with specific elements in the child component's template from the parent component.
1 Min.Template
#99
Nuxt Tip: How to Fix "Nuxt Instance Unavailable" Error
If you are using Nuxt 3, you probably already encountered the 'Nuxt Instance Unavailable' error. What is it, and how to fix it?
1 Min.Nuxt
#98
Vue Tip: Dynamic Slot Names
Dynamic directive arguments also work on v-slot, allowing the definition of dynamic slot names.
1 Min.Template
#97
Nuxt Tip: Detecting Server vs. Client-Side Code Execution
Nuxt 3 provides a way to detect whether your code is running on the server or client-side.
1 Min.Nuxt
#96
Vue Tip: Event Handling
There are different ways how to handle events in Vue. Let's take a look at them.
1 Min.Template
#95
Vue Tip: Use Your Composables Synchronously
You should always call your composables synchronously in setup() hook or <script setup>. Otherwise Vue will not be able to determine the current active component instance and cannot correctly register features like lifecycle hooks, watchers, and computed properties.
2 Min.Script
#94
Nuxt Tip: Custom SPA Loading Template for Your Nuxt Application
When using the client-side rendering mode, Nuxt will display a loading indicator until the application is hydrated. The loading indicator is a simple spinner. You can customize the loading indicator by creating a custom loading component.
1 Min.Nuxt
#93
Vue Tip: Deep Watch on Arrays
In Vue 3, when using the watch option to watch an array, the callback will only trigger when the array is replaced. To trigger the watcher on mutation, the deep option must be specified.
1 Min.Script
#92
Nuxt Tip: An URL Object Working on Both Server-Side and Client-Side
Nuxt provides a helper function called useRequestURL that returns an URL object working on both server side and client side.
1 Min.Nuxt
#91
Vue Tip: Simple State Management With Composition API
Learn how you can use Composition API for a simple state management solution which you can use instead of Pinia.
2 Min.Script
#90
Vue Tip: Manually Stop Watcher
You need to manually stop your Vue watcher if they are created asynchronously. Sync watchers are automatically stopped when the component is unmounted.
1 Min.Script
#89
Vue Tip: Dynamic Return Values in Composables
FIXME
1 Min.Composables
#88
Vue Tip: Use VueUse to Unleash the Power of Utility Functions
VueUse is a collection of hundreds of essential Vue Composition Utilities for interacting with various browsers, sensors, animations, and state APIs, and more.
1 Min.Script
#87
Vue Tip: Emit Event From Composable
Your application may contain a lot of components that are using the same logic, like emitting the same event. In this case, it might be tempting to create a composable that will emit this event and is used in all components. But how do you emit an event from inside a composable?
2 Min.Script
#86
Vue Tip: Split Your SFC into Multiple Files
Use the 'src' attribute to import an external file for a language block in your Vue Single-File Components (SFC).
1 Min.Template
#85
Nuxt Tip: Differentiate Client and Server Components
Nuxt allows you to define client-side and standalone server components
1 Min.Nuxt
Seite 2 von 6