components

65 notes in this subject, read out of this brain and free to use. This is page 1 of 2.

NuxtPicture component purpose

The <NuxtPicture> component is a drop-in replacement for the native HTML <picture> tag that handles automatic image optimization. It allows serving modern image formats like webp when possible.

NuxtPicture vs NuxtImg usage similarity

Usage of <NuxtPicture> is almost identical to <NuxtImg>, with the additional capability of serving modern formats like webp when possible.

NuxtRouteAnnouncer component availability

The <NuxtRouteAnnouncer> component is available in Nuxt v3.12 and later.

Where to place NuxtRouteAnnouncer

Add <NuxtRouteAnnouncer/> in app.vue or app/layouts/ files to enhance accessibility by informing assistive technologies about page title changes.

NuxtRouteAnnouncer default slot usage

You can pass custom HTML or components through the route announcer's default slot, which receives a 'message' variable containing the announcement text.

NuxtRouteAnnouncer is optional

The <NuxtRouteAnnouncer> component is optional. For full customization, you can implement your own announcer component based on the source code at https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-route-announcer.ts.

useRouteAnnouncer composable

The useRouteAnnouncer composable allows you to hook into the underlying announcer instance and set a custom announcement message.

NuxtAnnouncer component for in-page changes

For announcing in-page content changes such as form validation, toast notifications, and loading states, use the <NuxtAnnouncer> component with the useAnnouncer composable instead of NuxtRouteAnnouncer.

NuxtRouteAnnouncer basic example

Place <NuxtRouteAnnouncer /> in app.vue before NuxtLayout to announce route changes: ```vue <template> <NuxtRouteAnnouncer /> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> ```

NuxtRouteAnnouncer slot example

Use the default slot to customize the announcement message: ```vue <template> <NuxtRouteAnnouncer> <template #default="{ message }"> <p>{{ message }} was loaded.</p> </template> </NuxtRouteAnnouncer> </template> ```

NuxtRouteAnnouncer purpose

The <NuxtRouteAnnouncer> component adds a hidden element with the page title to announce route changes to assistive technologies, enhancing accessibility for screen reader users.

NuxtTime relative prop

The relative prop is optional, Type: boolean, Default: false. When set to true, it enables relative time formatting using the Intl.RelativeTimeFormat API, displaying times like '5 minutes ago' or 'in 2 days'.

NuxtTime relative formatting props

When relative is set to true, the component accepts properties from Intl.RelativeTimeFormat including numeric and relativeStyle. Note that relativeStyle is used instead of style because style is a reserved prop.

NuxtTime basic usage example

Display the current time with default locale and formatting: <NuxtTime :datetime="Date.now()" />

NuxtTime custom formatting example

Display time with custom formatting options: <NuxtTime :datetime="Date.now()" weekday="long" year="numeric" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" time-zone-name="short" />

NuxtTime relative time example

Display relative times using the relative prop: <NuxtTime :datetime="Date.now() - 30 * 1000" relative />  <NuxtTime :datetime="Date.now() - 45 * 60 * 1000" relative />  <NuxtTime :datetime="Date.now() + 2 * 24 * 60 * 60 * 1000" relative />

NuxtTime component availability

The NuxtTime component is available in Nuxt v3.17+.

NuxtTime component purpose

The NuxtTime component displays dates and times in a locale-friendly format with proper HTML time semantics. It ensures consistent rendering between server and client without hydration mismatches.

NuxtTime datetime prop

The datetime prop is required and accepts Type: Date | number | string. It can be provided as a Date object, a timestamp (number), or an ISO-formatted date string.

NuxtTime locale prop

The locale prop is optional, Type: string, Default: uses the browser or server's default locale. It accepts a BCP 47 language tag for formatting such as 'en-US', 'fr-FR', or 'ja-JP'.

NuxtTime formatting props

The NuxtTime component accepts any property from the Intl.DateTimeFormat options for formatting, including year, month, day, hour, minute, second, weekday, and timeZoneName.

NuxtTime custom locale example

Display times in different locales: <NuxtTime :datetime="Date.now()" locale="en-US" weekday="long" /> <NuxtTime :datetime="Date.now()" locale="fr-FR" weekday="long" /> <NuxtTime :datetime="Date.now()" locale="ja-JP" weekday="long" />

NuxtAnnouncer use cases

The <NuxtAnnouncer> component is useful for form validation, toast notifications, loading states, and other in-page updates.

NuxtAnnouncer component availability

The <NuxtAnnouncer> component is available in Nuxt v4.4.2 and later.

NuxtAnnouncer purpose

The <NuxtAnnouncer> component adds a hidden element to announce dynamic content changes to assistive technologies and screen readers.

NuxtAnnouncer usage location

Add <NuxtAnnouncer/> in your app.vue or app/layouts/ to enable announcing dynamic content changes to screen readers.

useAnnouncer composable

Use the useAnnouncer composable anywhere in your app to announce messages. The composable provides polite() and assertive() methods for triggering announcements.

NuxtAnnouncer slots

You can pass custom HTML or components through the announcer's default slot, which provides a message variable containing the announcement text.

NuxtAnnouncer atomic prop

The atomic prop controls if screen readers announce only changes or the entire content. Set to true for full content readouts on updates, false for changes only. Default value is true.

NuxtAnnouncer politeness prop

The politeness prop sets the default urgency for screen reader announcements with three options: off (disables the announcement), polite (waits for silence), or assertive (interrupts immediately). Default value is polite.

NuxtAnnouncer vs NuxtRouteAnnouncer differences

NuxtAnnouncer announces any dynamic content manually via polite()/assertive() with developer-provided messages and atomic default of true. NuxtRouteAnnouncer announces route/page changes automatically on navigation using the page <title> with atomic default of false.

NuxtAnnouncer is optional

The <NuxtAnnouncer> component is optional. You can implement your own announcer based on the source code for full customization.

NuxtAnnouncer example with useAnnouncer

Example of using useAnnouncer in a contact form: const { polite, assertive } = useAnnouncer(). Call polite('Message sent successfully') on success or assertive('Error: Failed to send message') on error.

NuxtPage component purpose and location

The <NuxtPage> component is a built-in component that displays top-level or nested pages located in the app/pages/ directory. It is required to display pages and should be used instead of Vue Router's <RouterView> because it takes additional care of internal states and ensures useRoute() returns correct paths.

NuxtPage internal structure with Transition, KeepAlive, and Suspense

The <NuxtPage> component internally wraps RouterView and includes optional Transition, KeepAlive, and Suspense components. By default, Nuxt does not enable Transition and KeepAlive, but they can be enabled in the nuxt.config file or by setting the transition and keepalive properties on <NuxtPage> or via definePageMeta in the page component.

NuxtPage Transition single root element warning

If you enable <Transition> in your page component via <NuxtPage>, ensure that the page has a single root element, otherwise it may not work properly.

NuxtPage component lifecycle differs from typical Vue applications

In a typical Vue application, a new page component is mounted only after the previous one has been fully unmounted. However, in Nuxt with <NuxtPage>, due to how Vue <Suspense> is implemented, the new page component is mounted before the previous one is unmounted.

NuxtPage props: name

The name prop is a string that tells <RouterView> to render the component with the corresponding name in the matched route record's components option. It is used with the name@view.vue filename convention for Named Views.

NuxtPage props: route

The route prop has type RouteLocationNormalized and accepts a route location that has all of its components resolved.

NuxtPage props: pageKey

The pageKey prop controls when the <NuxtPage> component is re-rendered. It accepts either a string or a function and determines how the component key is generated for reactivity.

NuxtPage props: transition

The transition prop defines global transitions for all pages rendered with the <NuxtPage> component. It accepts either a boolean or TransitionProps object.

NuxtPage props: keepalive

The keepalive prop controls state preservation of pages rendered with the <NuxtPage> component. It accepts either a boolean or KeepAliveProps object.

NuxtPage automatic name and route resolution

Nuxt automatically resolves the name and route props by scanning and rendering all Vue component files found in the /pages directory, so you do not need to manually provide these values.

NuxtPage pageKey example with static key

If you pass a pageKey that never changes, such as page-key="static", the <NuxtPage> component will be rendered only once when it is first mounted.

NuxtPage dynamic pageKey based on route

You can pass a dynamic key based on the current route using :page-key="route => route.fullPath" to control when the component re-renders based on route changes.

NuxtPage avoid using $route object in pageKey

Do not use the $route object directly in pageKey as it can cause problems with how <NuxtPage> renders pages with <Suspense>. Use the route parameter passed to the function instead.

NuxtPage pageKey via definePageMeta

You can pass pageKey as a key value via definePageMeta from the <script> section of your Vue component in the /pages directory using: definePageMeta({ key: route => route.fullPath })

NuxtPage component ref access

To get the ref of a page component, access it through ref.value.pageRef. The parent component can hold a ref to <NuxtPage> and call pageRef to access the actual page component instance.

NuxtPage custom props passing

<NuxtPage> accepts custom props that can be passed further down the hierarchy to page components. Custom props can be accessed in page components either via defineProps if declared or via useAttrs() if not explicitly defined.

NuxtPage custom props example

You can pass custom props like <NuxtPage :foobar="123" /> and access them in page components with defineProps<{ foobar: number }>() or via useAttrs() as attrs.foobar.

NuxtLink component purpose

NuxtLink is a drop-in replacement for both Vue Router's RouterLink component and HTML's <a> tag. It intelligently determines whether a link is internal or external and renders it accordingly with available optimizations such as prefetching and default attributes.

NuxtLink default rel attribute for external links

A 'rel' attribute of 'noopener noreferrer' is applied by default to links with a 'target' attribute or to absolute links (e.g., links starting with http://, https://, or //). 'noopener' solves a security bug in older browsers, and 'noreferrer' improves privacy by not sending the Referer header to the linked site.

NuxtLink rel and noRel props

Use the 'rel' prop to customize the rel attribute for external links. Use the 'noRel' prop to prevent the default 'rel' attribute from being added to absolute links. Example: <NuxtLink to="https://github.com/nuxt" no-rel>Nuxt GitHub</NuxtLink>. Note: 'noRel' and 'rel' cannot be used together; 'rel' will be ignored.

NuxtLink automatic prefetching behavior

Nuxt automatically includes smart prefetching for NuxtLink. It detects when a link is visible (by default), either in the viewport or when scrolling, and prefetches the JavaScript for those pages. Nuxt only loads resources when the browser is not busy and skips prefetching if the connection is offline or on 2g.

NuxtLink disable prefetching per link

To disable prefetching for individual NuxtLink components, use the 'no-prefetch' or ':prefetch="false"' prop. Example: <NuxtLink to="/about" no-prefetch>About page not pre-fetched</NuxtLink>.

NuxtLink prefetchOn prop with visibility trigger

The 'prefetchOn' prop supports a 'visibility' option (default) that prefetches when the link becomes visible in the viewport using the Intersection Observer API. Prefetching is triggered when the element is scrolled into view.

NuxtLink prefetchOn prop with interaction trigger

The 'prefetchOn' prop supports an 'interaction' option that prefetches when the link is hovered or focused. This approach listens for 'pointerenter' and 'focus' events.

NuxtLink prefetchOn as object configuration

The 'prefetchOn' prop can be used as an object to configure prefetch triggers: <NuxtLink :prefetch-on="{ interaction: true }"> or <NuxtLink :prefetch-on="{ visibility: true, interaction: true }">. Enabling both visibility and interaction may result in unnecessary resource usage or redundant prefetching.

NuxtLink custom slot prefetch control

When using the 'custom' prop, prefetching is controlled by the slot implementation. The slot receives 'href', 'navigate', 'prefetch', and 'shouldPrefetch' values. Example: <NuxtLink v-slot="{ href, navigate, prefetch, shouldPrefetch }" to="/about" custom><a :href="href" @click="navigate" @pointerenter="shouldPrefetch('interaction') && prefetch()" @focus="shouldPrefetch('interaction') && prefetch()">About page</a></NuxtLink>.

NuxtLink RouterLink props

NuxtLink supports the following Vue Router RouterLink props: 'to' (any URL or route location object), 'custom' (whether to wrap content in <a> element), 'exactActiveClass' (class for exact active links, defaults to 'router-link-exact-active'), 'activeClass' (class for active links, defaults to 'router-link-active'), 'replace' (replace history instead of push), and 'ariaCurrentValue' (aria-current attribute value for exact active links).

Give your agent this brain