Skip to content

Define plugins with object syntax #14628

@pi0

Description

@pi0

Nuxt plugins are async function hooks that run before anything else when initializing Nuxt app. They empower users and module authors to inject components, modify context and run any logic opon app initialization. However, there are limitations with function. A new additional object syntax, can increase possibilities:

export default defineNuxtPlugin({
  name: 'my-plugin',
  enforce: 'after',
  hooks: {},
  islands: false,
  async setup() { }
})

defineNuxtPlugin wrapper (+ a runtime check) can convert plain fn functions into new object format.

Benefits of the new format:

  • Named plugins: in logs and performance timings, we can properly show plugin name
    • Previously depending on Function.name is also possible but tricky
  • Ordering plugins: Plugins can request their expectation order by definition in runtime.
    • Previously was only possible by adjusting names or manually adding to config. Module additions were unshifted as workaround.
  • Hook-driven plugins: Plugins can use hooks for implementation and be orderless
  • Consistency: Format is closer to module and component defnitions with async setup()
  • Declarative behavior: Plugins can declare their custom behavior (such as disabling for islands mode)

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions