Plugins directory

Nuxt will automatically read the files in your plugins directory and load them. You can use .server or .client in the file name to load a plugin just on server- or client-side.

All plugins in your plugins/ directory are auto-registered, so you should not add them to your nuxt.config separately.

Creating plugins

The only argument passed to a plugin is nuxtApp .

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
  // Doing something with nuxtApp
})

Typing plugins

If you provide a global property on the nuxt app instance, you can declare the type of this property like this:

import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('hello', msg => `Hello ${msg}!`);
})

declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}
Edit this page on GitHub Updated at Fri, Oct 15, 2021