Vuejs build/render component inside a method and output into template

Question

I have a string (example, because it's an object with many key/values, want to loop and append to htmloutput) with a component name. Is it possible to render/build the component inside a method and display the html output?

Is that possible and how can i achieve that?

     <template>
         <div v-html="htmloutput"></div>
     </template>


<script>
    export default {
        component: {
            ComponentTest
        },
    data() {
            return {
                htmloutput: ''
            }
        },
    methods:{
        makeHtml(){
            let string = 'component-test';//ComponentTest
            //render the ComponentTest directly
            this.htmloutput = ===>'HERE TO RENDER/BUILD THE COMPONENTTEST'<==
        }
    },
    created(){
            this.makeHtml();
    }
</script>

tony19 · Accepted Answer · 2022-07-15 00:34:29Z

2

You might be looking for dynamic components:

https://v2.vuejs.org/v2/guide/components-dynamic-async.html

Example:

<template>
    <component :is="changeableComponent">
    </component>
</template>

<script>
    import FirstComponent from '@/views/first';
    import SecondComponent from '@/views/second';

    export default {
        components: {
            FirstComponent, SecondComponent
        },
        computed: {
            changeableComponent() {
                // Return 'first-component' or 'second-component' here which corresponds
                // to one of the 2 included components.
                return 'first-component';
            }
        }
    }
</script>

edited Jul 15, 2022 at 0:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 9, 2019 at 13:45

Flame

7,7563 gold badges43 silver badges64 bronze badges

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

6 Comments

Bas Over a year ago

Hi, i know this but i want to render it into a method and append the component html to htmloutput

Flame Over a year ago

i dont quite see what you want to do. Appending content can be done using different tags in your template right?

Bas Over a year ago

I want to call makeHtml and render, created() calls makeHtml()

Flame Over a year ago

render() is an alternative to string templates. Loading another component will create a template either through render() or the vue compiler will find your <template> element in that same file.

Bas Over a year ago

How can i achieve that?

|

Dariusz Gardyński · Accepted Answer · 2020-03-08 22:32:32Z

0

Maybe this will help - https://forum.vuejs.org/t/how-can-i-get-rendered-html-code-of-vue-component/19421

StarRating is a sample Vue component. You can get it HTML code by run:

new Vue({
  ...StarRating,
  parent: this,
  propsData: { /* pass props here*/ }
}).$mount().$el.outerHTML

in Your method. Remember about import Vue from 'vue'; and of course import component.

answered Mar 8, 2020 at 22:32

Dariusz Gardyński

1793 silver badges8 bronze badges

Comments

fafrd · Accepted Answer · 2021-07-22 18:39:51Z

0

What you're trying to do really isn't best practice for Vue.

It's better to use v-if and v-for to conditionally render your component in the <template> section.

answered Jul 22, 2021 at 18:39

fafrd

1,2071 gold badge15 silver badges18 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:37:27Z

0

Yes you can use the render function for that here is an example :

Vue.component('CompnentTest', {
  data() {
    return {
      text: 'some text inside the header'
    }
  },
  render(createElement) {
    return createElement('h1', this.text)
  }
})

new Vue({
  el: '#app',

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <Compnent-test />
</div>

Or :

if you are using Vue-cli :

on your componentTest component :

export default {
  render(createElement) {
    return createElement('h1', 'sometext')
  }
  // Same as
  // <template>
  //   <h1>sometext</h1>
  // </template>
  //
}

and on your root element (App.vue as default) :

export default {
   ....
  component: {
    ComponentTest
  }
}

<template>
  <div>
      ....
     <Component-test />
  </div>
</template>

example : codesandbox

you can read more about Render Functions & JSX

edited Jul 16, 2022 at 4:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 9, 2019 at 13:39

Abdelillah Aissani

3,1082 gold badges12 silver badges25 bronze badges

11 Comments

Bas Over a year ago

How can i achieve this in my example?

Abdelillah Aissani Over a year ago

@Bas on your ComponentTest you can create the render function and then just import the component and use it on your template

Abdelillah Aissani Over a year ago

@Bas i will update the answer for a vue-cli project

Bas Over a year ago

Sorry don't understand it, can you use my example?

Abdelillah Aissani Over a year ago

@Bas yes here is an example : codesandbox check the component

|

Collectives™ on Stack Overflow

Vuejs build/render component inside a method and output into template

4 Answers 4

6 Comments

Comments

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related