directory-structure

251 notes in this subject, read out of this brain and free to use. This is page 5 of 5.

Example using runtime config in server route

```ts export default defineEventHandler(async (event) => { const config = useRuntimeConfig() const repo = await $fetch('https://api.github.com/repos/nuxt/nuxt', { headers: { Authorization: `token ${config.githubToken}`, }, }) return repo }) ``` This example shows how to access runtime configuration in a server route. This file should be placed in server/api/foo.ts.

Example runtime config in nuxt.config

```ts export default defineNuxtConfig({ runtimeConfig: { githubToken: '', }, }) ``` This example shows how to define runtime configuration in nuxt.config.ts. The values can be overridden via environment variables like NUXT_GITHUB_TOKEN in .env files.

Example reading request cookies

```ts export default defineEventHandler((event) => { const cookies = parseCookies(event) return { cookies } }) ``` This example shows how to read cookies from the incoming request. This file should be placed in server/api/cookies.ts.

Example forwarding context with event.$fetch

```ts export default defineEventHandler((event) => { return event.$fetch('/api/forwarded') }) ``` This example shows how to use event.$fetch to forward request context and headers when making fetch requests from a server route. This file should be placed in server/api/forward.ts.

Example background task with event.waitUntil

```ts const timeConsumingBackgroundTask = async () => { await new Promise(resolve => setTimeout(resolve, 1000)) } export default eventHandler((event) => { // schedule a background task without blocking the response event.waitUntil(timeConsumingBackgroundTask()) // immediately send the response to the client return 'done' }) ``` This example shows how to use event.waitUntil to schedule background tasks that don't block the response to the client. This file should be placed in server/api/background-task.ts.

Components in ~/components/islands/ are registered as islands

Components inside the ~/components/islands/ directory are automatically registered as islands and can be rendered with <NuxtIsland> directly. For example, <NuxtIsland name="MyIsland" /> for ~/components/islands/MyIsland.vue.

.server.vue component naming convention

Add the .server suffix to a component filename to make it a standalone server component. For example, HighlightedMarkdown.server.vue becomes a server component that is used like any other component.

Dynamic routes example comparison Nuxt 2 to Nuxt 3

Nuxt 2 used _id for dynamic parameters and _.vue for catch-all routes. Nuxt 3 examples: /pages/users/[user].vue for /users/some-user-name (accessing params.user), and /pages/users/[...slug].vue for /users/anything-else (accessing params.slug).

NuxtPage replaces NuxtChild and nested Nuxt

In Nuxt 3, the <NuxtPage> component replaces both <Nuxt> and <NuxtChild> components from Nuxt 2 for rendering nested routes with parent and child components.

Dynamic route parameter syntax in Nuxt 3

Nuxt 3 uses square bracket syntax for dynamic route parameters. Where Nuxt 2 used _id, Nuxt 3 uses [id]. For catch-all routes, Nuxt 3 uses [...slug].vue instead of _.vue.

app.vue as central entry point

Nuxt 3 provides a central entry point to your app via ~/app.vue. If you don't have an app.vue file in your source directory, Nuxt will use its own default version. This file is a great place to put custom code that needs to run once when your app starts up, as well as any components that are present on every page of your app.

Give your agent this brain