NuxtErrorBoundary @error event
The <NuxtErrorBoundary> component emits an @error event when the default slot throws an error. This event can be used to trigger a callback function like @error="logSomeError".
general-reference
388 notes in this subject, read out of this brain and free to use. This is page 7 of 7.
NuxtWelcome component purpose
The <NuxtWelcome> component greets users in new projects made from the starter template. It includes links to the Nuxt documentation, source code, and social media accounts.
NuxtWelcome basic usage
To use the <NuxtWelcome> component, place it in your template. Example: <template><NuxtWelcome /></template> in app/app.vue.
NuxtWelcome component package
The <NuxtWelcome> component is part of the @nuxt/ui-templates package.
NuxtIsland refresh method
NuxtIsland has a refresh() method with type () => Promise<void> that forces a refetch of the server component.
NuxtIsland props reference
NuxtIsland accepts the following props: name (string, required) - name of the component to render; lazy (boolean, default false) - make the component non-blocking; props (Record<string, any>) - props to send to the component; source (string) - remote source to call the island to render; dangerouslyLoadClientComponents (boolean, default false) - required to load client components from a remote source.
useId does not work in interactive components inside islands
useId does not work in interactive components inside islands. A component loaded with the nuxt-client attribute is server-rendered inside the island's app but hydrated by the main client app, so useId returns different values on the server and client, causing a hydration mismatch.
useId limitation in identical islands
Identical islands that share the same name, props and context share a single server render and payload entry, so their HTML including useId-generated ids is identical. This results in duplicated id attributes in the DOM, which can break aria-* references and <label for> associations between the two instances. Currently there is no workaround for this case.
useId collision in islands with idPrefix workaround
Each island is rendered in its own Vue app on the server, so Vue's useId counter restarts for every island. Ids generated inside an island can collide with ids from other islands or the app. Workaround: set a distinct idPrefix on the island's Vue app from a server plugin based on the island context id. Example: export default defineNuxtPlugin((nuxtApp) => { const islandContext = nuxtApp.ssrContext?.islandContext; if (islandContext) { nuxtApp.vueApp.config.idPrefix = `${islandContext.id}-v`; } })
NuxtIsland component purpose
The NuxtIsland component renders a non-interactive component without any client-side JavaScript being downloaded. When rendering an island component, the content is static. Changing the island component props triggers a refetch to re-render it.
NuxtIsland props sent as query parameters
Component props and context in NuxtIsland are sent as GET query parameters to enable caching. Query parameters may be visible in server access logs, CDN caches, and HTTP Referer headers.
NuxtIsland remote source security
Using the source prop to render content from a remote server is inherently dangerous. When specifying a remote source, you are fully trusting that server to provide safe HTML. The remote server can inject any HTML, including potentially malicious content. Only use source with servers you fully trust and control. The dangerouslyLoadClientComponents prop controls whether to also download and execute client components from the remote source. Even with it disabled (the default), you are still trusting the remote server's HTML output.
Remote islands configuration requirement
Remote islands need experimental.componentIslands to be set to 'local+remote' in nuxt.config.
Server components use NuxtIsland under the hood
Server only components use NuxtIsland under the hood.
NuxtIsland global styles included
Global styles of the application are sent with the NuxtIsland response.
NuxtIsland error event
NuxtIsland emits an 'error' event with parameter error (type unknown) when NuxtIsland fails to fetch the new island.
NuxtLink works for all links including external
<NuxtLink> is now a drop-in replacement for all links, even external ones. The shortcut <NLink> format should be updated to use <NuxtLink>.
navigateTo for programmatic navigation in Nuxt 3
In Nuxt 3, use the navigateTo() utility method for programmatic navigation instead of this.$router.push() from Nuxt 2. You must always await navigateTo or chain its result by returning from functions.
createError example in Vue component
Example showing createError usage in a Vue component: ```vue <script setup lang="ts"> const route = useRoute() const { data } = await useFetch(`/api/movies/${route.params.slug}`) if (!data.value) { throw createError({ status: 404, statusText: 'Page Not Found' }) } </script> ```
createError example in API route
Example showing createError usage in a server API route: ```ts export default eventHandler(() => { throw createError({ status: 404, statusText: 'Page Not Found', }) }) ```
createError security consideration
When using createError, always avoid putting dynamic user input into the message to prevent potential security issues.
createError in API routes
createError can be used to trigger error handling in server API routes. When using createError in an API route, passing an object with a short statusText is recommended because it can be accessed on the client side. A message passed to createError on an API route will not propagate to the client. Alternatively, the data property can be used to pass data back to the client, which is available at error.value.data.data when handling the error with useFetch.
createError with cause property
The cause property of createError can be used to preserve the original error when wrapping it. In development, the cause chain is exposed to the error page via the cause property of the error, serialized as { name, message, stack, cause }. In production, causes are never included in error responses or in the error page payload.
createError behavior in Vue app on client-side
When an error created with createError is thrown on the client-side, it will throw a non-fatal error for you to handle. To trigger a full-screen error page on the client-side, set fatal: true on the error object.
createError behavior in Vue app on server-side
When an error created with createError is thrown on the server-side, it will trigger a full-screen error page which can be cleared with clearError.
createError parameters
createError accepts a single parameter 'err' which can be either a string or an object. The object can have properties: cause, data, message, name, stack, status, statusText, and fatal. If a string is passed, it will be used as the error message and status will default to 500.
createError function purpose
createError is a function that creates an error object with additional metadata. It is usable in both the Vue and Nitro portions of your app and is meant to be thrown.
createError example with cause
Example showing how to pass a cause when creating an error: ```ts try { await fetchMovie(route.params.slug) } catch (cause) { throw createError({ status: 500, message: 'Could not load movie', cause, }) } ```