Как вставить готовый iframe в шаблон Vue3/Nuxt3?

Чтобы вставить готовый iframe в шаблон Vue.js 3 или Nuxt.js 3, вам понадобится использовать директиву v-html или v-bind:innerHTML в сочетании с использованием тройных скобок для привязки контента.

Вот пример:

<template>
  <div>
    <div v-html="iframeCode"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeCode: '<iframe src="https://www.example.com"></iframe>'
    };
  }
};
</script>

В этом примере мы используем директиву v-html, чтобы связать содержимое div с переменной iframeCode. Таким образом, содержимое переменной iframeCode будет отображаться внутри div, и в нашем случае это будет готовый код iframe.

Вы также можете использовать v-bind:innerHTML вместо директивы v-html:

<template>
  <div>
    <div :innerHTML="iframeCode"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeCode: '<iframe src="https://www.example.com"></iframe>'
    };
  }
};
</script>

Обратите внимание, что использование v-html или v-bind:innerHTML может быть потенциально опасным, если вы вставляете контент, полученный от пользователя. В этом случае важно правильно обрабатывать и проверять входные данные, чтобы предотвратить возможные атаки внедрения кода.

Кроме того, убедитесь, что вы используете правильное значение src в теге iframe. Замените "https://www.example.com" на реальный URL вашего iframe.