vue.js - 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中没有head对象

我在这里错过了什么？

Answer 1

在带有 defineComponent 的 Page 组件的设置函数中使用它:

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