Plugins

Files in plugins/ run on app initialization. Use them to register Vue plugins, set up third-party clients, or provide helpers globally.

4 min read Level 3/5 #nuxt#plugins

What you'll learn

Create a plugin file with the correct client or server suffix
Use defineNuxtPlugin to register setup logic
Provide values via nuxtApp.provide and read them with useNuxtApp

Plugins are how you run code once when the Nuxt app boots — on the server, on the client, or both. They’re the right place for analytics SDKs, error reporting, and Vue plugin registration.

A Basic Plugin

// plugins/clarity.client.ts
export default defineNuxtPlugin(() => {
  // runs once on the client when the app mounts
  startClarity('your-project-id')
})

The .client.ts suffix scopes the plugin to the browser. Use .server.ts for server-only code, or no suffix for both.

Registering a Vue Plugin

// plugins/floating-vue.ts
import FloatingVue from 'floating-vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(FloatingVue)
})

nuxtApp.vueApp is the underlying Vue app instance — anything app.use(...) accepts works here.

Providing Helpers

provide exposes a value globally as $name:

// plugins/hello.ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (name: string) => `Hi ${name}`,
    },
  }
})

Use it anywhere:

<script setup lang="ts">
const { $hello } = useNuxtApp()
console.log($hello('Ada'))
</script>

Ordering Plugins

Plugins run in alphabetical order. For dependencies, prefix with numbers (01.foo.ts, 02.bar.ts) or use the object form with dependsOn and a name:

export default defineNuxtPlugin({
  name: 'analytics',
  dependsOn: ['auth'],
  setup() {
    /* ... */
  },
})

Modules — Installing & Using →