javascript - 如何在 Vue.js 3 中使用 Vue 3 Meta？

Question

好像Vue Meta已升级为使用名为 vue-3-meta 的新 npm 包处理 Vue.js 3
在 Vue.js 3 之前，它很容易使用 vue-meta通过将其添加到 Vue 实例:

import Vue from 'vue'
import VueMeta from 'vue-meta'
 
Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

但是在 Vue.js 3 中，没有 Vue 实例；而是通过运行 createApp 创建应用程序像这样:

const app = createApp(App);
const router = createVueRouter();

app.use(router);
// need to make app use Vue-Meta here

我找不到 vue-3-meta 的任何文档. import VueMeta from 'vue-meta'不再工作。
如何导入 vue-3-meta正确使用插件并将其与 app 一起使用像以前的版本一样？

Answer 1

免责声明:vue-meta v3仍处于 alpha 阶段!
这是我需要开始的最小实现:

更新 vue-meta到 v3(在 package.json 中)

- "vue-meta": "^2.4.0",
+ "vue-meta": "^3.0.0-alpha.7",

...或使用 yarn :

yarn add vue-meta@alpha

添加 metaManager到 Vue 应用程序

import { createMetaManager } from 'vue-meta'

const app = createApp(App)
  .use(router)
  .use(store)
  .use(createMetaManager()) // add this line

await router.isReady()
app.mount('#app')

添加 <metainfo>到 App.vue <template> (这也是我设置“标题模板”的地方)

<template>
  <metainfo>
    <template v-slot:title="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` }}</template>
  </metainfo>
  <header />
  <router-view />
  <footer />
</template>

在 App.vue 中设置默认元 <script>Vue 3 原版:

import { useMeta } from 'vue-meta'

export default {
  setup () {
    useMeta({
      title: '',
      htmlAttrs: { lang: 'en', amp: true }
    })
  }
}

或与 vue-class-component :

import { setup, Vue } from 'vue-class-component'
import { useMeta } from 'vue-meta'

export default class App extends Vue {
  meta = setup(() => useMeta({
    title: '',
    htmlAttrs: { lang: 'en', amp: true }
  })
}

覆盖每个组件中的元数据
Vue 3 原版:

import { useMeta } from 'vue-meta'

export default {
  setup () {
    useMeta({ title: 'Some Page' })
  }
}

或与 vue-class-component :

import { computed } from '@vue/runtime-core'
import { setup, Vue } from 'vue-class-component'
import { useMeta } from 'vue-meta'

export default class SomePage extends Vue {
  meta = setup(() => useMeta(
    computed(() => ({ title: this.something?.field ?? 'Default' })))
  )
}

也可以看看:

"Quick Usage" (vue-meta next branch)

Vue Router Example (vue-meta next branch)