Vue.js

Setup

To use components with Vue.js, add the component tag with data-key and data-load and call Component.render() when the Vue instance has mounted:

<div id="demo">
<component data-key=mladl data-load=md-mi></component>
</div>
new Vue({
el: '#demo',
mounted: function () {
Component.render()
}
})

Because key is a reserved attribute in Vue.js, use data-key and data-load instead.

Console warning

The above example will work; however, Vue.js will log a warning to the console along the lines of Unknown custom element: <component>. To prevent this, we can use the data-component attribute on a div element instead:

<div id="demo">
<div data-component data-key=mladl data-load=md-mi></div>
</div>

When using this approach, specify that Component.render should use data-component:

new Vue({
el: '#demo',
mounted: function () {
Component.render({ dataComponent: true })
}
})

Register component tag

Another way to avoid the console warning above is to register <component> as a custom element in Vue. This enables you to continue using <component> tags if desired:

<div id="demo">
<component data-key=mladl data-load=md-mi></component>
</div>
Vue.component('component', {
props: ['dataKey', 'dataLoad'],
template: '<div data-component :data-key="dataKey" :data-load="dataLoad"></div>'
})
new Vue({
el: '#demo',
mounted: function () {
Component.render({ dataComponent: true })
}
})

Example

Rendering multiple components

You can render multiple components the same way as a single component, like so:

<div id="demo">
<component data-key=mladl data-load=md-mi></component>
<component data-key=ekaob data-load=b></component>
<component data-key=aldlk data-load=md></component>
</div>
Vue.component('component', {
props: ['dataKey', 'dataLoad'],
template: '<div data-component :data-key="dataKey" :data-load="dataLoad"></div>'
})
new Vue({
el: '#demo',
mounted: function () {
Component.render({ dataComponent: true })
}
})

Re-rendering

You can call Component.render() as often as you’d like in your Vue.js application (or elsewhere). This method will not lead to an API call every time; if a component has already been fetched once, Component.render() will use that data instead of making another API call.

See the section on Component.render for more.