# Plugins and Middleware

> Learn how to migrate from Nuxt 2 to Nuxt 3 plugins and middleware.

## Plugins

Plugins now have a different format, and take only one argument (`nuxtApp`).

<code-group>

```ts [Nuxt 2]
export default (ctx, inject) => {
  inject('injected', () => 'my injected function')
}
```

```ts [Nuxt 3]
export default defineNuxtPlugin((nuxtApp) => {
  // now available on `nuxtApp.$injected`
  nuxtApp.provide('injected', () => 'my injected function')

  // You can alternatively use this format, which comes with automatic type support
  return {
    provide: {
      injected: () => 'my injected function',
    },
  }
})
```

</code-group>

<read-more to="/docs/3.x/directory-structure/plugins">



</read-more>

<read-more to="/docs/3.x/api/composables/use-nuxt-app">

Read more about the format of `nuxtApp`.

</read-more>

### Migration

1. Migrate your plugins to use the `defineNuxtPlugin` helper function.
2. Remove any entries in your `nuxt.config` plugins array that are located in your `plugins/` folder. All files in this directory at the top level (and any index files in any subdirectories) will be automatically registered. Instead of setting `mode` to `client` or `server`, you can indicate this in the file name. For example, `~/plugins/my-plugin.client.ts` will only be loaded on client-side.

## Route Middleware

Route middleware has a different format.

<code-group>

```js [Nuxt 2]
export default function ({ store, redirect }) {
  // If the user is not authenticated
  if (!store.state.authenticated) {
    return redirect('/login')
  }
}
```

```ts [Nuxt 3]
export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')
  if (!auth.value.authenticated) {
    return navigateTo('/login')
  }
})
```

</code-group>

Much like Nuxt 2, route middleware placed in your `~/middleware` folder is automatically registered. You can then specify it by name in a component. However, this is done with `definePageMeta` rather than as a component option.

`navigateTo` is one of a number of route helper functions.

<read-more to="/docs/3.x/directory-structure/middleware">



</read-more>

### Migration

1. Migrate your route middleware to use the `defineNuxtRouteMiddleware` helper function.
2. Any global middleware (such as in your `nuxt.config`) can be placed in your `~/middleware` folder with a `.global` extension, for example `~/middleware/auth.global.ts`.