utils/definenuxtplugin

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

defineNuxtPlugin function signature

defineNuxtPlugin is a helper function for creating Nuxt plugins with enhanced functionality and type safety. The function signature is: export function defineNuxtPlugin<T extends Record<string, unknown>>(plugin: Plugin<T> | ObjectPlugin<T>): Plugin<T> & ObjectPlugin<T>. It accepts either a function-based plugin or an object-based plugin definition and normalizes them into a consistent structure.

Plugin type definition

The Plugin type is defined as: type Plugin<T> = (nuxt: NuxtApp) => Promise<void> | Promise<{ provide?: T }> | void | { provide?: T }. A plugin function receives a NuxtApp instance and can return either void, an object with an optional provide property, or a promise of either.

ObjectPlugin interface definition

The ObjectPlugin interface includes the following properties: name (string, optional), enforce ('pre' | 'default' | 'post', optional), dependsOn (string[], optional), order (number, optional), parallel (boolean, optional), setup (Plugin<T>, optional), hooks (Partial<RuntimeNuxtHooks>, optional), and env ({ islands?: boolean }, optional).

defineNuxtPlugin name property

The name property is an optional string that provides an optional name for the plugin, useful for debugging and dependency management.

defineNuxtPlugin enforce property

The enforce property accepts 'pre', 'default', or 'post' as values and controls when the plugin runs relative to other plugins. It is optional.

defineNuxtPlugin dependsOn property

The dependsOn property accepts an array of plugin names (string[]) that this plugin depends on. It ensures proper execution order by specifying which plugins must run before this one. It is optional.

defineNuxtPlugin order property

The order property accepts a number and allows more granular control over plugin order for advanced users. It overrides the value of enforce and is used to sort plugins. It is optional.

defineNuxtPlugin parallel property

The parallel property accepts a boolean value and determines whether to execute the plugin in parallel with other parallel plugins. It is optional.

defineNuxtPlugin setup property

The setup property accepts a Plugin<T> function, which is the main plugin function equivalent to a function plugin. It is optional.

defineNuxtPlugin hooks property

The hooks property accepts Partial<RuntimeNuxtHooks> and allows registering Nuxt app runtime hooks directly within the plugin configuration. It is optional.

defineNuxtPlugin env property

The env property accepts an object with an optional islands boolean property. Set islands to false if you don't want the plugin to run when rendering server-only or island components. It is optional.

defineNuxtPlugin basic usage example

export default defineNuxtPlugin((nuxtApp) => { return { provide: { hello: (name: string) => `Hello ${name}!`, }, } }) This example demonstrates a simple function-based plugin that adds a global helper method hello to the NuxtApp instance via the provide property.

defineNuxtPlugin object syntax example

export default defineNuxtPlugin({ name: 'my-plugin', enforce: 'pre', async setup (nuxtApp) { const data = await $fetch('/api/config') return { provide: { config: data, }, } }, hooks: { 'app:created' () { console.log('App created!') }, }, }) This example shows an object-based plugin with a name, enforce value of 'pre', an async setup function that fetches API data, and a hook that logs when the app is created.

Give your agent this brain