Instantiating Vue components using only string

Question

I have a string saved as a variable in javascript that contains both the <template> and <script> tags that could be saved into single file components in vue. Here is an example:

<template>
    <div>
        {{myVar}}
        <button @click = "change(1)">Increment</button>
        <button @click = "change(-1)">Decrement</button>
    </div>
</template>

<script>
export default{
    data(){
        var randomVar = Math.round(10*Math.random());
        return {
            myVar: randomVar
        }
    },
    mounted(){
        this.change(12);
    },
    methods:{
        change(num){
            this.myVar += num;
        }
    }
};
</script>

Is there a way to instantiate said string as a vue component without having to save it as a single file component or separating the data, methods and other lifecycle hooks?

IVO GELOV · Accepted Answer · 2020-08-10 07:15:46Z

1

The HttpVueLoader can load .vue files directly in the browser - you can look at the source code and try to modify it to accept the string directly instead of fetching it from an URL.

Additionally, you may want to take a look at the Client-Side Vue project - it avoids the building step for SFC so you can use your .vue components directly in the browser.

answered Aug 10, 2020 at 7:15

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Instantiating Vue components using only string

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related