feat: improve the head API

[chanlito]

Currently according to the README useHead() is being used outside of the component.

Usually functions starting with useXXX are composition API used inside components.
Which to me, I think it might cause confusion.

I think the API would be cleaner like the following, but not sure if the implementation is possible.
Just giving my opinion.

import { defineComponent, head, useMeta } from 'nuxt-composition-api';

export default defineComponent({
  // this line is needed!
  head,
  setup() {
    // This will allow you to set the title in head - but won't allow you to read its state outside of this component.
    const { title } = useMeta()

    title.value = 'newSetTitle'
  },
})

[mathe42]

Yes it would be cleaner. If we can get your API we can also remove head. But that is currently not posible as far as I know...

[danielroe]

I think we could produce a modified defineComponent that would have a number of use cases, including this one. Would need to be very careful with performance.

[mathe42]

Maybe we can add a definePage wrapper that can handle head, asyncData.

[katerlouis]

I think we could produce a modified defineComponent that would have a number of use cases, including this one. Would need to be very careful with performance.

What other use cases are you talking about? I cannot find any information regarding a modified defineComponent in the docs

[mathe42]

see https://github.com/nuxt-community/composition-api/blob/main/src/runtime/composables/component.ts we don't reexport the defineComponent function from @vue/composition-api but extend it with some logic for the head.

Other usecases / ideas got droped.