Nuxt/docs/content/3.docs/2.directory-structure/10.plugins.md
2021-10-15 12:14:17 +02:00

1.0 KiB

icon title head.title
IconDirectory plugins Plugins directory

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.

::alert{type=warning} 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
  }
}