useMeta not updating title in Nuxt Composition API

Question

Here is my code inside the Component Script : Title tag doesn't show up when I inspect

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";
        }


    })
 }



} } 

There is no head object in my nuxt.config.js

What am I missing here?

Answer 1

Use it like this in your setup function in your Page component with 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