Skip to content

Latest commit

 

History

History
66 lines (53 loc) · 2.52 KB

9.layers.md

File metadata and controls

66 lines (53 loc) · 2.52 KB
Raw
title description navigation.icon
Layers
Nuxt provides a powerful system that allows you to extend the default files, configs, and much more.
i-ph-stack-duotone

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.

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:

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

This uses giget under the hood for authenticating access to private repositories. For more information about this, visit the documentation on "Providing token for private repositories"

::read-more{to="/docs/guide/going-further/layers"} Read more about layers in the Layer Author Guide. ::

::tip{icon="i-ph-video-duotone" to="https://www.youtube.com/watch?v=lnFCM7c9f7I" target="_blank"} Watch Learn Vue video about Nuxt Layers. ::

Examples

::card-group ::card

icon: i-simple-icons-github title: Content Wind Theme to: https://github.com/Atinux/content-wind target: _blank ui.icon.base: text-black dark:text-white

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