mirror of
https://github.com/nuxt/nuxt.git
synced 2025-02-18 14:41:25 +00:00
feat(docs): describe components utilities
This commit is contained in:
Andrey Yolkin
parent
b238389040
commit
beef861521
@ -711,8 +711,279 @@ export default defineNuxtModule({
|
||||
|
||||
[source code](https://github.com/nuxt/nuxt/blob/main/packages/kit/src/components.ts)
|
||||
|
||||
- `addComponentsDir(dir)`
|
||||
- `addComponent(componentObject)`
|
||||
### `addComponentsDir`
|
||||
|
||||
Register a directory to be scanned for components and imported only when used. Keep in mind, that this does not register components globally, until you specify `global: true` option.
|
||||
|
||||
#### Type
|
||||
|
||||
```ts
|
||||
async function addComponentsDir (dir: ComponentsDir): void
|
||||
|
||||
interface ComponentsDir {
|
||||
path: string
|
||||
pattern?: string | string[]
|
||||
ignore?: string[]
|
||||
prefix?: string
|
||||
pathPrefix?: boolean
|
||||
enabled?: boolean
|
||||
prefetch?: boolean
|
||||
preload?: boolean
|
||||
isAsync?: boolean
|
||||
extendComponent?: (component: Component) => Promise<Component | void> | (Component | void)
|
||||
global?: boolean
|
||||
island?: boolean
|
||||
watch?: boolean
|
||||
extensions?: string[]
|
||||
transpile?: 'auto' | boolean
|
||||
}
|
||||
|
||||
interface Component {
|
||||
pascalName: string
|
||||
kebabName: string
|
||||
export: string
|
||||
filePath: string
|
||||
shortPath: string
|
||||
chunkName: string
|
||||
prefetch: boolean
|
||||
preload: boolean
|
||||
global?: boolean
|
||||
island?: boolean
|
||||
mode?: 'client' | 'server' | 'all'
|
||||
priority?: number
|
||||
}
|
||||
```
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### `dir`
|
||||
|
||||
**Type**: `ComponentsDir`
|
||||
|
||||
**Required**: `true`
|
||||
|
||||
An object with the following properties:
|
||||
|
||||
- `path` (required)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
Path (absolute or relative) to the directory containing your components.
|
||||
You can use Nuxt aliases (~ or @) to refer to directories inside project or directly use an npm package path similar to require.
|
||||
|
||||
- `pattern` (optional)
|
||||
|
||||
**Type**: `string | string[]`
|
||||
|
||||
Accept Pattern that will be run against specified path.
|
||||
|
||||
- `ignore` (optional)
|
||||
|
||||
**Type**: `string[]`
|
||||
|
||||
Ignore patterns that will be run against specified path.
|
||||
|
||||
- `prefix` (optional)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
Prefix all matched components with this string.
|
||||
|
||||
- `pathPrefix` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
Prefix component name by its path.
|
||||
|
||||
- `enabled` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
Ignore scanning this directory if set to `true`.
|
||||
|
||||
- `prefetch` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments.
|
||||
Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments)
|
||||
|
||||
- `preload` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments.
|
||||
Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments)
|
||||
|
||||
- `isAsync` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
This flag indicates, component should be loaded async (with a separate chunk) regardless of using Lazy prefix or not.
|
||||
|
||||
- `extendComponent` (optional)
|
||||
|
||||
**Type**: `(component: Component) => Promise<Component | void> | (Component | void)`
|
||||
|
||||
A function that will be called for each component found in the directory. It accepts a component object and should return a component object or a promise that resolves to a component object.
|
||||
|
||||
- `global` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
**Default**: `false`
|
||||
|
||||
If enabled, registers components to be globally available.
|
||||
|
||||
- `island` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
If enabled, registers components as islands.
|
||||
|
||||
- `watch` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
Watch specified path for changes, including file additions and file deletions.
|
||||
|
||||
- `extensions` (optional)
|
||||
|
||||
**Type**: `string[]`
|
||||
|
||||
Extensions supported by Nuxt builder.
|
||||
|
||||
- `transpile` (optional)
|
||||
|
||||
**Type**: `'auto' | boolean`
|
||||
|
||||
Transpile specified path using build.transpile. If set to `'auto'`, it will set `transpile: true` if `node_modules/` is in path.
|
||||
|
||||
## `addComponent`
|
||||
|
||||
Register a component to be automatically imported.
|
||||
|
||||
#### Type
|
||||
|
||||
```ts
|
||||
async function addComponent (opts: AddComponentOptions): void
|
||||
|
||||
interface AddComponentOptions {
|
||||
name: string,
|
||||
filePath: string,
|
||||
pascalName?: string,
|
||||
kebabName?: string,
|
||||
export?: string,
|
||||
shortPath?: string,
|
||||
chunkName?: string,
|
||||
prefetch?: boolean,
|
||||
preload?: boolean,
|
||||
global?: boolean,
|
||||
island?: boolean,
|
||||
mode?: 'client' | 'server' | 'all',
|
||||
priority?: number,
|
||||
}
|
||||
```
|
||||
|
||||
#### Parameters
|
||||
|
||||
##### `opts`
|
||||
|
||||
**Type**: `AddComponentOptions`
|
||||
|
||||
**Required**: `true`
|
||||
|
||||
An object with the following properties:
|
||||
|
||||
- `name` (required)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
Component name.
|
||||
|
||||
- `filePath` (required)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
Path to the component.
|
||||
|
||||
- `pascalName` (optional)
|
||||
|
||||
**Type**: `pascalCase(opts.name)`
|
||||
|
||||
Pascal case component name. If not provided, it will be generated from the component name.
|
||||
|
||||
- `kebabName` (optional)
|
||||
|
||||
**Type**: `kebabCase(opts.name)`
|
||||
|
||||
Kebab case component name. If not provided, it will be generated from the component name.
|
||||
|
||||
- `export` (optional)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
**Default**: `'default'`
|
||||
|
||||
Specify named or default export. If not provided, it will be set to `'default'`.
|
||||
|
||||
- `shortPath` (optional)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
Short path to the component. If not provided, it will be generated from the component path.
|
||||
|
||||
- `chunkName` (optional)
|
||||
|
||||
**Type**: `string`
|
||||
|
||||
**Default**: `'components/' + kebabCase(opts.name)`
|
||||
|
||||
Chunk name for the component. If not provided, it will be generated from the component name.
|
||||
|
||||
- `prefetch` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments.
|
||||
Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments)
|
||||
|
||||
- `preload` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
These properties (prefetch/preload) are used in production to configure how components with Lazy prefix are handled by webpack via its magic comments.
|
||||
Learn more on [webpack documentation](https://webpack.js.org/api/module-methods/#magic-comments)
|
||||
|
||||
- `global` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
**Default**: `false`
|
||||
|
||||
If enabled, registers component to be globally available.
|
||||
|
||||
- `island` (optional)
|
||||
|
||||
**Type**: `boolean`
|
||||
|
||||
If enabled, registers component as island. You can read more about islands in [<NuxtIsland/>](/docs/api/components/nuxt-island#nuxtisland) component description.
|
||||
|
||||
- `mode` (optional)
|
||||
|
||||
**Type**: `'client' | 'server' | 'all'`
|
||||
|
||||
**Default**: `'all'`
|
||||
|
||||
This options indicates if component should render on client, server or both. By default, it will render on both client and server.
|
||||
|
||||
- `priority` (optional)
|
||||
|
||||
**Type**: `number`
|
||||
|
||||
**Default**: `1`
|
||||
|
||||
Priority of the component, if multiple components have the same name, the one with the highest priority will be used.
|
||||
|
||||
## Context
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user