How to add "custom-element" tag to script

[Anjali R]

Hi,
I'm using Nuxt3 to create a web-story for my website and want to import the web-story script async in the head section of the page.
As per the docs, I need to add this to the head,

<script async custom-element="amp-story"
        src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>

I was able to add the src and async, but can't seem to add custom-element. Can you please guide me on how to do it in vueuse head?

Nuxt Page:

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { async: true,src: 'https://cdn.ampproject.org/v0/amp-story-1.0.js' } ]
})
</script>

[Harlan Wilton]

This will work, though custom-element isn't typed so you'll need to ignore the ts error.

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { async: true, src: 'https://cdn.ampproject.org/v0/amp-story-1.0.js', 'custom-element': 'amp-story' } ]
})
</script>

I'll leave this issue open to type the custom-element

[Anjali R]

thanks @harlan-zw

[Harlan Wilton]

Hey @anjali89r

Thanks for the issue, the type definitions are available in zhead 2.0.1 which will land in the next release of @vueuse/head, which should be released soon.