Nuxt Layers Utils
Simplify and consolidate Nuxt layers paths' configuration
Overview
Nuxt Layers are great to modularise your applications, but they can be fiddly, verbose and repetitive to configure.
Nuxt Layers Utils is a utility package that provides a standardized interface for generating path-specific configurations, making it simple to work with multiple layers in complex project structures.
The package streamlines the configuration of Nuxt layers by providing utility methods that handle layer extends, path aliases, folder reconfiguration, and auto-imports through a clean, intuitive API.
Usage
The core of the library is the useLayers() function which takes your layer paths and returns a configuration object:
import { useLayers } from 'nuxt-layers-utils'
const layers = useLayers(__dirname, {
core: 'core',
blog: 'layers/blog',
site: 'layers/site',
})This can then be used to generate layer configurations for Nuxt:
export default defineNuxtConfig({
extends: layers.extends(),
alias: layers.alias('#'),
})Done manually, you'd need something like this:
export default defineNuxtConfig({
extends: [
'core',
'layers/blog',
'layers/site'
],
alias: {
'#core': '/Volumes/Projects/some-project/core',
'#blog': '/Volumes/Projects/some-project/layers/blog',
'#site': '/Volumes/Projects/some-project/layers/site',
},
})API
Nuxt Layers comes with a slew of config and utility functions to generate output for anything that requires paths:
| Layer Utils API | Generates Nuxt Config | Purpose |
|---|---|---|
extends() | extends | Generates the folder paths which Nuxt should treat as layers |
alias() | alias | Generates path aliases for named layers and arbitrary folders |
dir() | dir | Reconfigures Nuxt's core default folders |
dirPath() | dir[folder] | Generate a single relative path from a named layer |
importsDirs() | imports.dirs | Determines which folders should be auto-imported by Nuxt |
components() | components | Override default component naming and registration |
contentSources() | content.sources | Generates Nuxt Content sources |
viteResolveAlias() | vite.resolve.alias | Determines which folders should be auto-imported by Nuxt |
See the documentation for more details.