Vueuse Components Skilld

Also changed: useTransition custom interpolators · refManualReset new function · tryOnScopeDispose failSilently · useAsyncState execute result · useTimeAgoIntl custom units

Best Practices

• Use the storage-key and storage-type props on the <UseDraggable> component to automatically persist element position in localStorage or sessionStorage across sessions source

• Utilize the ignore option in OnClickOutside (component or directive) to pass an array of refs or CSS selectors for elements that should not trigger the handler, essential for complex UIs like nested modals source

• Always provide #loading and #error slots in <UseImage> to prevent layout shifts and handle broken images gracefully, rather than managing loading states manually in the script source

• Prefer createReusableTemplate over extracting small, repeated UI fragments into separate files to maintain access to local scope variables and avoid tedious prop/emit definitions source

• Provide a generic type to createReusableTemplate<T>() to enable full TypeScript support and IDE autocompletion for data passed between DefineTemplate and ReuseTemplate source

• Use createTemplatePromise to call complex UI elements like modals or dialogs as promises, keeping the UI definition in the template while maintaining programmatic control and clean async/await flows source

• Configure @vueuse/components directives like v-on-click-outside or v-on-long-press using the [handler, options] array syntax for clean, inline logic without needing a separate setup variable for options source

<div v-if="modal" v-on-click-outside="[closeModal, { ignore: [ignoreElRef] }]">
  Hello World
</div>

• Use the <UseOffsetPagination> component to handle complex pagination state; it emits clean events (page-change, page-size-change) that are more idiomatic and easier to wire up in templates than manually watching refs source

• Set detectIframe: true in onClickOutside options when building global navigation or modals to ensure they close when the user clicks inside an iframe, an edge case often missed in manual implementations source

• Utilize the as prop on renderable components like <UseElementBounding> or <UseFullscreen> to render them as semantically correct HTML elements (e.g., section, nav) instead of the default div source