kit/components

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

addComponentsDir function signature

The addComponentsDir function registers a directory to be scanned for components and imported only when used. It does not register components globally unless the global: true option is specified. The function signature is: function addComponentsDir (dir: ComponentsDir, opts: { prepend?: boolean } = {}): void

addComponentsDir dir parameter properties

The addComponentsDir dir parameter accepts an object with these properties: path (string, required) - absolute or relative path to the directory containing components, can use Nuxt aliases or npm package paths; pattern (string | string[], optional) - pattern run against specified path; ignore (string[], optional) - ignore patterns run against specified path; prefix (string, optional) - prefix all matched components with this string; pathPrefix (boolean, optional) - prefix component name by its path; prefetch (boolean, optional) - configure how components with Lazy prefix are handled by webpack via magic comments in production; preload (boolean, optional) - configure how components with Lazy prefix are handled by webpack via magic comments in production; isAsync (boolean, optional) - indicates component should be loaded async with separate chunk regardless of Lazy prefix; extendComponent (function, optional) - called for each component found, accepts component object and returns component object or promise resolving to component object; global (boolean, optional) - if enabled, registers components globally; island (boolean, optional) - if enabled, registers components as islands; watch (boolean, optional) - watch specified path for changes including file additions and deletions; extensions (string[], optional) - extensions supported by Nuxt builder; transpile ('auto' | boolean, optional) - transpile specified path using build.transpile, 'auto' sets transpile: true if node_modules/ is in path.

addComponentsDir opts parameter properties

The addComponentsDir opts parameter accepts an object with these optional properties: prepend (boolean, optional) - if set to true, the directory will be prepended to the array with unshift() instead of push().

addComponent function signature

The addComponent function registers a component to be automatically imported. The function signature is: function addComponent (options: AddComponentOptions): void

addComponent options parameter properties

The addComponent options parameter accepts an object with these properties: name (string, required) - component name; filePath (string, required) - path to the component; declarationPath (string, optional) - path to component's declaration file used to generate components' type templates, if not provided filePath is used instead; pascalName (string, optional) - Pascal case component name, if not provided it will be generated from the component name; kebabName (string, optional) - Kebab case component name, if not provided it will be generated from the component name; export (string, optional) - specify named or default export, if not provided it will be set to 'default'; shortPath (string, optional) - short path to the component, if not provided it will be generated from the component path; chunkName (string, optional) - chunk name for the component, if not provided it will be generated from the component name; prefetch (boolean, optional) - configure how components with Lazy prefix are handled by webpack via magic comments in production; preload (boolean, optional) - configure how components with Lazy prefix are handled by webpack via magic comments in production; global (boolean, optional) - if enabled, registers component globally; island (boolean, optional) - if enabled, registers component as island; mode ('client' | 'server' | 'all', optional) - indicates if component should render on client, server or both, by default renders on both; priority (number, optional) - priority of the component, if multiple components have the same name, the one with the highest priority will be used.

addComponentsDir usage example

Example of using addComponentsDir in a Nuxt module: ```ts export default defineNuxtModule({ meta: { name: '@nuxt/ui', configKey: 'ui', }, setup () { addComponentsDir({ path: resolve('./runtime/components'), prefix: 'U', pathPrefix: false, }) }, }) ```

addComponent usage example

Example of using addComponent in a Nuxt module: ```ts import { addComponent, createResolver, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ meta: { name: '@nuxt/image', configKey: 'image', }, setup () { const resolver = createResolver(import.meta.url) addComponent({ name: 'NuxtImg', filePath: resolver.resolve('./runtime/components/NuxtImg.vue'), }) addComponent({ name: 'NuxtPicture', filePath: resolver.resolve('./runtime/components/NuxtPicture.vue'), }) }, }) ```

addComponent with named export example

Example of using addComponent to auto-import a component from an npm package with a named export: ```ts import { addComponent, defineNuxtModule } from '@nuxt/kit' export default defineNuxtModule({ setup () { // import { MyComponent as MyAutoImportedComponent } from 'my-npm-package' addComponent({ name: 'MyAutoImportedComponent', export: 'MyComponent', filePath: 'my-npm-package', }) }, }) ```

Give your agent this brain