From 958ccad570e9f4429e1b8d035f4b495f4616c5b8 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 10:21:46 +0200
Subject: [PATCH 01/13] feat(bridge): use `useMeta` in bridge projects

* includes `nuxt.app` shim and `vue` module that exports composition api functions
---
 packages/bridge/package.json               |  1 +
 packages/bridge/src/global-imports.ts      |  4 +-
 packages/bridge/src/meta.ts                | 62 ++++++++++++++++++++++
 packages/bridge/src/module.ts              | 17 +++++-
 packages/bridge/src/nitro.ts               |  6 ---
 packages/bridge/src/runtime/app.plugin.mjs | 21 ++++++++
 packages/bridge/src/runtime/meta           |  1 +
 packages/bridge/src/runtime/vue.mjs        |  7 +++
 packages/kit/src/config/schema/_app.ts     | 16 ++++++
 packages/nuxt3/src/meta/module.ts          | 11 ++--
 packages/nuxt3/src/meta/runtime/plugin.ts  |  7 +--
 test/fixtures/bridge/pages/index.vue       |  6 +++
 yarn.lock                                  |  1 +
 13 files changed, 143 insertions(+), 17 deletions(-)
 create mode 100644 packages/bridge/src/meta.ts
 create mode 120000 packages/bridge/src/runtime/meta
 create mode 100644 packages/bridge/src/runtime/vue.mjs

diff --git a/packages/bridge/package.json b/packages/bridge/package.json
index f17f512ef71..e11da524f2a 100644
--- a/packages/bridge/package.json
+++ b/packages/bridge/package.json
@@ -19,6 +19,7 @@
     "@nuxt/nitro": "3.0.0",
     "@nuxt/postcss8": "^1.1.3",
     "@vue/composition-api": "^1.2.3",
+    "@vueuse/head": "^0.6.0",
     "acorn": "^8.5.0",
     "defu": "^5.0.0",
     "enhanced-resolve": "^5.8.3",
diff --git a/packages/bridge/src/global-imports.ts b/packages/bridge/src/global-imports.ts
index 5fb4fc2758f..68a1100e013 100644
--- a/packages/bridge/src/global-imports.ts
+++ b/packages/bridge/src/global-imports.ts
@@ -3,7 +3,6 @@ import globalImports from '../../nuxt3/src/global-imports/module'
 
 // TODO: implement these: https://github.com/nuxt/framework/issues/549
 const disabled = [
-  'useMeta',
   'useAsyncData',
   'asyncData'
 ]
@@ -17,6 +16,9 @@ const identifiers = {
     'useRouter',
     'useRuntimeConfig'
   ],
+  '#meta': [
+    'useMeta'
+  ],
   '@vue/composition-api': [
     // lifecycle
     'onActivated',
diff --git a/packages/bridge/src/meta.ts b/packages/bridge/src/meta.ts
new file mode 100644
index 00000000000..13f10023659
--- /dev/null
+++ b/packages/bridge/src/meta.ts
@@ -0,0 +1,62 @@
+import { resolve } from 'pathe'
+import defu from 'defu'
+import { resolveModule, defineNuxtModule, addTemplate, addPlugin } from '@nuxt/kit'
+import type { MetaObject } from '../../nuxt3/src/meta/runtime'
+import { distDir } from './dirs'
+
+const checkDocsMsg = 'Please see https://v3.nuxtjs.org for more information.'
+const msgPrefix = '[bridge] [meta]'
+
+export default defineNuxtModule({
+  name: 'meta',
+  defaults: {
+    charset: 'utf-8',
+    viewport: 'width=device-width, initial-scale=1'
+  },
+  setup (options, nuxt) {
+    // Alias vue to a vue3-compat version of vue2
+    nuxt.options.alias['#vue'] = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
+    nuxt.options.alias['@vue/shared'] = 'vue'
+    nuxt.options.alias['@vue/reactivity'] = 'vue'
+    nuxt.options.alias.vue = resolve(distDir, 'runtime/vue.mjs')
+
+    // Turn off vue-meta and migrate configuration
+    nuxt.options.features.meta = false
+    if (nuxt.options.head) {
+      if (typeof nuxt.options.head === 'function') {
+        throw new TypeError(`${msgPrefix} Please move head() function from \`nuxt.config\` to \`app.vue\`. ${checkDocsMsg}`)
+      } else {
+        console.warn(`${msgPrefix} Please rename \`head\` to \`meta\` in your \`nuxt.config\`. ${checkDocsMsg}`)
+        nuxt.options.meta = defu(nuxt.options.meta, nuxt.options.head)
+      }
+    }
+
+    const runtimeDir = resolve(distDir, 'runtime/meta')
+
+    // Transpile @nuxt/meta and @vueuse/head
+    nuxt.options.build.transpile.push(runtimeDir, 'vue', '@vueuse/head')
+
+    // Add #meta alias
+    nuxt.options.alias['#meta'] = runtimeDir
+
+    // Global meta
+    const globalMeta: MetaObject = defu(nuxt.options.meta, {
+      meta: [
+        { charset: options.charset },
+        { name: 'viewport', content: options.viewport }
+      ]
+    })
+
+    // Add global meta configuration
+    addTemplate({
+      filename: 'meta.config.mjs',
+      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' })
+    })
+
+    // Add generic plugin
+    addPlugin({ src: resolve(runtimeDir, 'plugin') })
+
+    // Add library specific plugin
+    addPlugin({ src: resolve(runtimeDir, 'lib/vueuse-head.plugin') })
+  }
+})
diff --git a/packages/bridge/src/module.ts b/packages/bridge/src/module.ts
index ef843c93b92..6ebe0fd7b17 100644
--- a/packages/bridge/src/module.ts
+++ b/packages/bridge/src/module.ts
@@ -1,11 +1,14 @@
 import { createRequire } from 'module'
-import { defineNuxtModule, installModule, checkNuxtCompatibilityIssues } from '@nuxt/kit'
+import { defineNuxtModule, installModule, checkNuxtCompatibilityIssues, addPluginTemplate } from '@nuxt/kit'
+import { resolve } from 'pathe'
 import { setupNitroBridge } from './nitro'
 import { setupAppBridge } from './app'
 import { setupCAPIBridge } from './capi'
 import { setupBetterResolve } from './resolve'
 import { setupGlobalImports } from './global-imports'
 import { setupTypescript } from './typescript'
+import metaModule from './meta'
+import { distDir } from './dirs'
 
 export interface BridgeConfig {
   nitro: boolean
@@ -13,9 +16,9 @@ export interface BridgeConfig {
   app: boolean | {}
   capi: boolean | {}
   globalImports: boolean
+  meta: boolean
   constraints: boolean
   postcss8: boolean
-  swc: boolean
   resolve: boolean
   typescript: boolean
 }
@@ -30,6 +33,7 @@ export default defineNuxtModule({
     capi: {},
     globalImports: true,
     constraints: true,
+    meta: true,
     // TODO: Remove from 2.16
     postcss8: true,
     typescript: true,
@@ -78,6 +82,15 @@ export default defineNuxtModule({
         }
       })
     }
+    if (opts.meta) {
+      await installModule(nuxt, metaModule)
+    } else if (nuxt.options.features.meta) {
+      // Nitro server plugin (for vue-meta)
+      addPluginTemplate({
+        filename: 'nitro-bridge.server.mjs',
+        src: resolve(distDir, 'runtime/nitro-bridge.server.mjs')
+      })
+    }
   }
 })
 
diff --git a/packages/bridge/src/nitro.ts b/packages/bridge/src/nitro.ts
index a018ea2f2f6..82480ca8eda 100644
--- a/packages/bridge/src/nitro.ts
+++ b/packages/bridge/src/nitro.ts
@@ -80,12 +80,6 @@ export function setupNitroBridge () {
     src: resolve(nitroContext._internal.runtimeDir, 'app/nitro.client.mjs')
   })
 
-  // Nitro server plugin (for vue-meta)
-  addPluginTemplate({
-    filename: 'nitro-bridge.server.mjs',
-    src: resolve(distDir, 'runtime/nitro-bridge.server.mjs')
-  })
-
   // Fix module resolution
   nuxt.hook('webpack:config', (configs) => {
     for (const config of configs) {
diff --git a/packages/bridge/src/runtime/app.plugin.mjs b/packages/bridge/src/runtime/app.plugin.mjs
index 82c18b0ef48..0762815b075 100644
--- a/packages/bridge/src/runtime/app.plugin.mjs
+++ b/packages/bridge/src/runtime/app.plugin.mjs
@@ -1,14 +1,31 @@
+import Vue from 'vue'
 import { createHooks } from 'hookable/dist/index.mjs'
 import { setNuxtInstance } from '#app'
 
 export default (ctx, inject) => {
   const nuxt = {
+    app: {
+      component: Vue.component.bind(Vue),
+      config: {
+        globalProperties: {}
+      },
+      directive: Vue.directive.bind(Vue),
+      mixin: Vue.mixin.bind(Vue),
+      mount: () => {},
+      provide: inject,
+      unmount: () => {},
+      use (vuePlugin) {
+        vuePlugin.install(this)
+      },
+      version: Vue.version
+    },
     provide: inject,
     globalName: 'nuxt',
     payload: process.client ? ctx.nuxtState : ctx.ssrContext.nuxt,
     isHydrating: ctx.isHMR,
     legacyNuxt: ctx.app
   }
+
   nuxt.hooks = createHooks()
   nuxt.hook = nuxt.hooks.hook
   nuxt.callHook = nuxt.hooks.callHook
@@ -17,6 +34,10 @@ export default (ctx, inject) => {
     ctx.app.created = [ctx.app.created]
   }
 
+  if (process.server) {
+    nuxt.ssrContext = ctx.ssrContext
+  }
+
   ctx.app.created.push(function () {
     nuxt.legacyApp = this
   })
diff --git a/packages/bridge/src/runtime/meta b/packages/bridge/src/runtime/meta
new file mode 120000
index 00000000000..211ee41b7fe
--- /dev/null
+++ b/packages/bridge/src/runtime/meta
@@ -0,0 +1 @@
+../../../nuxt3/src/meta/runtime
\ No newline at end of file
diff --git a/packages/bridge/src/runtime/vue.mjs b/packages/bridge/src/runtime/vue.mjs
new file mode 100644
index 00000000000..52d77b5b148
--- /dev/null
+++ b/packages/bridge/src/runtime/vue.mjs
@@ -0,0 +1,7 @@
+import Vue from '#vue'
+
+export * from '@vue/composition-api'
+
+export const isFunction = fn => fn instanceof Function
+
+export { Vue as default }
diff --git a/packages/kit/src/config/schema/_app.ts b/packages/kit/src/config/schema/_app.ts
index e246afa8e60..07cff87001f 100644
--- a/packages/kit/src/config/schema/_app.ts
+++ b/packages/kit/src/config/schema/_app.ts
@@ -103,6 +103,22 @@ export default {
     script: []
   },
 
+  /**
+   * Set default configuration for `<head>` on every page.
+   *
+   * @version 3
+   */
+  meta: {
+    /** Each item in the array maps to a newly-created `<meta>` element, where object properties map to attributes. */
+    meta: [],
+    /** Each item in the array maps to a newly-created `<link>` element, where object properties map to attributes. */
+    link: [],
+    /** Each item in the array maps to a newly-created `<style>` element, where object properties map to attributes. */
+    style: [],
+    /** Each item in the array maps to a newly-created `<script>` element, where object properties map to attributes. */
+    script: []
+  },
+
   /**
    * Configuration for the Nuxt `fetch()` hook.
    * @version 2
diff --git a/packages/nuxt3/src/meta/module.ts b/packages/nuxt3/src/meta/module.ts
index 29928a31349..8490e8bf2d4 100644
--- a/packages/nuxt3/src/meta/module.ts
+++ b/packages/nuxt3/src/meta/module.ts
@@ -1,5 +1,6 @@
 import { resolve } from 'pathe'
-import { addPlugin, addTemplate, defineNuxtModule } from '@nuxt/kit'
+import { addPlugin, addTemplate, defineNuxtModule, isNuxt3 } from '@nuxt/kit'
+import defu from 'defu'
 import { distDir } from '../dirs'
 import type { MetaObject } from './runtime'
 
@@ -10,7 +11,7 @@ export default defineNuxtModule({
     viewport: 'width=device-width, initial-scale=1'
   },
   setup (options, nuxt) {
-    const runtimeDir = resolve(distDir, 'meta/runtime')
+    const runtimeDir = nuxt.options.alias['#meta'] || resolve(distDir, 'meta/runtime')
 
     // Transpile @nuxt/meta and @vueuse/head
     nuxt.options.build.transpile.push(runtimeDir, '@vueuse/head')
@@ -19,17 +20,17 @@ export default defineNuxtModule({
     nuxt.options.alias['#meta'] = runtimeDir
 
     // Global meta
-    const globalMeta: MetaObject = {
+    const globalMeta: MetaObject = defu(nuxt.options.meta, {
       meta: [
         { charset: options.charset },
         { name: 'viewport', content: options.viewport }
       ]
-    }
+    })
 
     // Add global meta configuration
     addTemplate({
       filename: 'meta.config.mjs',
-      getContents: () => 'export default ' + JSON.stringify({ globalMeta })
+      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: isNuxt3() ? 'created' : 'setup' })
     })
 
     // Add generic plugin
diff --git a/packages/nuxt3/src/meta/runtime/plugin.ts b/packages/nuxt3/src/meta/runtime/plugin.ts
index bebdc014035..12bb0ca0a9a 100644
--- a/packages/nuxt3/src/meta/runtime/plugin.ts
+++ b/packages/nuxt3/src/meta/runtime/plugin.ts
@@ -9,11 +9,12 @@ export default defineNuxtPlugin((nuxt) => {
   useMeta(metaConfig.globalMeta)
 
   nuxt.app.mixin({
-    created () {
+    [metaConfig.mixinKey] () {
       const instance = getCurrentInstance()
-      if (!instance?.type || !('head' in instance.type)) { return }
+      const options = instance?.type || /* nuxt2 */ instance?.proxy?.$options
+      if (!options || !('head' in options)) { return }
 
-      useMeta((instance.type as any).head)
+      useMeta(options.head)
     }
   })
 
diff --git a/test/fixtures/bridge/pages/index.vue b/test/fixtures/bridge/pages/index.vue
index ffcbae3164a..ca19fe7c487 100644
--- a/test/fixtures/bridge/pages/index.vue
+++ b/test/fixtures/bridge/pages/index.vue
@@ -3,11 +3,17 @@
 </template>
 
 <script>
+import { useMeta } from '#app'
+
 export default defineComponent({
   setup () {
+    useMeta({ meta: [{ name: 'description', content: 'This is a page to demo Nuxt Bridge.' }] })
     return {
       version: ref('2')
     }
+  },
+  head: {
+    title: 'Bridge test fixture'
   }
 })
 </script>
diff --git a/yarn.lock b/yarn.lock
index 8ee17b1a134..4660978fc49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1427,6 +1427,7 @@ __metadata:
     "@types/fs-extra": ^9.0.13
     "@types/node-fetch": ^3.0.2
     "@vue/composition-api": ^1.2.3
+    "@vueuse/head": ^0.6.0
     acorn: ^8.5.0
     defu: ^5.0.0
     enhanced-resolve: ^5.8.3

From 047d35673ac0fa44f423489f95e7dc2bccbe5223 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:09:08 +0200
Subject: [PATCH 02/13] refactor: allow enabling both nuxt2 `vue-meta` and
 nuxt3 `useMeta` composable

---
 packages/bridge/src/meta.ts                   | 78 +++++++------------
 packages/bridge/src/module.ts                 | 20 ++---
 packages/bridge/src/nitro.ts                  |  6 ++
 .../src/runtime/nitro-bridge.server.mjs       | 50 ++++++++----
 packages/nuxt3/src/app/nuxt.ts                |  2 +
 test/fixtures/bridge/pages/index.vue          |  2 +-
 6 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/packages/bridge/src/meta.ts b/packages/bridge/src/meta.ts
index 13f10023659..904177167da 100644
--- a/packages/bridge/src/meta.ts
+++ b/packages/bridge/src/meta.ts
@@ -1,62 +1,40 @@
 import { resolve } from 'pathe'
-import defu from 'defu'
-import { resolveModule, defineNuxtModule, addTemplate, addPlugin } from '@nuxt/kit'
-import type { MetaObject } from '../../nuxt3/src/meta/runtime'
+import { resolveModule, addTemplate, useNuxt, installModule } from '@nuxt/kit'
+import metaModule from '../../nuxt3/src/meta/module'
 import { distDir } from './dirs'
 
 const checkDocsMsg = 'Please see https://v3.nuxtjs.org for more information.'
 const msgPrefix = '[bridge] [meta]'
 
-export default defineNuxtModule({
-  name: 'meta',
-  defaults: {
-    charset: 'utf-8',
-    viewport: 'width=device-width, initial-scale=1'
-  },
-  setup (options, nuxt) {
-    // Alias vue to a vue3-compat version of vue2
-    nuxt.options.alias['#vue'] = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
-    nuxt.options.alias['@vue/shared'] = 'vue'
-    nuxt.options.alias['@vue/reactivity'] = 'vue'
-    nuxt.options.alias.vue = resolve(distDir, 'runtime/vue.mjs')
-
-    // Turn off vue-meta and migrate configuration
-    nuxt.options.features.meta = false
-    if (nuxt.options.head) {
-      if (typeof nuxt.options.head === 'function') {
-        throw new TypeError(`${msgPrefix} Please move head() function from \`nuxt.config\` to \`app.vue\`. ${checkDocsMsg}`)
-      } else {
-        console.warn(`${msgPrefix} Please rename \`head\` to \`meta\` in your \`nuxt.config\`. ${checkDocsMsg}`)
-        nuxt.options.meta = defu(nuxt.options.meta, nuxt.options.head)
-      }
-    }
-
-    const runtimeDir = resolve(distDir, 'runtime/meta')
-
-    // Transpile @nuxt/meta and @vueuse/head
-    nuxt.options.build.transpile.push(runtimeDir, 'vue', '@vueuse/head')
+export const setupMeta = async (opts: { enable: true | null }) => {
+  const nuxt = useNuxt()
 
-    // Add #meta alias
-    nuxt.options.alias['#meta'] = runtimeDir
-
-    // Global meta
-    const globalMeta: MetaObject = defu(nuxt.options.meta, {
-      meta: [
-        { charset: options.charset },
-        { name: 'viewport', content: options.viewport }
-      ]
+  if (!opts.enable) {
+    const metaPath = addTemplate({
+      filename: 'meta.mjs',
+      getContents: () => `export const useMeta = () => console.warn('${msgPrefix} To use \`useMeta\`, please set \`bridge.meta\` to \`true\` in your \`nuxt.config\`. ${checkDocsMsg}')`
     })
+    console.log(metaPath)
+    nuxt.options.alias['#meta'] = metaPath.dst
+    return
+  }
 
-    // Add global meta configuration
-    addTemplate({
-      filename: 'meta.config.mjs',
-      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: 'setup' })
-    })
+  // Alias vue to a vue3-compat version of vue2
+  nuxt.options.alias['#vue'] = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
+  nuxt.options.alias['@vue/shared'] = 'vue'
+  nuxt.options.alias['@vue/reactivity'] = 'vue'
+  nuxt.options.alias.vue = resolve(distDir, 'runtime/vue.mjs')
 
-    // Add generic plugin
-    addPlugin({ src: resolve(runtimeDir, 'plugin') })
+  nuxt.options.build.transpile.push('vue')
 
-    // Add library specific plugin
-    addPlugin({ src: resolve(runtimeDir, 'lib/vueuse-head.plugin') })
+  if (nuxt.options.head && typeof nuxt.options.head === 'function') {
+    if (typeof nuxt.options.head === 'function') {
+      throw new TypeError(`${msgPrefix} The head() function in \`nuxt.config\` has been deprecated and in nuxt3 will need to be moved to \`app.vue\`. ${checkDocsMsg}`)
+    }
   }
-})
+
+  const runtimeDir = resolve(distDir, 'runtime/meta')
+  nuxt.options.alias['#meta'] = runtimeDir
+
+  await installModule(nuxt, metaModule)
+}
diff --git a/packages/bridge/src/module.ts b/packages/bridge/src/module.ts
index 6ebe0fd7b17..2fa93c64a98 100644
--- a/packages/bridge/src/module.ts
+++ b/packages/bridge/src/module.ts
@@ -1,14 +1,12 @@
 import { createRequire } from 'module'
-import { defineNuxtModule, installModule, checkNuxtCompatibilityIssues, addPluginTemplate } from '@nuxt/kit'
-import { resolve } from 'pathe'
+import { defineNuxtModule, installModule, checkNuxtCompatibilityIssues } from '@nuxt/kit'
 import { setupNitroBridge } from './nitro'
 import { setupAppBridge } from './app'
 import { setupCAPIBridge } from './capi'
 import { setupBetterResolve } from './resolve'
 import { setupGlobalImports } from './global-imports'
 import { setupTypescript } from './typescript'
-import metaModule from './meta'
-import { distDir } from './dirs'
+import { setupMeta } from './meta'
 
 export interface BridgeConfig {
   nitro: boolean
@@ -16,7 +14,7 @@ export interface BridgeConfig {
   app: boolean | {}
   capi: boolean | {}
   globalImports: boolean
-  meta: boolean
+  meta: boolean | null
   constraints: boolean
   postcss8: boolean
   resolve: boolean
@@ -33,7 +31,7 @@ export default defineNuxtModule({
     capi: {},
     globalImports: true,
     constraints: true,
-    meta: true,
+    meta: null,
     // TODO: Remove from 2.16
     postcss8: true,
     typescript: true,
@@ -82,14 +80,8 @@ export default defineNuxtModule({
         }
       })
     }
-    if (opts.meta) {
-      await installModule(nuxt, metaModule)
-    } else if (nuxt.options.features.meta) {
-      // Nitro server plugin (for vue-meta)
-      addPluginTemplate({
-        filename: 'nitro-bridge.server.mjs',
-        src: resolve(distDir, 'runtime/nitro-bridge.server.mjs')
-      })
+    if (opts.meta !== false) {
+      await setupMeta({ enable: opts.meta })
     }
   }
 })
diff --git a/packages/bridge/src/nitro.ts b/packages/bridge/src/nitro.ts
index 82480ca8eda..a018ea2f2f6 100644
--- a/packages/bridge/src/nitro.ts
+++ b/packages/bridge/src/nitro.ts
@@ -80,6 +80,12 @@ export function setupNitroBridge () {
     src: resolve(nitroContext._internal.runtimeDir, 'app/nitro.client.mjs')
   })
 
+  // Nitro server plugin (for vue-meta)
+  addPluginTemplate({
+    filename: 'nitro-bridge.server.mjs',
+    src: resolve(distDir, 'runtime/nitro-bridge.server.mjs')
+  })
+
   // Fix module resolution
   nuxt.hook('webpack:config', (configs) => {
     for (const config of configs) {
diff --git a/packages/bridge/src/runtime/nitro-bridge.server.mjs b/packages/bridge/src/runtime/nitro-bridge.server.mjs
index 1d27b68d886..d0c9a7da23e 100644
--- a/packages/bridge/src/runtime/nitro-bridge.server.mjs
+++ b/packages/bridge/src/runtime/nitro-bridge.server.mjs
@@ -1,27 +1,49 @@
-export default ({ ssrContext }) => {
-  ssrContext.renderMeta = () => {
-    const meta = ssrContext.meta.inject({
-      isSSR: ssrContext.nuxt.serverRendered,
-      ln: process.env.NODE_ENV === 'development'
-    })
+const vueMetaRenderer = (nuxt) => {
+  const meta = nuxt.ssrContext.meta.inject({
+    isSSR: nuxt.ssrContext.nuxt.serverRendered,
+    ln: process.env.NODE_ENV === 'development'
+  })
 
-    return {
-      htmlAttrs: meta.htmlAttrs.text(),
-      headAttrs: meta.headAttrs.text(),
-      headTags:
+  return {
+    htmlAttrs: meta.htmlAttrs.text(),
+    headAttrs: meta.headAttrs.text(),
+    headTags:
         meta.title.text() + meta.base.text() +
         meta.meta.text() + meta.link.text() +
         meta.style.text() + meta.script.text() +
         meta.noscript.text(),
-      bodyAttrs: meta.bodyAttrs.text(),
-      bodyScriptsPrepend:
+    bodyAttrs: meta.bodyAttrs.text(),
+    bodyScriptsPrepend:
         meta.meta.text({ pbody: true }) + meta.link.text({ pbody: true }) +
         meta.style.text({ pbody: true }) + meta.script.text({ pbody: true }) +
         meta.noscript.text({ pbody: true }),
-      bodyScripts:
+    bodyScripts:
         meta.meta.text({ body: true }) + meta.link.text({ body: true }) +
         meta.style.text({ body: true }) + meta.script.text({ body: true }) +
         meta.noscript.text({ body: true })
-    }
   }
 }
+
+export default defineNuxtPlugin((nuxt) => {
+  const metaRenderers = [vueMetaRenderer]
+
+  nuxt.callHook('meta:register', metaRenderers)
+
+  nuxt.ssrContext.renderMeta = async () => {
+    const metadata = {
+      htmlAttrs: '',
+      headAttrs: '',
+      headTags: '',
+      bodyAttrs: '',
+      bodyScriptsPrepend: '',
+      bodyScripts: ''
+    }
+    for await (const renderer of metaRenderers) {
+      const result = await renderer(nuxt)
+      for (const key in result) {
+        metadata[key] += result[key]
+      }
+    }
+    return metadata
+  }
+})
diff --git a/packages/nuxt3/src/app/nuxt.ts b/packages/nuxt3/src/app/nuxt.ts
index 7f5b8c2566b..3c07441aa9a 100644
--- a/packages/nuxt3/src/app/nuxt.ts
+++ b/packages/nuxt3/src/app/nuxt.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-use-before-define */
 import { getCurrentInstance, reactive } from 'vue'
 import type { App, VNode } from 'vue'
 import { createHooks, Hookable } from 'hookable'
@@ -21,6 +22,7 @@ export interface RuntimeNuxtHooks {
   'app:rendered': () => HookResult
   'page:start': (Component?: VNode) => HookResult
   'page:finish': (Component?: VNode) => HookResult
+  'meta:register': (metaRenderers: Array<(nuxt: NuxtApp) => NuxtMeta | Promise<NuxtMeta>>) => HookResult
 }
 
 export interface NuxtApp {
diff --git a/test/fixtures/bridge/pages/index.vue b/test/fixtures/bridge/pages/index.vue
index ca19fe7c487..5838b34e6f3 100644
--- a/test/fixtures/bridge/pages/index.vue
+++ b/test/fixtures/bridge/pages/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { useMeta } from '#app'
+import { useMeta } from '#meta'
 
 export default defineComponent({
   setup () {

From 935769a0bff7f671089bdbe8fe5cac611c2c3942 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:32:39 +0200
Subject: [PATCH 03/13] fix: remove unneeded check

---
 packages/bridge/src/meta.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/bridge/src/meta.ts b/packages/bridge/src/meta.ts
index 904177167da..53db4644cb1 100644
--- a/packages/bridge/src/meta.ts
+++ b/packages/bridge/src/meta.ts
@@ -28,9 +28,7 @@ export const setupMeta = async (opts: { enable: true | null }) => {
   nuxt.options.build.transpile.push('vue')
 
   if (nuxt.options.head && typeof nuxt.options.head === 'function') {
-    if (typeof nuxt.options.head === 'function') {
-      throw new TypeError(`${msgPrefix} The head() function in \`nuxt.config\` has been deprecated and in nuxt3 will need to be moved to \`app.vue\`. ${checkDocsMsg}`)
-    }
+    throw new TypeError(`${msgPrefix} The head() function in \`nuxt.config\` has been deprecated and in nuxt3 will need to be moved to \`app.vue\`. ${checkDocsMsg}`)
   }
 
   const runtimeDir = resolve(distDir, 'runtime/meta')

From c1881b67940ff3e33d8a5f2f15bb6bec2d7cf6a3 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:34:40 +0200
Subject: [PATCH 04/13] refactor: extract vue2/3 compat module to `app.ts`

---
 packages/bridge/src/app.ts  |  9 ++++++---
 packages/bridge/src/meta.ts | 11 +----------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/bridge/src/app.ts b/packages/bridge/src/app.ts
index 09c380df96f..16d2865ed33 100644
--- a/packages/bridge/src/app.ts
+++ b/packages/bridge/src/app.ts
@@ -12,9 +12,12 @@ export function setupAppBridge (_options: any) {
   // Transpile runtime/
   nuxt.options.build.transpile.push(resolve(distDir, 'runtime'))
 
-  // Resolve to same vue2 path
-  nuxt.options.alias.vue = nuxt.options.alias.vue ||
-    resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
+  // Alias vue to a vue3-compat version of vue2
+  nuxt.options.alias['#vue'] = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
+  nuxt.options.alias['@vue/shared'] = 'vue'
+  nuxt.options.alias['@vue/reactivity'] = 'vue'
+  nuxt.options.alias.vue = resolve(distDir, 'runtime/vue.mjs')
+  nuxt.options.build.transpile.push('vue')
 
   // Deprecate various Nuxt options
   if (nuxt.options.globalName !== 'nuxt') {
diff --git a/packages/bridge/src/meta.ts b/packages/bridge/src/meta.ts
index 53db4644cb1..f3cb713ff76 100644
--- a/packages/bridge/src/meta.ts
+++ b/packages/bridge/src/meta.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { resolveModule, addTemplate, useNuxt, installModule } from '@nuxt/kit'
+import { addTemplate, useNuxt, installModule } from '@nuxt/kit'
 import metaModule from '../../nuxt3/src/meta/module'
 import { distDir } from './dirs'
 
@@ -14,19 +14,10 @@ export const setupMeta = async (opts: { enable: true | null }) => {
       filename: 'meta.mjs',
       getContents: () => `export const useMeta = () => console.warn('${msgPrefix} To use \`useMeta\`, please set \`bridge.meta\` to \`true\` in your \`nuxt.config\`. ${checkDocsMsg}')`
     })
-    console.log(metaPath)
     nuxt.options.alias['#meta'] = metaPath.dst
     return
   }
 
-  // Alias vue to a vue3-compat version of vue2
-  nuxt.options.alias['#vue'] = nuxt.options.alias.vue || resolveModule('vue/dist/vue.runtime.esm.js', { paths: nuxt.options.modulesDir })
-  nuxt.options.alias['@vue/shared'] = 'vue'
-  nuxt.options.alias['@vue/reactivity'] = 'vue'
-  nuxt.options.alias.vue = resolve(distDir, 'runtime/vue.mjs')
-
-  nuxt.options.build.transpile.push('vue')
-
   if (nuxt.options.head && typeof nuxt.options.head === 'function') {
     throw new TypeError(`${msgPrefix} The head() function in \`nuxt.config\` has been deprecated and in nuxt3 will need to be moved to \`app.vue\`. ${checkDocsMsg}`)
   }

From 28a11c9eb0939205790a037b4b3d32105342d4ce Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:42:12 +0200
Subject: [PATCH 05/13] refactor: polyfill `vm.type` in vue2

---
 packages/bridge/src/runtime/capi.plugin.mjs | 7 +++++++
 packages/nuxt3/src/meta/runtime/plugin.ts   | 5 ++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/bridge/src/runtime/capi.plugin.mjs b/packages/bridge/src/runtime/capi.plugin.mjs
index cccf64062d8..e0436dd50ba 100644
--- a/packages/bridge/src/runtime/capi.plugin.mjs
+++ b/packages/bridge/src/runtime/capi.plugin.mjs
@@ -3,4 +3,11 @@ import VueCompositionAPI from '@vue/composition-api'
 
 Vue.use(VueCompositionAPI.default || VueCompositionAPI)
 
+Vue.mixin({
+  setup () {
+    const vm = getCurrentInstance()
+    vm.type = vm.type || vm.proxy?.$options
+  }
+})
+
 export default function () {}
diff --git a/packages/nuxt3/src/meta/runtime/plugin.ts b/packages/nuxt3/src/meta/runtime/plugin.ts
index 12bb0ca0a9a..ddcb024de45 100644
--- a/packages/nuxt3/src/meta/runtime/plugin.ts
+++ b/packages/nuxt3/src/meta/runtime/plugin.ts
@@ -9,9 +9,8 @@ export default defineNuxtPlugin((nuxt) => {
   useMeta(metaConfig.globalMeta)
 
   nuxt.app.mixin({
-    [metaConfig.mixinKey] () {
-      const instance = getCurrentInstance()
-      const options = instance?.type || /* nuxt2 */ instance?.proxy?.$options
+    setup () {
+      const options = getCurrentInstance()?.type
       if (!options || !('head' in options)) { return }
 
       useMeta(options.head)

From 4ff2b0c8319e608f65804845d213c5c09c6dc4b5 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:43:08 +0200
Subject: [PATCH 06/13] fix: only enable `useMeta` usage with composition-api
 support

---
 packages/bridge/src/module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge/src/module.ts b/packages/bridge/src/module.ts
index 2fa93c64a98..035aa4636e1 100644
--- a/packages/bridge/src/module.ts
+++ b/packages/bridge/src/module.ts
@@ -80,7 +80,7 @@ export default defineNuxtModule({
         }
       })
     }
-    if (opts.meta !== false) {
+    if (opts.meta !== false && opts.capi) {
       await setupMeta({ enable: opts.meta })
     }
   }

From 4cd0676f2ec5dab4bbe5745c4f7bc5a07daa2691 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:44:23 +0200
Subject: [PATCH 07/13] fix: remove unneeded key

---
 packages/nuxt3/src/meta/module.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt3/src/meta/module.ts b/packages/nuxt3/src/meta/module.ts
index 8490e8bf2d4..03950232a14 100644
--- a/packages/nuxt3/src/meta/module.ts
+++ b/packages/nuxt3/src/meta/module.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { addPlugin, addTemplate, defineNuxtModule, isNuxt3 } from '@nuxt/kit'
+import { addPlugin, addTemplate, defineNuxtModule } from '@nuxt/kit'
 import defu from 'defu'
 import { distDir } from '../dirs'
 import type { MetaObject } from './runtime'
@@ -30,7 +30,7 @@ export default defineNuxtModule({
     // Add global meta configuration
     addTemplate({
       filename: 'meta.config.mjs',
-      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: isNuxt3() ? 'created' : 'setup' })
+      getContents: () => 'export default ' + JSON.stringify({ globalMeta })
     })
 
     // Add generic plugin

From 106e5651e47d7804f0b1fb2595d065236e1acf74 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 12:46:11 +0200
Subject: [PATCH 08/13] fix: revert change to mixin key

---
 packages/nuxt3/src/meta/module.ts         | 4 ++--
 packages/nuxt3/src/meta/runtime/plugin.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt3/src/meta/module.ts b/packages/nuxt3/src/meta/module.ts
index 03950232a14..8490e8bf2d4 100644
--- a/packages/nuxt3/src/meta/module.ts
+++ b/packages/nuxt3/src/meta/module.ts
@@ -1,5 +1,5 @@
 import { resolve } from 'pathe'
-import { addPlugin, addTemplate, defineNuxtModule } from '@nuxt/kit'
+import { addPlugin, addTemplate, defineNuxtModule, isNuxt3 } from '@nuxt/kit'
 import defu from 'defu'
 import { distDir } from '../dirs'
 import type { MetaObject } from './runtime'
@@ -30,7 +30,7 @@ export default defineNuxtModule({
     // Add global meta configuration
     addTemplate({
       filename: 'meta.config.mjs',
-      getContents: () => 'export default ' + JSON.stringify({ globalMeta })
+      getContents: () => 'export default ' + JSON.stringify({ globalMeta, mixinKey: isNuxt3() ? 'created' : 'setup' })
     })
 
     // Add generic plugin
diff --git a/packages/nuxt3/src/meta/runtime/plugin.ts b/packages/nuxt3/src/meta/runtime/plugin.ts
index ddcb024de45..b6b80ce8a14 100644
--- a/packages/nuxt3/src/meta/runtime/plugin.ts
+++ b/packages/nuxt3/src/meta/runtime/plugin.ts
@@ -9,7 +9,7 @@ export default defineNuxtPlugin((nuxt) => {
   useMeta(metaConfig.globalMeta)
 
   nuxt.app.mixin({
-    setup () {
+    [metaConfig.mixinKey] () {
       const options = getCurrentInstance()?.type
       if (!options || !('head' in options)) { return }
 

From ec3ab1ae98a515d1dd9083780c0eef9607e0cb4d Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 13:00:56 +0200
Subject: [PATCH 09/13] refactor: change meta module options syntax

Co-authored-by: Pooya Parsa <pyapar@gmail.com>
---
 packages/bridge/src/meta.ts   | 8 ++++++--
 packages/bridge/src/module.ts | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/bridge/src/meta.ts b/packages/bridge/src/meta.ts
index f3cb713ff76..5a783b2e219 100644
--- a/packages/bridge/src/meta.ts
+++ b/packages/bridge/src/meta.ts
@@ -6,10 +6,14 @@ import { distDir } from './dirs'
 const checkDocsMsg = 'Please see https://v3.nuxtjs.org for more information.'
 const msgPrefix = '[bridge] [meta]'
 
-export const setupMeta = async (opts: { enable: true | null }) => {
+interface SetupMetaOptions {
+  needsExplicitEnable?: boolean
+}
+
+export const setupMeta = async (opts: SetupMetaOptions) => {
   const nuxt = useNuxt()
 
-  if (!opts.enable) {
+  if (!opts.needsExplicitEnable) {
     const metaPath = addTemplate({
       filename: 'meta.mjs',
       getContents: () => `export const useMeta = () => console.warn('${msgPrefix} To use \`useMeta\`, please set \`bridge.meta\` to \`true\` in your \`nuxt.config\`. ${checkDocsMsg}')`
diff --git a/packages/bridge/src/module.ts b/packages/bridge/src/module.ts
index 035aa4636e1..da9b7896822 100644
--- a/packages/bridge/src/module.ts
+++ b/packages/bridge/src/module.ts
@@ -81,7 +81,7 @@ export default defineNuxtModule({
       })
     }
     if (opts.meta !== false && opts.capi) {
-      await setupMeta({ enable: opts.meta })
+      await setupMeta(opts.meta === null ? { needsExplicitEnable: true } : opts.meta)
     }
   }
 })

From 9156bf4793158742799e50c40039c1c5c35ad658 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 13:19:45 +0200
Subject: [PATCH 10/13] Update packages/bridge/src/meta.ts

Co-authored-by: pooya parsa <pyapar@gmail.com>
---
 packages/bridge/src/meta.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge/src/meta.ts b/packages/bridge/src/meta.ts
index 5a783b2e219..be2788221ab 100644
--- a/packages/bridge/src/meta.ts
+++ b/packages/bridge/src/meta.ts
@@ -13,7 +13,7 @@ interface SetupMetaOptions {
 export const setupMeta = async (opts: SetupMetaOptions) => {
   const nuxt = useNuxt()
 
-  if (!opts.needsExplicitEnable) {
+  if (opts.needsExplicitEnable) {
     const metaPath = addTemplate({
       filename: 'meta.mjs',
       getContents: () => `export const useMeta = () => console.warn('${msgPrefix} To use \`useMeta\`, please set \`bridge.meta\` to \`true\` in your \`nuxt.config\`. ${checkDocsMsg}')`

From d44ca57fb71ea30a3b37f7a18620120e805026c7 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 14:01:14 +0200
Subject: [PATCH 11/13] fix: type error

---
 packages/bridge/src/module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bridge/src/module.ts b/packages/bridge/src/module.ts
index da9b7896822..331b96ff366 100644
--- a/packages/bridge/src/module.ts
+++ b/packages/bridge/src/module.ts
@@ -81,7 +81,7 @@ export default defineNuxtModule({
       })
     }
     if (opts.meta !== false && opts.capi) {
-      await setupMeta(opts.meta === null ? { needsExplicitEnable: true } : opts.meta)
+      await setupMeta({ needsExplicitEnable: opts.meta === null })
     }
   }
 })

From a6bba4cc4f52060e78f766ae0f4f3af0dce94a15 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 6 Oct 2021 14:02:18 +0200
Subject: [PATCH 12/13] fix: revert mixin change (pending followup pr)

---
 packages/bridge/src/runtime/capi.plugin.mjs | 7 -------
 packages/nuxt3/src/meta/runtime/plugin.ts   | 3 ++-
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/bridge/src/runtime/capi.plugin.mjs b/packages/bridge/src/runtime/capi.plugin.mjs
index e0436dd50ba..cccf64062d8 100644
--- a/packages/bridge/src/runtime/capi.plugin.mjs
+++ b/packages/bridge/src/runtime/capi.plugin.mjs
@@ -3,11 +3,4 @@ import VueCompositionAPI from '@vue/composition-api'
 
 Vue.use(VueCompositionAPI.default || VueCompositionAPI)
 
-Vue.mixin({
-  setup () {
-    const vm = getCurrentInstance()
-    vm.type = vm.type || vm.proxy?.$options
-  }
-})
-
 export default function () {}
diff --git a/packages/nuxt3/src/meta/runtime/plugin.ts b/packages/nuxt3/src/meta/runtime/plugin.ts
index b6b80ce8a14..12bb0ca0a9a 100644
--- a/packages/nuxt3/src/meta/runtime/plugin.ts
+++ b/packages/nuxt3/src/meta/runtime/plugin.ts
@@ -10,7 +10,8 @@ export default defineNuxtPlugin((nuxt) => {
 
   nuxt.app.mixin({
     [metaConfig.mixinKey] () {
-      const options = getCurrentInstance()?.type
+      const instance = getCurrentInstance()
+      const options = instance?.type || /* nuxt2 */ instance?.proxy?.$options
       if (!options || !('head' in options)) { return }
 
       useMeta(options.head)

From f1ba4ad4ceef2d2c70eb87df271784d58f917128 Mon Sep 17 00:00:00 2001
From: Pooya Parsa <pyapar@gmail.com>
Date: Wed, 6 Oct 2021 14:35:02 +0200
Subject: [PATCH 13/13] fix: add meta type

---
 packages/bridge/types.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bridge/types.d.ts b/packages/bridge/types.d.ts
index b0f4602a5aa..cfacb5968a3 100644
--- a/packages/bridge/types.d.ts
+++ b/packages/bridge/types.d.ts
@@ -11,6 +11,7 @@ export interface BridgeConfig {
   swc: boolean
   resolve: boolean
   typescript: boolean
+  meta: boolean | null
 }
 
 // TODO: Also inherit from @nuxt/types.NuxtConfig for legacy type compat