Layers · Get Started with Nuxt v4

One of the core features of Nuxt is the layers and extending support. You can extend a default Nuxt application to reuse components, utils, and configuration. The layers structure is almost identical to a standard Nuxt application which makes them easy to author and maintain.
By default, any layers within your project in the ~~/layers directory will be automatically registered as layers in your project.
In addition, named layer aliases to the srcDir of each of these layers will automatically be created. For example, you will be able to access the ~~/layers/test layer via #layers/test.
In addition, you can extend from a layer by adding the extends property to your nuxt.config file.
You can also pass an authentication token if you are extending from a private GitHub repository:
You can override a layer's alias by specifying it in the options next to the layer source.
Nuxt uses unjs/c12 and unjs/giget for extending remote layers. Check the documentation for more information and all available options.
When using multiple layers, it's important to understand the override order. Layers with higher priority override layers with lower priority when they define the same files or components.
From highest to lowest priority:
Consider multiple layers defining the same component:
You can prefix layer directories with numbers to control the order:
Alternatively, you can control the order of your ~~/layers directories from nuxt.config by referencing them in extends, without renaming your directories. The entries are ordered like any other extends layer, with the first entry having the highest priority:
Both ~~/... (recommended) and ~/... alias forms as well as relative paths (./layers/admin) are supported. Any layer in ~~/layers that you do not list keeps its alphabetical auto-scan order, ranked below the layers you list in extends.
If you also have ~~/layers/custom, the priority order is:
Build full-stack applications with Nuxt's server framework. You can fetch data from your database or another server, create APIs, or even generate static server-side content like a sitemap or a RSS feed - all from a single codebase.
Nuxt allows pages to be statically rendered at build time to improve certain performance or SEO metrics
Stay updated on new releases and features, guides, and community updates.
Copyright © 2016-2026 Nuxt - MIT License