An Overview of VueJS Dynamic Components — What You Need to Know

Matt Maribojoc
Jan 4 · 3 min read
Image for post
Image for post

VueJS Dynamic Components can be an extremely convenient way to make your code both more readable and adaptable. They can simplify several conditional components (ones toggled using v-if, v-else-if, v-else) into just one line of code.

In short, they allow you to toggle between different components in the easiest way possible.

By the end of this article, you will…

  • Understand what dynamic components are
  • Recognize when to use them
  • Know how to implement them in VueJS
  • Hear about advanced dynamic component topics

Alright, enough introduction. Let’s dive right in.

What are Dynamic Components

Dynamic components are, well, ways to dynamically switch between components at run-time. While this is a circular definition, the name is pretty self explanatory.

To better understand, let’s look at some example use cases.

  • Navigating tabbed components without having to route to a new page
  • Managing different types of popups in one component element
  • Displaying different content depending on if a user is logged in or not.

All of these would require unique components, but instead of having to include all of them one by one, dynamic components provides a shortcut.

There are several benefits to using dynamic components.

From the developer side, it makes your code more reusable. If all you have to do is use one element instead of adding a v-if for everything, it’s more scalable and readable.

From the user side, using dynamic components can make a page more interactive and save page loads making for a faster user experience.

Now that we know what dynamic components are and why they’re useful, let’s learn how to use them.

Great. Now How do We Use Em?

Using dynamic components is super simple. We just need to know two things:

1. The Component Element

In Vue, the component element allows us to declare dynamic components. It’s used just like every other element and we can just use it in a template like <component></component>

The magic happens when we start using one of the component element’s unique attributes.

2. The v-bind:is attribute

This is the attribute that actually allows dynamic components to work. Essentially, it tells the component element what it is. The v-bind:is or just :is for shorthand, points to a registered component.

You can pass it two types of parameters:

  1. The name of a component
  2. The options object of a component

So how do we use this?

Simple.

First, we have to include the components we want to use using import statements. We also have to declare these as components to our VueJS property in the options method.

<script>   import ComponentA from '@/components/A.vue'   import ComponentA from '@/components/A.vue'   export default {      components: {         ComponentA,         ComponentB      }   }</script>

Next, we have to declare a variable that corresponds to the current component. It’ll look something like this.

data () {   return {      comp: ComponentA // or can be 'ComponentA'   }}

Finally, let’s just add our component element to our template. And for the hell of it. I added little buttons that switch between the two components. The code looks like this.

<template>   <div>      <button @click='comp = ComponentA'> Component A </button>      <button @click='comp = ComponentB'> Component A </button>      <component :is='comp' />   </div></template>

Going a Little Further

There is so much more that you can do to make dynamic components amazing. Some of my personal favorites are adding Vue transitions to make them work seamlessly or implement Vue keep-alive components to help save states.

But even in the simplest case, VueJS dynamic components can make your code much more maintainable and adaptable.

I hope this article helped. If you have any VueJS questions just reach out at matt@learnvue.co


If you’re looking to power up your Vue development, I’ve created a 3 page PDF cheatsheet with all of the essential references that every Vue developer needs. It’s saved me so much time and thousands of the same Google searches.

Image for post
Image for post

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store