useMeta 未更新 Nuxt Composition 中的标题 API

Question

这是我在组件脚本中的代码：我检查时没有显示标题标签

import {  useMeta } from "@nuxtjs/composition-api";

export default {
 components: {  }, 

head: {},

setup() {

useMeta({
        title: 'My title',
        meta: [
            {
                hid: 'description',
                name: 'description',
                content: 'My description',
            },
        ],
    })


const screenType = ref("desktop");
var deviceType = ""
// const screenType = ref("mobile")
// const screenType = ref("landscape")

if (process.browser) {
    window.onNuxtReady(() => {
        if (window.innerWidth < 500) {
        screenType.value = "mobile";
        } else {
        screenType.value = "desktop";
        }

       
        

        if (navigator.userAgent.match(/mobile/i)) {
            deviceType =  "mobile";
        } else if (navigator.userAgent.match(/iPad|Android|Touch/i)) {
            deviceType = "tablet";
        } else {
            deviceType = "desktop";
        }


    })
 }



} }

我的nuxt.config.js

里面没有头object

我在这里错过了什么？

Answer 1

在页面组件的设置函数中像这样使用 defineComponent :

export default defineComponent({
    head: {}, // Needed in nuxt 2
    setup() {
        const { title, meta } = useMeta()
        title.value = 'My title'
        meta.value = [
            {
            hid: 'description',
            name: 'description',
            content:
                'My description',
            },
        ]
    },
  })

https://composition-api.nuxtjs.org/packages/useMeta

Answer 2

您应该使用从“@nuxtjs/composition-api”导入的 defineComponent。不要使用从“@vue/composition-api”导入的 defineComponent。

useMeta 未更新 Nuxt Composition 中的标题 API

useMeta not updating title in Nuxt Composition API

meta-tags

vue.js

nuxt.js