Nuxt/docs/content/3.docs/2.directory-structure/10.plugins.md
Daniel Roe 6e787c20ec
docs: add nuxtApp and plugin docs (#1024)
Co-authored-by: Pooya Parsa <pyapar@gmail.com>
2021-10-14 19:31:30 +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]((/usage/nuxt-app)

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
  }
}