plugins
Nuxt will automatically read the files in your plugins directory and load them.
You can use .server
or .client
suffix in the file name to load a plugin only on the server or client side.
Which files are registered
Only files at the top level of the plugins/
directory (or index files within any subdirectories) will be registered as plugins.
For example:
plugins | - myPlugin.ts | - myOtherPlugin | --- supportingFile.ts | --- componentToRegister.vue | --- index.ts
Only myPlugin.ts
and myOtherPlugin/index.ts
would be registered.
Creating plugins
The only argument passed to a plugin is nuxtApp
.
export default defineNuxtPlugin(nuxtApp => { // Doing something with nuxtApp})
Automatically providing helpers
If you would like to provide a helper on the NuxtApp
instance, return it from the plugin under a provide
key. For example:
export default defineNuxtPlugin(() => { return { provide: { hello: (msg: string) => `Hello ${msg}!` } }})
In another file you can use this:
<template> <div> {{ $hello('world') }} </div></template><script setup lang="ts">// alternatively, you can also use it hereconst { $hello } = useNuxtApp()</script>
Typing plugins
If you return your helpers from the plugin, they will be typed automatically; you'll find them typed for the return of useNuxtApp()
and within your templates.
Advanced
For advanced use-cases, you can declare the type of injected properties like this:
declare module '#app' { interface NuxtApp { $hello (msg: string): string }}declare module '@vue/runtime-core' { interface ComponentCustomProperties { $hello (msg: string): string }}export { }
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-next
Then create a plugin file plugins/vue-gtag.client.js
.
import VueGtag from 'vue-gtag-next'export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueGtag, { property: { id: 'GA_MEASUREMENT_ID' } })})
Vue directives
Similarly, you can register a custom Vue directive in a plugin. For example, in plugins/directive.ts
:
export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.directive('focus', { mounted (el) { el.focus() }, getSSRProps (binding, vnode) { // you can provide SSR-specific props here return {} } })})