composables/layers

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

getLayerDirectories function signature

The getLayerDirectories function is exported from '@nuxt/kit' and takes an optional Nuxt instance parameter. If the nuxt parameter is not provided, the function will use the current Nuxt context. The function returns an array of LayerDirectories objects, one for each layer in the application.

LayerDirectories interface properties

LayerDirectories interface contains the following read-only string properties: root (Nuxt rootDir, `/` by default), server (Nitro source directory, `/server` by default), modules (local modules directory, `/modules` by default), shared (shared directory, `/shared` by default), public (public directory, `/public` by default), app (Nuxt srcDir, `/app/` by default), appLayouts (layouts directory, `/app/layouts` by default), appMiddleware (middleware directory, `/app/middleware` by default), appPages (pages directory, `/app/pages` by default), appPlugins (plugins directory, `/app/plugins` by default).

Layer priority ordering in getLayerDirectories

The layers returned by getLayerDirectories are ordered by priority: the first layer is the user/project layer with highest priority, earlier layers override later layers in the array, and base layers appear last in the array with lowest priority. This ordering matches Nuxt's layer resolution system where user-defined configurations and files take precedence over those from base layers.

getLayerDirectories caching performance note

The getLayerDirectories function includes caching via a WeakMap to avoid recomputing directory paths for the same layers repeatedly, improving performance when called multiple times.

getLayerDirectories trailing slash convention

Directory paths returned by getLayerDirectories always include a trailing slash for consistency.

getLayerDirectories usage in module setup

Example showing how to use getLayerDirectories in a Nuxt module to access and process directories from all layers. The function is called within a defineNuxtModule setup function and returns an array that can be iterated to access each layer's directories including root, app, server, appPages, and other directory paths.

getLayerDirectories example: processing component files across layers

Example code showing how to use getLayerDirectories with globby to find all Vue component files across layers, respecting layer priority where layerDirs[0] is the user layer with highest priority and later layers have lower priority: ```ts import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit' import { resolve } from 'pathe' import { globby } from 'globby' export default defineNuxtModule({ async setup () { const layerDirs = getLayerDirectories() const componentFiles = [] for (const [index, layer] of layerDirs.entries()) { const files = await globby('**/*.vue', { cwd: resolve(layer.app, 'components'), absolute: true, }) console.log(`Layer ${index} (${index === 0 ? 'user' : 'base'}):`, files.length, 'components') componentFiles.push(...files) } }, }) ```

getLayerDirectories example: adding templates from multiple layers

Example code showing how to use getLayerDirectories with addTemplate to add a config file from each layer that has one: ```ts import { addTemplate, defineNuxtModule, getLayerDirectories } from '@nuxt/kit' import { basename, resolve } from 'pathe' import { existsSync } from 'node:fs' export default defineNuxtModule({ setup () { const layerDirs = getLayerDirectories() for (const dirs of layerDirs) { const configPath = resolve(dirs.app, 'my-module.config.ts') if (existsSync(configPath)) { addTemplate({ filename: `my-module-${basename(dirs.root)}.config.ts`, src: configPath, }) } } }, }) ```

getLayerDirectories example: respecting layer priority for config files

Example code showing two approaches to respect layer priority when using getLayerDirectories: (1) finding the first highest-priority layer with a config file and using it, and (2) collecting configs from all layers with user layer taking precedence by reversing the array and using Object.assign for merging: ```ts import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit' import { resolve } from 'pathe' import { existsSync, readFileSync } from 'node:fs' export default defineNuxtModule({ setup () { const layerDirs = getLayerDirectories() // Approach 1: Use first (highest priority) config found let configContent = null for (const dirs of layerDirs) { const configPath = resolve(dirs.app, 'my-config.json') if (existsSync(configPath)) { configContent = readFileSync(configPath, 'utf-8') console.log(`Using config from layer: ${dirs.root}`) break } } // Approach 2: Collect configs with user layer taking precedence const allConfigs = {} for (const dirs of layerDirs.reverse()) { const configPath = resolve(dirs.app, 'my-config.json') if (existsSync(configPath)) { const config = JSON.parse(readFileSync(configPath, 'utf-8')) Object.assign(allConfigs, config) } } }, }) ```

getLayerDirectories example: checking for layer-specific directories

Example code showing how to use getLayerDirectories with filter to find layers that have a specific custom directory: ```ts import { defineNuxtModule, getLayerDirectories } from '@nuxt/kit' import { existsSync } from 'node:fs' import { resolve } from 'pathe' export default defineNuxtModule({ setup () { const layerDirs = getLayerDirectories() const layersWithAssets = layerDirs.filter((layer) => { return existsSync(resolve(layer.app, 'assets')) }) console.log(`Found ${layersWithAssets.length} layers with assets directory`) }, }) ```

Give your agent this brain