Nuxt/docs/content/3.docs/2.directory-structure/10.plugins.md

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

Vue plugins

If you want to use Vue plugins, like vue-gtag to add Google analytics tags, you can use a nuxt plugin to do so.

There is an Open RFC to make this even easier! See nuxt/framework#1175

First install the plugin you want.

yarn add --dev vue-gtag

Then create a plugin file plugins/vue-gtag.client.js.

import { defineNuxtPlugin } from "#app";
import VueGtag from "vue-gtag";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    config: {
      id: "GA_MEASUREMENT_ID",
      params: {
        anonymize_ip: true,
      },
    },
  });
});