From 0 to 100 within seconds in dynamic rendering of Vue Components

Straight to the point like fast and furious

GIF

I've been working on a project where there was a need to render Vue components programmatically, which is the hard way 😅, even passing props.

So I will quickly show you how to do this.

So let's suppose we have a component called Card, which gets its title via props

import Card from 'Card.vue'
import Vue from 'vue'
let ComponentClass = Vue.extend(Card)
let instance = new ComponentClass({
    propsData: {
        title: 'My Title'
    }
})
instance.$mount() 
this.$refs.container.appendChild(instance.$el)

First of all, $refs is the most recommended way to get a DOM element referenced in Vue.

You need to specify an attribute on the DOM element you want to reference (<div ref="container"> </div> in our case), and then that element is available in the key defined in the $refs property of the component.

Finally, to get the native DOM element reference from an instance of the Vue component, you can use the $el property.

From 0 to 100 within seconds in dynamic rendering like a Dodge Charger, anything I am available in the comments, for today that's my consecrated 🍻

GIF