2021-10-11 12:57:54 +00:00
---
icon: IconDirectory
title: 'plugins'
head.title: Plugins directory
---
2021-10-14 17:31:30 +00:00
# Plugins directory
2021-06-08 21:44:30 +00:00
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.
2021-10-14 17:31:30 +00:00
::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
2021-10-15 10:14:17 +00:00
The only argument passed to a plugin is [`nuxtApp` ](/docs/usage/nuxt-app ).
2021-10-14 17:31:30 +00:00
```ts
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:
```ts
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(nuxtApp => {
nuxtApp.provide('hello', msg => `Hello ${msg}!` );
})
declare module '#app' {
interface NuxtApp {
$hello (msg: string): string
}
}
```