auto-imports & composables

37 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

createUseAsyncData is a compiler macro

createUseAsyncData is a compiler macro that must be used as an exported declaration in the composables/ directory or any directory scanned by the Nuxt compiler. Nuxt automatically injects de-duplication keys at build time.

createUseAsyncData factory function purpose

createUseAsyncData creates a custom useAsyncData composable with pre-defined options. The resulting composable is fully typed and works exactly like useAsyncData, but with your defaults baked in.

createUseAsyncData signature

createUseAsyncData has two signatures: function createUseAsyncData(options?: Partial<AsyncDataOptions>): typeof useAsyncData and function createUseAsyncData(options: (callerOptions: AsyncDataOptions) => Partial<AsyncDataOptions>): typeof useAsyncData.

createUseAsyncData accepts all useAsyncData options

createUseAsyncData accepts all the same options as useAsyncData, including server, lazy, immediate, default, transform, pick, getCachedData, deep, dedupe, timeout, and watch.

createUseAsyncData default mode with plain object

When you pass a plain object to createUseAsyncData, the factory options act as defaults and callers can override any option when calling the resulting composable.

createUseAsyncData override mode with function

When you pass a function to createUseAsyncData, the factory options override the caller's options. The function receives the caller's options as its argument.

createUseAsyncData example with getCachedData

Example of creating a custom composable: export const useCachedData = createUseAsyncData({ getCachedData (key, nuxtApp) { return nuxtApp.payload.data[key] ?? nuxtApp.static.data[key] } }). Then use it like: const { data: mountains } = await useCachedData('mountains', () => $fetch('https://api.nuxtjs.dev/mountains')).

createUseAsyncData default mode example

Example of default mode: export const useLazyData = createUseAsyncData({ lazy: true, server: false }). Callers can use the defaults with const { data } = await useLazyData('key', () => fetchSomeData()) or override with const { data } = await useLazyData('key', () => fetchSomeData(), { server: true }).

createUseAsyncData override mode example

Example of override mode: export const useStrictData = createUseAsyncData(callerOptions => ({ deep: false })). In this case, deep is always enforced as false regardless of caller options.

createUseAsyncData minimum version

createUseAsyncData is available from Nuxt version 4.2 or later.

createUseFetch creates custom useFetch with defaults

createUseFetch is a factory function that creates a custom useFetch composable with pre-defined default options. The resulting composable is fully typed and works exactly like useFetch, but with your defaults baked in.

createUseFetch is a compiler macro with placement requirements

createUseFetch is a compiler macro that must be used as an exported declaration in the composables/ directory or any directory scanned by the Nuxt compiler. Nuxt automatically injects de-duplication keys at build time.

createUseFetch plain object mode acts as defaults

When you pass a plain object to createUseFetch, the factory options act as defaults that callers can override. Any option in the factory can be overridden by the caller when using the composable.

createUseFetch function mode enforces options

When you pass a function to createUseFetch, the factory options override the caller's options. The function receives the caller's options as its argument, so you can read them to compute your overrides. This is useful for enforcing settings like authentication headers or a specific base URL that should not be changed by the caller.

createUseFetch function signature required for useNuxtApp

The function signature (override mode) is required when passing a custom $fetch instance to createUseFetch because useNuxtApp() must be called in the setup context at the composable call site, not in module scope where no Nuxt instance is available.

createUseFetch accepts same options as useFetch

createUseFetch accepts all the same options as useFetch, including baseURL, headers, query, onRequest, onResponse, server, lazy, transform, getCachedData, and more.

createUseFetch example with baseURL

Example of creating a custom useAPI composable with createUseFetch in app/composables/useAPI.ts: export const useAPI = createUseFetch({ baseURL: 'https://api.nuxt.com', }) Then use it in a page like: const { data: modules } = await useAPI('/modules')

createUseFetch with custom $fetch instance

Example of passing a custom $fetch instance to createUseFetch: export const useAPI = createUseFetch(callerOptions => ({ $fetch: useNuxtApp().$api as typeof $fetch, ...callerOptions, })) The function signature is required so useNuxtApp() is called in the setup context.

defineLazyHydrationComponent compiler macro

defineLazyHydrationComponent is a compiler macro available from Nuxt 3.18 that helps create components with specific lazy hydration strategies. Lazy hydration defers component hydration until components become visible or until the browser completes more critical tasks, which can significantly reduce initial performance cost for non-essential components.

defineLazyHydrationComponent visible strategy

The 'visible' strategy hydrates a component when it becomes visible in the viewport. It uses Vue's built-in hydrateOnVisible strategy. The hydrate-on-visible prop is optional and accepts an object to customize IntersectionObserver behavior, such as rootMargin: '100px' to trigger hydration when the element is 100px away from entering the viewport.

defineLazyHydrationComponent idle strategy

The 'idle' strategy hydrates a component when the browser is idle, suitable for components that should load soon but not block the critical rendering path. It uses Vue's built-in hydrateOnIdle strategy. The hydrate-on-idle prop is optional and accepts a positive number to specify the maximum timeout in milliseconds.

defineLazyHydrationComponent interaction strategy

The 'interaction' strategy hydrates a component after a specified user interaction such as click or mouseover. It uses Vue's built-in hydrateOnInteraction strategy. The hydrate-on-interaction prop is optional; if no event is provided, it defaults to hydrating on pointerenter, click, and focus.

defineLazyHydrationComponent mediaQuery strategy

The 'mediaQuery' strategy hydrates a component when the window matches a specified media query. It uses Vue's built-in hydrateOnMediaQuery strategy. The hydrate-on-media-query prop accepts a media query string such as '(min-width: 768px)'.

defineLazyHydrationComponent time strategy

The 'time' strategy hydrates a component after a specified delay in milliseconds. The hydrate-after prop accepts a positive number representing the delay duration.

defineLazyHydrationComponent if strategy

The 'if' strategy hydrates a component based on a boolean condition. The hydrate-when prop accepts a ref or computed value; hydration is triggered when the value becomes true. This strategy is best for components that might not always need to be hydrated.

defineLazyHydrationComponent never strategy

The 'never' strategy prevents Vue from hydrating the component entirely. The component will remain static and not be hydrated.

defineLazyHydrationComponent hydrated event

All delayed hydration components created with defineLazyHydrationComponent emit a @hydrated event when they are hydrated. This can be listened to with an event handler such as @hydrated="onHydrated".

defineLazyHydrationComponent parameters

defineLazyHydrationComponent accepts two required parameters: strategy (type 'visible' | 'idle' | 'interaction' | 'mediaQuery' | 'if' | 'time' | 'never') and source (type () => Promise<Component>). To ensure the compiler correctly recognizes the macro, avoid using external variables for these parameters; pass literal values directly to the macro call.

defineLazyHydrationComponent compiler macro recognition pitfall

To prevent the defineLazyHydrationComponent macro from not being properly recognized, avoid using external variables for the strategy and source parameters. Extracting them to variables before passing them to the macro will prevent proper recognition.

defineLazyHydrationComponent visible strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'visible', () => import('./components/MyComponent.vue'), ) </script> <template> <div> <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" /> </div> </template> ``` Example showing how to create a component that hydrates when it becomes visible in the viewport with a 100px margin.

defineLazyHydrationComponent idle strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'idle', () => import('./components/MyComponent.vue'), ) </script> <template> <div> <LazyHydrationMyComponent :hydrate-on-idle="2000" /> </div> </template> ``` Example showing how to create a component that hydrates when the browser is idle or after 2000ms.

defineLazyHydrationComponent interaction strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'interaction', () => import('./components/MyComponent.vue'), ) </script> <template> <div> <LazyHydrationMyComponent hydrate-on-interaction="mouseover" /> </div> </template> ``` Example showing how to create a component that hydrates when hovered over.

defineLazyHydrationComponent mediaQuery strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'mediaQuery', () => import('./components/MyComponent.vue'), ) </script> <template> <div> <LazyHydrationMyComponent hydrate-on-media-query="(min-width: 768px)" /> </div> </template> ``` Example showing how to create a component that hydrates when the window width is greater than or equal to 768px.

defineLazyHydrationComponent time strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'time', () => import('./components/MyComponent.vue'), ) </script> <template> <div> <LazyHydrationMyComponent :hydrate-after="1000" /> </div> </template> ``` Example showing how to create a component that hydrates after 1000ms.

defineLazyHydrationComponent if strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'if', () => import('./components/MyComponent.vue'), ) const isReady = ref(false) function myFunction () { isReady.value = true } </script> <template> <div> <LazyHydrationMyComponent :hydrate-when="isReady" /> </div> </template> ``` Example showing how to create a component that hydrates based on a boolean condition.

defineLazyHydrationComponent never strategy example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'never', () => import('./components/MyComponent.vue'), ) </script> <template> <div> <LazyHydrationMyComponent /> </div> </template> ``` Example showing how to create a component that will never be hydrated by Vue.

defineLazyHydrationComponent hydrated event example

```vue <script setup lang="ts"> const LazyHydrationMyComponent = defineLazyHydrationComponent( 'visible', () => import('./components/MyComponent.vue'), ) function onHydrated () { console.log('Component has been hydrated!') } </script> <template> <div> <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" @hydrated="onHydrated" /> </div> </template> ``` Example showing how to listen to the @hydrated event to detect when a component has been hydrated.

Give your agent this brain