# Plugins and Middleware

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

## New Plugins Format

You can now migrate to the Nuxt 3 plugins API, which is slightly different in format from Nuxt 2.

Plugins now take only one argument (`nuxtApp`). You can find out more in [the docs](/docs/3.x/directory-structure/plugins).

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

<note>

If you want to use the new Nuxt composables (such as [`useNuxtApp`](/docs/3.x/api/composables/use-nuxt-app) or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.

</note>

<warning>

Although a compatibility interface is provided via `nuxtApp.vueApp` you should avoid registering plugins, directives, mixins or components this way without adding your own logic to ensure they are not installed more than once, or this may cause a memory leak.

</warning>

## New Middleware Format

You can now migrate to the Nuxt 3 middleware API, which is slightly different in format from Nuxt 2.

Middleware now take only two argument (`to`, `from`). You can find out more in [the docs](/docs/3.x/directory-structure/middleware).

```tstwoslash
export default defineNuxtRouteMiddleware((to) => {
  if (to.path !== '/') {
    return navigateTo('/')
  }
})
```

<important>

Use of `defineNuxtRouteMiddleware` is not supported outside of the `middleware` directory.

</important>

## definePageMeta

You can also use [`definePageMeta`](/docs/3.x/api/utils/define-page-meta) in Nuxt Bridge.

It can be enabled with the `macros.pageMeta` option in your configuration file

```ts [nuxt.config.ts]
import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    macros: {
      pageMeta: true,
    },
  },
})
```

<note>

But only for `middleware` and `layout`.

</note>