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

Question

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.

Is that the full widget code or is there a html element accompanied — Michael Mano
– Michael Mano, Commented Mar 10, 2022 at 22:35
Normally when I put inside of normal html it works directly, however when I do it in vue it doesn't work. I wrap everything inside of <template><div><script</script></div></template> but vue doesn't like that... — DMantas
– DMantas, Commented Mar 10, 2022 at 22:38

EduDev · Accepted Answer · 2024-07-09 08:54:43Z

3

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.

Example:

<template>
    <div>
        <h1>Hello Vue.js!</h1>
    </div>
</template>

<script>
    export default {
        mounted() {
            const script = document.createElement("script");
            script.src =
"https://cdn.jsdelivr.net/npm/[email protected]/src/index.min.js";
            document.body.appendChild(script);
        },
    };
</script>

edited Jul 9, 2024 at 8:54

answered Mar 11, 2022 at 17:51

EduDev

3442 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J Foley Over a year ago

hyperlink no longer working

Christoph · Accepted Answer · 2022-09-09 03:29:44Z

-1

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 default {
    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;
    },
}

edited Sep 9, 2022 at 3:29

Christoph

2,3671 gold badge19 silver badges28 bronze badges

answered Mar 10, 2022 at 22:40

Michael Mano

3,4582 gold badges16 silver badges36 bronze badges

7 Comments

DMantas Over a year ago

I guess I suck at explaining haha, my bad. I've found a solution on my own I think however I don't know how well it will work in the future. I copied the <iframe> tag that the code generated and pasted directly into the <template> it works will see if any issues come up, thanks for your help tho.

Michael Mano Over a year ago

Na the issue is that you can never use <script> inside vue. its not meant to be used that way, its like using jquery and vue. you have to take the script code and use it inside the vue templates. your solution works for now however it may fail in future. by this i mean no using <script> inside the id="app" of your application.

DMantas Over a year ago

Is there any work around that you know of?

Michael Mano Over a year ago

Yeah by moving the code inside the script tags to the actual vue application code. like i've done above then recompiling your app.

DMantas Over a year ago

And what would the html element look like?

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related