Remove script from head onUnmounted

[Logannford]

I have a very niche use case where I need to add a script tag to the head on mount, then remove it on unMount so whenever the component is mounted it is re-added.

For some context I am using Typeform and need to re-add the embed script to the head on every instance of a component mounting within my application.

Below is a snippet of the component that needs to add/remove the script tag.

Any help is appreciated! 🙏

<template>
  <div :data-tf-live="embedId"></div>
</template>

<script setup lang="ts">
import { nanoid } from 'nanoid'

defineProps<{
  embedId: {
    type: String
    required: true
  }
}>()

const id = ref('')

onMounted(() => {
  id.value = nanoid()

  useHead({
    script: [
      {
        src: '//embed.typeform.com/next/embed.js',
        id: id.value
      }
    ]
  })
})

// remove the script on onmount
onUnmounted(() => {
  useHead({
    script: [
      {
        src: '//embed.typeform.com/next/embed.js',
        id: id.value
      }
    ]
  })
})
</script>

[meirroth]

@Logannford Seems to me the script is automagically removed when the component is unmounted.
https://stackblitz.com/edit/nuxt-27107?file=components%2FTypeForm.vue

[meirroth]

BTW, you may not need to wrap useHead with onMounted if you use the built-in Nuxt composable useId().