I've run into a problem whilst adding a Iframe that a service I am using has given me. They come in tags. I am using Vue 3 as a framework so when I insert them into the I get an error.
I've tried searching for a solution but the only thing that I've been able to find is this, Ads with script tags in template [Vue.js]. However it is from 2017 and even the solutions posted on there are outdated and do not work.
<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>
The error...
VueCompilerError: Tags with side effect (<script> and <style>) are
ignored in client component templates.
If there is no html elements accompanied you can move this to your own script section e.g.
This may not be required and you can do it another way, e.g. just download it and load it yourself.
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;
},
}