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

Question

似乎Vue Meta已经升级为使用名为的新 npm 包来处理 Vue.js 3vue-3-meta

vue-meta在 Vue.js 3 之前，通过将其添加到 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 阶段！

这是我需要开始的最小实现：

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

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

   ...或使用纱线：

   yarn add vue-meta@alpha
   

2. 添加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')
   

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

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

4. 在 App.vue <script>
   Vue 3 vanilla 中设置默认元数据：

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

5. 覆盖每个组件中的元
   Vue 3 vanilla：

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

也可以看看：

• “快速使用”（vue-metanext分支）
• Vue 路由器示例（vue-metanext分支）

Answer 2

除了前面的答案，我还需要transpileDependency在我的 中添加一个vue.config.js，因为我正在使用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

感谢这个线程指向我这个：https ://stackoverflow.com/a/65844988/3433137

Answer 3

metaManager是从ofMetaManager创建的实例。createMetaManager()vue-meta

基于Vue 3 + Vue Router示例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')