Feature request: Provide Vue example of Audio Native component (like React guide)

[dosstx]

Please provide a Vue (or Nuxt) example for integrating Audio Native using API method. I'm trying to convert the react version you have, but not much luck at the moment. Thank you.

[thijsw]

Something like this?

<template>
  <div
    id="elevenlabs-audionative-widget"
    :data-height="size === 'small' ? '90' : '120'"
    data-width="100%"
    data-frameborder="no"
    data-scrolling="no"
    :data-publicuserid="publicUserId"
    data-playerurl="https://elevenlabs.io/player/index.html"
    :data-small="size === 'small' ? 'True' : 'False'"
    :data-textcolor="textColorRgba ?? 'rgba(0, 0, 0, 1.0)'"
    :data-backgroundcolor="backgroundColorRgba ?? 'rgba(255, 255, 255, 1.0)'"
  >
    <slot />
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from 'vue'

defineProps({
  publicUserId: {
    type: String,
    required: true
  },

  textColorRgba: {
    type: String,
    required: false
  },

  backgroundColorRgba: {
    type: String,
    required: false
  },

  size: {
    type: String as PropType<'small' | 'large'>,
    required: false
  }
})

useHead({
  script: [
    {
      src: 'https://elevenlabs.io/player/audioNativeHelper.js',
      async: true,
      tagPosition: 'bodyClose'
    }
  ]
})
</script>

[dosstx]

Thank you. I'll give it a try and report back:)