Nuxt.js Examples

You can render a Nuxt page by using the <NuxtPage> component.

You can set up a layout to be shared between the pages of your app.

Use useRoute to get the path of the current page.

Trigger a page transition dynamically with useRouter.

You can fetch data from the server directly in the component.

If you have custom fetching logic, you can wrap the logic inside useAsyncData.

Use <NuxtLink> to create a link between two pages as in a single-page app.

Validation logic can be registered for a route via definePageMeta.

The params of the route can be accessed through the useRoute composable.

You can init a state on the server side using useState.

You can set <title>, <meta>, and <link> with the useHead composable.

You can opt out of Server-Side Rendering on the component level.

Use the preload attribute on <NuxtImg> to load images that you need to display immediately.

A Nuxt app can be configured to render entirely on the client side, just like a regular Vue.js app.

A Nuxt app can be generated entirely at build time.

A Nuxt app can be statically regenerated from time to time.

Create an API route with defineEventHandler.

Different from route middleware, server middleware only executes on the server.

Instead of using <ContentDoc>, you can also query the content you need.

A middleware is a special function that gets executed before a route.

A middleware can be also be created without an external file.

A Nuxt Content document can be rendered with the <NuxtContent> component.