1

I have a page builder app with Vue and Nuxt.js, one of the components is an embed block that lets you render custom html, it mostly works, but fails when using a script tag. Here's my component:

<template>
  <div
    class="embed-block"
    :class="config.alignment">
    <div
      class="embed-block--wrapper"
      v-html="config.embed"/>
  </div>
</template>

<script>
export default {
  name: 'EmbedBlock',
  props: {
    config: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

For example sending this would work perfectly, rendering the youtube player:

<iframe width="560" height="315" src="https://www.youtube.com/embed/aQkPcPqTq4M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

But sending this, would not:

<div id="buzzsprout-player-2264951"></div><script src="https://www.buzzsprout.com/723057/2264951-episode-2.js?container_id=buzzsprout-player-2264951&player=small" type="text/javascript" charset="utf-8"></script>

EDIT: it seems to be a problem with v-html not renderings script tags, but now, whats the alternative?

Bob Lozano
  • 838
  • 2
  • 13
  • 38
  • I suspect the error has to do with cookies maybe? samesite attribute? I've read a bit of it but even it thats the issue, not sure how to fix that in nuxt :( – Bob Lozano Sep 11 '20 at 11:18
  • Does this answer your question? [How to run script in v-html](https://stackoverflow.com/questions/44595657/how-to-run-script-in-v-html) – Hiws Sep 11 '20 at 11:21

0 Answers0