general-reference

388 notes in this subject, read out of this brain and free to use. This is page 6 of 7.

NuxtAnnouncer for in-page content 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.

NuxtTime relative formatting props

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

NuxtTime custom locale example

NuxtTime relative time example

NuxtTime custom formatting example

NuxtTime component availability

The NuxtTime component is available in Nuxt v3.17 and later.

NuxtTime purpose and features

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 a Date object, a timestamp (number), or an ISO-formatted date string.

NuxtTime locale prop

The locale prop is optional and accepts a BCP 47 language tag string (e.g., 'en-US', 'fr-FR', 'ja-JP'). It defaults to the browser or server's default locale.

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 time-zone-name.

NuxtTime relative prop

The relative prop is a boolean that defaults to false. When set to true, it enables relative time formatting using the Intl.RelativeTimeFormat API, displaying times like '5 minutes ago'.

NuxtTime basic usage example

Differences between NuxtRouteAnnouncer and NuxtAnnouncer

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

NuxtAnnouncer component purpose

The <NuxtAnnouncer> component adds a hidden element to announce dynamic content changes to assistive technologies. It is useful for form validation, toast notifications, loading states, and other in-page updates.

NuxtAnnouncer minimum version requirement

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

Where to place NuxtAnnouncer in your app

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

useAnnouncer composable usage

Use the useAnnouncer composable anywhere in your app to announce messages. It provides polite() and assertive() methods to trigger announcements with different urgency levels.

NuxtAnnouncer slot

The <NuxtAnnouncer> component accepts a default slot with a 'message' scoped property that contains the announcement message to be rendered.

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 is true.

NuxtAnnouncer politeness prop

The politeness prop sets the default urgency for screen reader announcements. Valid values are: off (disable the announcement), polite (waits for silence), or assertive (interrupts immediately). Default is polite.

NuxtPage purpose and requirement

The <NuxtPage> component is required to display pages located in the pages/ directory. It is a built-in component that comes with Nuxt and lets you display top-level or nested pages.

NuxtPage is a wrapper around RouterView

<NuxtPage> is a wrapper around <RouterView> from Vue Router. It should be used instead of <RouterView> because the former takes additional care of internal states. Otherwise, useRoute() may return incorrect paths.

NuxtPage internal component structure

<NuxtPage> includes a RouterView with a v-slot that wraps a component with optional Transition, optional KeepAlive, and Suspense. By default, Nuxt does not enable Transition and KeepAlive. You can enable them in the nuxt.config file or by setting the transition and keepalive properties on <NuxtPage>.

NuxtPage component lifecycle with Suspense

Since <NuxtPage> uses <Suspense> under the hood, the component lifecycle behavior during page changes differs from a typical Vue application. In Nuxt, the new page component is mounted before the previous one is unmounted, unlike typical Vue applications where the new page is mounted only after the previous one is fully unmounted.

NuxtPage props reference

<NuxtPage> accepts the following props: name (string) - tells RouterView to render the component with the corresponding name in the matched route record's components option; route (RouteLocationNormalized) - route location with all components resolved; pageKey (string or function) - control when the NuxtPage component is re-rendered; transition (boolean or TransitionProps) - define global transitions for all pages; keepalive (boolean or KeepAliveProps) - control state preservation of pages.

NuxtPage pageKey usage example

You can pass a pageKey prop to control when NuxtPage is re-rendered. For example, <NuxtPage page-key="static" /> will render the component only once when first mounted. You can also use a dynamic key based on the current route: <NuxtPage :page-key="route => route.fullPath" />.

NuxtPage pageKey via definePageMeta

The pageKey can also be passed as a key value via definePageMeta from the script section of a Vue component in the /pages directory. For example: definePageMeta({ key: route => route.fullPath })

NuxtPage warning about $route object

Do not use the $route object in pageKey as it can cause problems with how <NuxtPage> renders pages with <Suspense>.

NuxtPage Transition single root element requirement

If you enable <Transition> in your page component, ensure that the page has a single root element.

Accessing NuxtPage component ref

To get the ref of a page component, access it through ref.value.pageRef. The parent component can assign a ref to <NuxtPage ref="page" /> and then access page methods via page.value.pageRef.

NuxtPage custom props passthrough

<NuxtPage> accepts custom props that you can pass further down the hierarchy to page components. For example, <NuxtPage :foobar="123" /> passes foobar to the page. Custom props can be accessed in page components either via defineProps or via useAttrs().

NuxtPage custom props example

Example of passing custom props through NuxtPage: Parent (app/app.vue): <template> <NuxtPage :foobar="123" /> </template> Page (app/pages/page.vue): <script setup lang="ts"> const props = defineProps<{ foobar: number }>() console.log(props.foobar) // Outputs: 123 </script> Alternatively, access via useAttrs(): <script setup lang="ts"> const attrs = useAttrs() console.log(attrs.foobar) // Outputs: 123 </script>

NuxtLink 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 if the user only has a 2G connection.

NuxtLink custom prefetch triggers

The prefetchOn prop (available after v3.13.0) controls when to prefetch links with two options: visibility (prefetches when the link becomes visible in the viewport using Intersection Observer API) and interaction (prefetches when the link is hovered or focused, listening for pointerenter and focus events). An object can be passed to configure both: { interaction: true, visibility: true }, but enabling both may result in unnecessary resource usage or redundant prefetching.

NuxtLink custom slot prefetch control

When using the custom prop on NuxtLink (v4.5+), prefetching is controlled by the slot implementation. The custom slot provides prefetch, prefetched, and shouldPrefetch values to implement prefetch behavior manually. Example: <NuxtLink v-slot="{ href, navigate, prefetch, shouldPrefetch }" to="/about" custom> allows calling shouldPrefetch('interaction') && prefetch() on events like pointerenter and focus.

Enable cross-origin prefetch in Nuxt config

To enable cross-origin prefetching using the Speculation Rules API, set experimental.crossOriginPrefetch to true in nuxt.config: export default defineNuxtConfig({ experimental: { crossOriginPrefetch: true } })

NuxtLink custom prop disables automatic prefetch handlers

When using the custom prop on NuxtLink, prefetch, prefetchOn and prefetchedClass do not attach handlers or classes automatically. You must use the custom slot's prefetch, prefetched and shouldPrefetch values to implement this behavior yourself.

defineNuxtLink options signature

defineNuxtLink accepts a NuxtLinkOptions object with: componentName (string, internal name in Vue DevTools, default 'NuxtLink'), externalRelAttribute (string, default rel for external links, default 'noopener noreferrer', set to '' to disable), activeClass (string, default class on active links, defaults to Vue Router's 'router-link-active'), exactActiveClass (string, default class on exact active links, defaults to Vue Router's 'router-link-exact-active'), trailingSlash ('append' | 'remove', option to add or remove trailing slashes in href), prefetch (boolean, whether to prefetch by default), prefetchOn (object { visibility: boolean, interaction: boolean } for granular prefetch strategy control), and prefetchedClass (string, default class applied to prefetched links).

defineNuxtLink function to create custom link components

Use defineNuxtLink to create a custom link component with overwritten defaults. The component is auto-imported by its file name. Example: export default defineNuxtLink({ componentName: 'MyNuxtLink', /* options */ }) in app/components/MyNuxtLink.ts allows using <MyNuxtLink /> with custom defaults. The componentName only sets the internal name shown in Vue DevTools; the actual component name in templates comes from the file name.

NuxtLink defaults in nuxt.config

NuxtLink defaults can be overwritten in nuxt.config experimental.defaults.nuxtLink with the following options: componentName (default 'NuxtLink'), externalRelAttribute (default 'noopener noreferrer'), activeClass (default 'router-link-active'), exactActiveClass (default 'router-link-exact-active'), prefetchedClass (default undefined), trailingSlash (can be 'append' or 'remove', default undefined), prefetch (default true), and prefetchOn (default { visibility: true }).

NuxtLink anchor props

NuxtLink supports anchor props: target (target attribute value for the link) and rel (rel attribute value for the link, defaults to 'noopener noreferrer' for external links).

NuxtLink-specific props

NuxtLink-specific props are: href (alias for to, ignored if to is used), noRel (if true, no rel attribute added to external link), external (forces rendering as <a> tag instead of RouterLink), prefetch (prefetches middleware, layouts and payloads of links in viewport), prefetchOn (custom control of when to prefetch with options 'interaction' and 'visibility', or object { interaction: true, visibility: true }), noPrefetch (disables prefetching), and prefetchedClass (class applied to prefetched links).

NuxtLink RouterLink props

NuxtLink supports all Vue Router RouterLink props when not using external: to (any URL or route location object), custom (wraps content in <a> element, allows full control of rendering), exactActiveClass (class on exact active links, defaults to 'router-link-exact-active'), activeClass (class on active links, defaults to 'router-link-active'), replace (replaces history entry), and ariaCurrentValue (aria-current attribute value for exact active links).

Disable prefetch globally in Nuxt config

To disable prefetching for all links globally, set experimental.defaults.nuxtLink.prefetch to false in nuxt.config: export default defineNuxtConfig({ experimental: { defaults: { nuxtLink: { prefetch: false } } } })

NuxtLink component purpose and behavior

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

NuxtLink internal routing with params

To pass params to dynamic routes in NuxtLink, use an object with name and params properties. For example: <NuxtLink :to="{ name: 'posts-id', params: { id: 123 } }">. When passing an object to the to prop, NuxtLink inherits Vue Router's handling of query parameters, automatically encoding keys and values so manual encodeURI or encodeURIComponent calls are not needed.

NuxtLink external prop for static files and cross-app links

Use the external prop on NuxtLink to bypass Vue Router's internal routing mechanism when linking to static files in the /public directory or to another application hosted on the same domain. When external is set, NuxtLink renders as a standard HTML <a> tag instead of using Vue Router's client-side navigation.

NuxtLink rel and noRel attributes default behavior

A rel attribute of 'noopener noreferrer' is applied by default to links with a target attribute or to absolute links (starting with http://, https://, or //). The noopener attribute solves a security bug in older browsers, and noreferrer improves privacy by not sending the Referer header to the linked site. These defaults are considered best practice and have no negative impact on SEO.

NuxtLink noRel and rel props cannot be used together

The noRel and rel props cannot be used together on NuxtLink. If both are provided, rel will be ignored and noRel takes precedence.

NuxtLoadingIndicator basic usage example

Use <NuxtLoadingIndicator /> as a sibling component to NuxtLayout and NuxtPage in your template: <template> <NuxtLoadingIndicator /> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template>

NuxtLoadingIndicator slots

NuxtLoadingIndicator supports a default slot where you can pass custom HTML or components through the loading indicator.

NuxtLoadingIndicator customization and useLoadingIndicator

The NuxtLoadingIndicator component is optional. For full customization, you can implement your own based on its source code. You can hook into the underlying indicator instance using the useLoadingIndicator composable, which allows you to trigger start/finish events yourself.

NuxtLoadingIndicator estimated progress behavior

The loading indicator's speed gradually decreases after reaching a specific point controlled by estimatedProgress. This adjustment provides a more accurate reflection of longer page loading times and prevents the indicator from prematurely showing 100% completion.

NuxtLoadingIndicator component location

Add <NuxtLoadingIndicator/> in your app.vue or app/layouts/ directory. It displays a progress bar between page navigations.

NuxtLoadingIndicator props reference

The NuxtLoadingIndicator component accepts the following props: - color: The color of the loading bar. Can be set to false to turn off explicit color styling. Type: string | false. No default specified. - errorColor: The color of the loading bar when error is set to true. Type: string. No default specified. - height: Height of the loading bar, in pixels. Type: number. Default: 3. - duration: Duration of the loading bar, in milliseconds. Type: number. Default: 2000. - throttle: Throttle the appearing and hiding, in milliseconds. Type: number. Default: 200. - estimatedProgress: A custom function to customize progress estimation. Receives the duration and elapsed time, should return a value between 0 and 100. Type: function. No default specified.

NuxtErrorBoundary #error slot example

Example of using the #error slot with error display and clearError button: ```vue <template> <NuxtErrorBoundary>  <template #error="{ error, clearError }"> <p>An error occurred: {{ error }}</p> <button @click="clearError"> Clear error </button> </template> </NuxtErrorBoundary> </template> ```

NuxtErrorBoundary ref access example

Example of accessing error and clearError via template ref: ```vue <template> <NuxtErrorBoundary ref="errorBoundary">  </NuxtErrorBoundary> </template> <script setup lang="ts"> const errorBoundary = useTemplateRef('errorBoundary') // errorBoundary.value?.error // errorBoundary.value?.clearError() </script> ```

NuxtErrorBoundary component purpose

The <NuxtErrorBoundary> component handles client-side errors that occur in its default slot. It uses Vue's onErrorCaptured hook under the hood.

NuxtErrorBoundary #error slot

The <NuxtErrorBoundary> component provides an #error slot that receives an object with two properties: error (the error object) and clearError (a function to clear the error). This slot displays fallback content when an error occurs in the default slot.

NuxtErrorBoundary error and clearError access via ref

You can access the error and clearError properties of a <NuxtErrorBoundary> component through a template ref. Use errorBoundary.value?.error to access the current error and errorBoundary.value?.clearError() to clear the error from the component's script.

Give your agent this brain