Nuxt UI Pro v1.0 is out with 50+ Vue components.

Layers

Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.

One of the core features of Nuxt 3 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.

Use Cases

  • Share reusable configuration presets across projects using nuxt.config and app.config
  • Create a component library using components/ directory
  • Create utility and composable library using composables/ and utils/ directories
  • Create Nuxt module presets
  • Share standard setup across projects
  • Create Nuxt themes

Usage

You can extend a layer by adding the extends property to the nuxt.config.ts file.

nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    '../base',                     // Extend from a local layer
    '@my-themes/awesome',          // Extend from an installed npm package
    'github:my-themes/awesome#v1', // Extend from a git repository
  ]
})

You can also pass an authentication token if you are extending from a private GitHub repository:

nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    // per layer configuration
    ['github:my-themes/private-awesome', { auth: process.env.GITHUB_TOKEN }]
  ]
})

Nuxt uses unjs/c12 and unjs/giget for extending remote layers. Check the documentation for more information and all available options.

Read more about layers in the Layer Author Guide.
Watch Learn Vue video about Nuxt Layers.

Examples

Content Wind Theme

A lightweight Nuxt theme to build a Markdown driven website. Powered by Nuxt Content, TailwindCSS and Iconify.