Running <script> tags within <template> on vue js-CodePudding

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.

CodePudding user response：

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 {};
    },
    mounted() {
        var SimplybookWidget = requireFromUrl("//widget.xxxxxx.it/v2/widget/widget.js");
        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":[]}});
    },
}

CodePudding user response：

In Vue it generally is not possible to use script-tags within the template-tags.

Instead of using script-tags in HTML, use mounted() to add your JavaScript code to Vue's JavaScript section.

You can find extensive examples here.