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

Question

好像Vue Meta has been upgraded to handle Vue.js 3 with a new npm package called vue-3-meta

在Vue.js3之前，在Vue实例中加入vue-meta很容易使用：

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

然而在Vue.js3中，没有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

metaManager 是 vue-meta 的 MetaManager instance created from createMetaManager()。

基于Vue 3 + Vue Router example for vue-meta，下面是一个示例用法：

import { createApp } from 'vue'
import { createMetaManager, defaultConfig, resolveOption, useMeta } from 'vue-meta'

const decisionMaker5000000 = resolveOption((prevValue, context) => {
  const { uid = 0 } = context.vm || {}
  if (!prevValue || prevValue < uid) {
    return uid
  }
})

const metaManager = createMetaManager({
  ...defaultConfig,
  esi: {
    group: true,
    namespaced: true,
    attributes: ['src', 'test', 'text']
  }
}, decisionMaker5000000)

useMeta(
  {
    og: {
      something: 'test'
    }
  },
  metaManager
)

createApp(App).use(metaManager).mount('#app')

Answer 2

免责声明：vue-meta v3 仍处于测试阶段！

这是我入门所需的最少实现：

将 vue-meta 更新到 v3（在 package.json 中）

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

...或纱线：

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' })))
  )
}

另请参阅：

Answer 3

除了之前的答案，我还需要在我的 vue.config.js 中添加一个 transpileDependency，因为我使用的是 vue-cli:

module.exports = {
  transpileDependencies: ['vue-meta']
}

否则，我会得到错误：

error  in ./node_modules/vue-meta/dist/vue-meta.esm-browser.min.js

Module parse failed: Unexpected token (8:7170)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

感谢这个帖子给我指点：

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

How to use Vue 3 Meta with Vue.js 3?

javascript

vue.js

vuejs3

vue-meta

免责声明：vue-meta v3 仍处于测试阶段！

另请参阅：