How can I load a third-party element using a script tag in Vue?

I’m building a website and want to display a widget linking to a podcast from BuzzSprout. I built the site in HTML while trying out designs and now am trying to convert it to VueJS.

In HTML only, this was the element and script tag that displayed the widget:

    <div id="buzzsprout-large-player-1717833"></div>
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large"
    ></script>

When I’ve tried to wrap this into a Vue component, I get the following error:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

I’m pretty new to Vue, so there’s a good chance I’ve just missed something as to how this needs to be set up.

Could anyone give me a pointer on how I need to rearrange this to successfully render the widget?

Thanks, Mark

EDIT

Full component code for Widget.vue:

<template>
  <div class="episodeWidget">
    <div class="page-heading">
      <h1>Episodes</h1>
    </div>
    <p>
      <strong>
        Here you'll find everything that we've got to show for our efforts. A
        pantheon of admittedly mediocre content.
      </strong>
    </p>
    <p>Just pick an episode of your choice and hit play!</p>
    <!--<div id="buzzsprout-large-player-1717833"></div>
    <script
      type="text/javascript"
      charset="utf-8"
      src="https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large"
    ></script>-->
  </div>
</template>

<script>
export default {
  name: "EpisodeWidget",
  props: {
    msg: String,
  },
};
</script>

Answer

It would be better to insert the <script> tag into your page using JS – you can add something like this into your component’s created() hook, for example:

const scriptTag = document.createElement('script');
scriptTag.src = 'https://www.buzzsprout.com/1717833.js?container_id=buzzsprout-large-player-1717833&amp;player=large';
scriptTag.setAttribute('charset', 'utf-8');
document.head.appendChild(scriptTag);

You can leave the HTML snippet in your component template: <div id="buzzsprout-large-player-1717833"></div>

Leave a Reply

Your email address will not be published. Required fields are marked *