diff --git a/docs/1.getting-started/9.layers.md b/docs/1.getting-started/9.layers.md index e1fec4fd91..6365b16ad5 100644 --- a/docs/1.getting-started/9.layers.md +++ b/docs/1.getting-started/9.layers.md @@ -18,10 +18,16 @@ One of the core features of Nuxt is the layers and extending support. You can ex ## Usage -By default, any layers within your project in the `~~/layers` directory will be automatically registered as layers in your project +By default, any layers within your project in the `~~/layers` directory will be automatically registered as layers in your project. ::note -Layer auto-registration was introduced in Nuxt v3.12.0 +Layer auto-registration was introduced in Nuxt v3.12.0. +:: + +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`. + +::note +Named layer aliases were introduced in Nuxt v3.16.0. :: In addition, you can extend from a layer by adding the [extends](/docs/api/nuxt-config#extends) property to your [`nuxt.config`](/docs/guide/directory-structure/nuxt-config) file. diff --git a/docs/2.guide/3.going-further/7.layers.md b/docs/2.guide/3.going-further/7.layers.md index f22e64a2ec..36a3211382 100644 --- a/docs/2.guide/3.going-further/7.layers.md +++ b/docs/2.guide/3.going-further/7.layers.md @@ -164,9 +164,25 @@ When publishing the layer as a private npm package, you need to make sure you lo ## Tips +### Named Layer Aliases + +Auto-scanned layers (from your `~~/layers` directory) automatically create aliases. For example, you can access your `~~/layers/test` layer via `#layers/test`. + +If you want to create named layer aliases for other layers, you can specify a name in the configuration of the layer. + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + $meta: { + name: 'example', + }, +}) +``` + +This will produce an alias of `#layers/example` which points to your layer. + ### Relative Paths and Aliases -When importing using aliases (such as `~/` and `@/`) in a layer components and composables, note that aliases are resolved relative to the user's project paths. As a workaround, you can **use relative paths** to import them. We are working on a better solution for named layer aliases. +When importing using global aliases (such as `~/` and `@/`) in a layer components and composables, note that these aliases are resolved relative to the user's project paths. As a workaround, you can **use relative paths** to import them, or use named layer aliases. Also when using relative paths in `nuxt.config` file of a layer, (with exception of nested `extends`) they are resolved relative to user's project instead of the layer. As a workaround, use full resolved paths in `nuxt.config`: diff --git a/packages/kit/src/loader/config.ts b/packages/kit/src/loader/config.ts index f8d892bb3d..5fd9a1dfe4 100644 --- a/packages/kit/src/loader/config.ts +++ b/packages/kit/src/loader/config.ts @@ -7,7 +7,7 @@ import { loadConfig } from 'c12' import type { NuxtConfig, NuxtOptions } from '@nuxt/schema' import { globby } from 'globby' import defu from 'defu' -import { join } from 'pathe' +import { basename, join, relative } from 'pathe' import { isWindows } from 'std-env' import { tryResolveModule } from '../internal/esm' @@ -18,14 +18,11 @@ export interface LoadNuxtConfigOptions extends Omit { // Automatically detect and import layers from `~~/layers/` directory - opts.overrides = defu(opts.overrides, { - _extends: await globby('layers/*', { - onlyDirectories: true, - cwd: opts.cwd || process.cwd(), - }), - }); + const localLayers = await globby('layers/*', { onlyDirectories: true, cwd: opts.cwd || process.cwd() }) + opts.overrides = defu(opts.overrides, { _extends: localLayers }); + (globalThis as any).defineNuxtConfig = (c: any) => c - const result = await loadConfig({ + const { configFile, layers = [], cwd, config: nuxtConfig, meta } = await loadConfig({ name: 'nuxt', configFile: 'nuxt.config', rcFile: '.nuxtrc', @@ -35,13 +32,17 @@ export async function loadNuxtConfig (opts: LoadNuxtConfigOptions): Promise { + it('should add named aliases for local layers', async () => { + const cwd = fileURLToPath(new URL('./layer-fixture', import.meta.url)) + const config = await loadNuxtConfig({ cwd }) + for (const alias in config.alias) { + config.alias[alias] = config.alias[alias]!.replace(cwd, '') + } + expect(config.alias).toMatchInlineSnapshot(` + { + "#build": "/.nuxt", + "#internal/nuxt/paths": "/.nuxt/paths.mjs", + "#layers/layer-fixture": "", + "#layers/test": "/layers/test", + "#shared": "/shared", + "@": "", + "@@": "", + "assets": "/assets", + "public": "/public", + "~": "", + "~~": "", + } + `) + }) +})