feat(meta): add default head values (#382)

Co-authored-by: Pooya Parsa <pyapar@gmail.com>

packages/meta/package.json

@@ -10,9 +10,10 @@
       "require": "./dist/module.js"
     }
   },
-  "types": "./dist/runtime/index.d.ts",
+  "types": "./types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "types.d.ts"
   ],
   "scripts": {
     "prepack": "unbuild"

packages/meta/src/module.ts

@@ -1,17 +1,38 @@
 import { resolve } from 'upath'
-import { defineNuxtModule } from '@nuxt/kit'
+import { addPlugin, addTemplate, defineNuxtModule } from '@nuxt/kit'
+import type { MetaObject } from '@nuxt/meta'
 
 export default defineNuxtModule({
   name: 'meta',
-  setup (_options, nuxt) {
+  defaults: {
+    charset: 'utf-8',
+    viewport: 'width=device-width, initial-scale=1'
+  },
+  setup (options, nuxt) {
     const runtimeDir = resolve(__dirname, 'runtime')
 
+    // Transpile @nuxt/meta
     nuxt.options.build.transpile.push('@nuxt/meta', runtimeDir)
     nuxt.options.alias['@nuxt/meta'] = resolve(runtimeDir, 'index')
 
-    nuxt.hook('app:resolve', (app) => {
-      app.plugins.push({ src: resolve(runtimeDir, 'vueuse-head') })
-      app.plugins.push({ src: resolve(runtimeDir, 'meta') })
+    // Global meta
+    const globalMeta: MetaObject = {
+      meta: [
+        { charset: options.charset },
+        { name: 'viewport', content: options.viewport }
+      ]
+    }
+
+    // Add global meta configuration
+    addTemplate({
+      filename: 'meta.config.mjs',
+      getContents: () => 'export default ' + JSON.stringify({ globalMeta })
     })
+
+    // Add generic plugin
+    addPlugin({ src: resolve(runtimeDir, 'plugin') })
+
+    // Add library specific plugin
+    addPlugin({ src: resolve(runtimeDir, 'lib/vueuse-head.plugin') })
   }
 })

packages/meta/src/runtime/components.ts

@@ -1,5 +1,5 @@
 import { defineComponent, SetupContext } from 'vue'
-import { useMeta } from './index'
+import { useMeta } from './composables'
 
 type Props = Readonly<Record<string, any>>
 

packages/meta/src/runtime/composables.ts

@@ -1,7 +1,8 @@
 // import { useMeta as useVueMeta } from 'vue-meta'
 import { isFunction } from '@vue/shared'
 import { computed, ComputedGetter } from '@vue/reactivity'
-import { useHead } from '@vueuse/head'
+import { useNuxt } from '@nuxt/app'
+import type { MetaObject } from '@nuxt/meta'
 
 /**
  * You can pass in a meta object, which has keys corresponding to meta tags:
@@ -10,16 +11,7 @@ import { useHead } from '@vueuse/head'
  * Alternatively, for reactive meta state, you can pass in a function
  * that returns a meta object.
  */
-export function useMeta (meta: Record<string, any> | ComputedGetter<any>) {
-  // TODO: refine @nuxt/meta API
-
-  // At the moment we force all interaction to happen through passing in
-  // the meta object or function that returns a meta object.
-  const source = isFunction(meta) ? computed(meta) : meta
-
-  // `vue-meta`
-  // useVueMeta(source)
-
-  // `@vueuse/head`
-  useHead(source)
+export function useMeta (meta: MetaObject | ComputedGetter<MetaObject>) {
+  const resolvedMeta = isFunction(meta) ? computed(meta) : meta
+  useNuxt()._useMeta(resolvedMeta)
 }

packages/meta/src/runtime/lib/vue-meta.plugin.ts

@@ -1,12 +1,15 @@
 import { defineNuxtPlugin } from '@nuxt/app'
 import { createApp } from 'vue'
 import { createMetaManager } from 'vue-meta'
+import type { MetaObject } from '@nuxt/meta'
 
 export default defineNuxtPlugin((nuxt) => {
   const manager = createMetaManager(process.server)
 
   nuxt.app.use(manager)
 
+  nuxt._useMeta = (meta: MetaObject) => manager.addMeta(meta)
+
   if (process.client) {
     const teleportTarget = document.createElement('div')
     teleportTarget.id = 'head-target'

packages/meta/src/runtime/lib/vueuse-head.plugin.ts

@@ -1,11 +1,15 @@
 import { createHead, renderHeadToString } from '@vueuse/head'
 import { defineNuxtPlugin } from '@nuxt/app'
+import { ref } from 'vue'
+import type { MetaObject } from '@nuxt/meta'
 
 export default defineNuxtPlugin((nuxt) => {
   const head = createHead()
 
   nuxt.app.use(head)
 
+  nuxt._useMeta = (meta: MetaObject) => head.addHeadObjs(ref(meta as any))
+
   if (process.server) {
     nuxt.ssrContext.renderMeta = () => renderHeadToString(head)
   }

packages/meta/src/runtime/plugin.ts

@@ -1,9 +1,13 @@
 import { getCurrentInstance } from 'vue'
 import { defineNuxtPlugin } from '@nuxt/app'
 import * as Components from './components'
-import { useMeta } from './index'
+import { useMeta } from './composables'
+// @ts-ignore
+import metaConfig from '#build/meta.config.mjs'
 
 export default defineNuxtPlugin((nuxt) => {
+  useMeta(metaConfig.globalMeta)
+
   nuxt.app.mixin({
     created () {
       const instance = getCurrentInstance()

packages/meta/types.d.ts

@@ -0,0 +1,23 @@
+export * from '@nuxt/meta/dist/runtime/composables'
+
+export interface MetaObject extends Record<string, any> {
+  /**
+   * The character encoding in which the document is encoded => `<meta charset="<value>" />`
+   *
+   * @default `'utf-8'`
+   */
+    charset?: string
+    /**
+     * Configuration of the viewport (the area of the window in which web content can be seen),
+     * mapped to => `<meta name="viewport" content="<value>" />`
+     *
+     * @default `'width=device-width, initial-scale=1'`
+     */
+    viewport?: string
+}
+
+declare module '@nuxt/kit' {
+  interface NuxtConfig {
+    meta?: MetaObject,
+  }
+}