Defining `head` property in Nuxt

[arpadgabor]

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?

[mirabledictu]

How about the Nuxt middleware property?

Edit: My bad didn't see the workaround.

<script setup>
// my code
</script>

<script>
export default {
  middleware: '..',
  layout: '..'
}
</script>

[arpadgabor]

Just tried your suggestion @antfu, but useMeta seems to be ignored.

// nuxt.config.js
head: {
  title: 'Hello there'
}

// pages/index.vue

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

useMeta({
  title: 'General Kenobi', // ignored
})
</script>

<script lang="ts">
export default {
  head: {}, // the title only changes if I put it here.
}
</script>

Here is a codesandbox.

Also, trying to write a component with defineComponent breaks build: Fixed in latest release

 ERROR  Cannot overwrite a zero-length range – use appendLeft or prependRight instead                                                                                                                           18:33:47

  at MagicString.overwrite (node_modules/magic-string/dist/magic-string.cjs.js:657:11)
  at transform (node_modules/vue2-script-setup-transform/dist/chunk-YQNABFGI.js:461:5)
  at Object.transform (node_modules/vue2-script-setup-transform/dist/chunk-CIXBJ6SU.js:16:41)
  at Object.transform (node_modules/vue2-script-setup-transform/node_modules/unplugin/dist/webpack/loaders/transform.cjs:11:28)
  at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
  at runSyncOrAsync (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
  at iterateNormalLoaders (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
  at Array.<anonymous> (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
  at Storage.finished (node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
  at node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
  at node_modules/graceful-fs/graceful-fs.js:123:16
  at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)

[mirabledictu]

Just tried your suggestion @antfu, but useMeta seems to be ignored.

// nuxt.config.js
head: {
  title: 'Hello there'
}

// pages/index.vue

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

useMeta({
  title: 'General Kenobi', // ignored
})
</script>

<script lang="ts">
export default {
  head: {}, // the title only changes if I put it here.
}
</script>

Here is a codesandbox.

Also, trying to write a component with defineComponent breaks build: Fixed in latest release

 ERROR  Cannot overwrite a zero-length range – use appendLeft or prependRight instead                                                                                                                           18:33:47

  at MagicString.overwrite (node_modules/magic-string/dist/magic-string.cjs.js:657:11)
  at transform (node_modules/vue2-script-setup-transform/dist/chunk-YQNABFGI.js:461:5)
  at Object.transform (node_modules/vue2-script-setup-transform/dist/chunk-CIXBJ6SU.js:16:41)
  at Object.transform (node_modules/vue2-script-setup-transform/node_modules/unplugin/dist/webpack/loaders/transform.cjs:11:28)
  at LOADER_EXECUTION (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:119:14)
  at runSyncOrAsync (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:120:4)
  at iterateNormalLoaders (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
  at Array.<anonymous> (node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
  at Storage.finished (node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
  at node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
  at node_modules/graceful-fs/graceful-fs.js:123:16
  at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)

hi, is the workaround really working?

[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

[acidjazz]

<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?

This should be in the docs! I was trying forever to figure out how to specify a layout:

<script lang="ts" setup>
const ctx = useContext()
function logout (): void {
  ctx.$auth.logout('local')
  ctx.$toast.success('Logout Successful')
}
</script>

<script lang="ts">
export default { layout: 'user' }
</script>