Me encontré con un problema al agregar un Iframe que me ha dado un servicio que estoy usando. Vienen en etiquetas. Estoy usando Vue 3 como marco, así que cuando los inserto en el recibo un error.
Intenté buscar una solución, pero lo único que pude encontrar es esto, Anuncios con etiquetas de script en la plantilla [Vue.js] . Sin embargo, es de 2017 e incluso las soluciones publicadas allí están desactualizadas y no funcionan.
<script src="//widget.xxxxxx.it/v2/widget/widget.js"></script> <script>var widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/xxxxxxx.simplybook.it","theme":"dainty","theme_settings":{"timeline_show_end_time":"1","timeline_hide_unavailable":"1","hide_past_days":"0","sb_base_color":"#13445b","secondary_color":"#e4ebf5","sb_text_color":"#13445b","display_item_mode":"block","body_bg_color":"#fefbe9","sb_background_image":"","sb_review_image":"","dark_font_color":"#13445b","light_font_color":"#ffffff","sb_company_label_color":"#ffffff","sb_cancellation_color":"#ff7a93","hide_img_mode":"0"},"timeline":"modern","datepicker":"top_calendar","is_rtl":false,"app_config":{"allow_switch_to_ada":0,"predefined":[]}});</script>El error...
VueCompilerError: Tags with side effect (<script> and <style>) are ignored in client component templates.Si no hay elementos html acompañados, puede mover esto a su propia sección de script, por ejemplo
Es posible que esto no sea necesario y puede hacerlo de otra manera, por ejemplo, simplemente descárguelo y cárguelo usted mismo.
npm install require-from-url var requireFromUrl = require('require-from-url/sync'); export defualt { data() { return { widget: null, }; }, mounted() { var SimplybookWidget = requireFromUrl("//widget.xxxxxx.it/v2/widget/widget.js"); this.widget = new SimplybookWidget({"widget_type":"iframe","url":"https:\/\/xxxxxxx.simplybook.it","theme":"dainty","theme_settings":{"timeline_show_end_time":"1","timeline_hide_unavailable":"1","hide_past_days":"0","sb_base_color":"#13445b","secondary_color":"#e4ebf5","sb_text_color":"#13445b","display_item_mode":"block","body_bg_color":"#fefbe9","sb_background_image":"","sb_review_image":"","dark_font_color":"#13445b","light_font_color":"#ffffff","sb_company_label_color":"#ffffff","sb_cancellation_color":"#ff7a93","hide_img_mode":"0"},"timeline":"modern","datepicker":"top_calendar","is_rtl":false,"app_config":{"allow_switch_to_ada":0,"predefined":[]}}); }, destroyed() { this.widget = null; }, }