|

VueJS Dynamic Components

VueJS Dynamic Components

Another really cool feature of VueJS is Dynamic Components. What are dynamic components you ask? Well, let’s say you have a main component and you would like to dynamically load other components into the main template by clicking a button or some other means. This is what can be accomplished with dynamic components. In this tutorial, we’ll create some dynamic components in Vue and test them out in a live demo. Let’s get started with dynamic components in VueJS.


Create Three Components

To get started, we’ll just add three simple components to our application. Just for brevity, we’ll name them OneComponent.vue, TwoComponent.vue, and ThreeComponent.vue. They will be located in the components folder of the application.
three vue components

Here is the markup we’ll put in these three different components. They are super basic, but just different enough so that we will be able to easily differentiate between the components when they get rendered.
OneComponent.vue

TwoComponent.vue

ThreeComponent.vue


Configure App.vue

Now we want to dynamically make use of these various components in our main App.vue file. There are a few steps to make this work. First, let’s import those components and register them locally like so.
App.vue


Introducing <component>

Now we want to make use of those components, but how do we do so dynamically? Normally we would now make use of the selector that corresponds to the particular component we would like to render. We are not going to take that route. Instead, we will use a special selector in VueJS named <component>. Let’s see that in action here.
App.vue

In the snippet above, you can see that we now have that <component> tag in the template section of the main component. A special thing to note is the use of the is binding. Essentially what is happening here is that this <component> is bound to an instance of a component. Notice that in the data() method we have a property of selectedComponent which has a default value of ‘One’. What do you think we will see in the browser at this point? That’s right, the ‘One’ component is rendered like we see here.
one dynamic component


Selecting Components Dynamically

That was pretty cool. We are now rendering a component in a component by using the tag rather than the custom tag of the component itself. The component to be rendered is determined by a property in the data() method. Now, let’s add a new feature. We want to be able to dynamically load each component in the template of the main App.vue. How can we do this? Consider this new markup.
App.vue

Now we have added three new buttons. Actually they are divs but they look like buttons thanks to the bootstrap classes we have applied. Notice that on each button, there is a @click handler. All we do in that click handler is to set the selectedComponent property to a new string value which represents the component we would like to dynamically load. Try it our for yourself here.


So that is pretty cool! As you click each button, Vue is dynamically loading an entirely new component into the template. This is a really basic demonstration, but you can use your imagination and likely come up with some really interesting use cases for such a feature.


Handling State In Dynamic Components

One question we might ask is what happens when a component is loaded dynamically in Vue? When you load a different component, does the first one expire or is it kept alive? Let’s try adding some data to the ThreeComponent and see how that works.
ThreeComponent.vue

In the snippet above we simply add a counter property to the data() and then in the template increment that counter when a button is clicked. We also display the number of times the button has been clicked. Note that when you change between components, the count gets reset. What does this mean? It looks like each time you load a dynamic component, it is a new instance. If you navigate away, or load a different component, then the currently rendered component is destroyed.
dynamic component state


Introducing <keep-alive>

Maybe you would like a component to maintain it’s state if you navigate away and come back to the same component. This is easy to do by using the special <keep-alive> tag VueJs provides. All we need to do is wrap the special <component> tag in App.vue with the <keep-alive> tag like we see here.
App.vue

With that update, go ahead and try the new demo that does maintain state.


Life Cycle Hooks

If you are not using <keep-alive> you have access to a destroyed() life cycle hook, and it fires any time you navigate away from a loaded vue dynamic component. What about when you are using <keep-alive>? In that case you have access to two life cycle hooks of activated() and deactivated(). These will fire when the dynamic component is loaded (activated) or navigated away from (deactivated). We can test this out by adding them to ThreeComponent.vue and just log out the results.
ThreeComponent.vue

Now we see that we can tap into those life cycle hooks if needed.
activated deactivated life cycle hooks


VueJS Dynamic Components Summary

In this tutorial we learned about how you can use the same mount point and dynamically switch between various components using the special <component> tag and dynamically bind to its is attribute. It’s a really neat feature which you could definitely put to good use! In addition, we learned about how components are created and destroyed during this process as well as the idea of keeping components alive if we need to maintain state.

|