Defining `head` property in Nuxt

As you probably know, in @nuxtjs/composition-api you must add an empty head: {} to use the useMeta composition function.

Maybe it’s going over my head but, is there any way at the moment to do this with <script setup>?

[antfu]

<script setup> allow the co-existence with the normal <script>, meaning you can use this as a current workaround:

<script setup>
import { useMeta } from  '@nuxtjs/composition-api'

useMeta({ ... })
</script>

<script>
export default {
  head: {}
}
</script>

/cc @danielroe do you see if there is a way to by pass this limitation or we have to do that in compile time?

[yinfoyuan]

<script lang="ts" setup>
import { useContext, useAsync, ref, useMeta, defineComponent } from '@nuxtjs/composition-api'

const { $axios } = useContext()

const fontUrl = ref<string>('')
const title = ref('a')

useAsync(async () => {
  title.value = 'b'
  fontUrl.value = await $axios.$get('/xxx')
})

useMeta(() => ({
  title: title.value
}))

</script>

<script lang="ts">
export default defineComponent({
  head: {}
})
</script>

import { defineComponent as defineComponent$1 } from '@nuxtjs/composition-api'

declare global {
  const defineComponent: typeof defineComponent$1
}

I worked it out for now