How to use dynamic values?

[Fredrik-sfo]

Hi, Probably not an issue but testing this out and can not figure out how add dynamic values in meta.

Base example:

import { defineComponent, computed, reactive } from 'vue'
import { useHead } from '@vueuse/head'

export default defineComponent({
  setup() {
    const siteData = reactive({
      title: `My website`,
      description: `My beautiful website`,
    })

    useHead({
      // Can be static or computed
      title: computed(() => siteData.title),
      meta: [
        {
          name: `description`,
          content: computed(() => siteData.description),
        },
      ],
    })
  },
})

How can you add a variable in title, like:

import { defineComponent, computed, reactive } from 'vue'
import { useHead } from '@vueuse/head'

export default defineComponent({
  setup() {
    const siteData = reactive({
      title: this.title, // Here
      description: `My beautiful website`,
    })

    useHead({
      // Can be static or computed
      title: computed(() => siteData.title),
      meta: [
        {
          name: `description`,
          content: computed(() => siteData.description),
        },
      ],
    })
  },
})

[danielroe]

What is this.title meant to refer to?

[Fredrik-sfo]

Ah, sorry, it's a value from a Json response called from a fetch().

[harlan-zw]

You'll need to fetch data in the setup function to be able to access it for useHead.

Going to close this issue off, if you still need help feel free to re-open with a full code example