Articles

Mastering Dynamic Components in Vue.js

06 Jan 2025

5 mins to read

Learn how to master dynamic components in Vue.js to make your app more flexible and efficient with example code snippets.

Step 1: Basic Usage of Dynamic Components

Here’s an example of using the <component> element to display different components based on the current state:

        
        <template>
          <div>
            <component :is="currentComponent"></component>
            <button @click="toggleComponent">Toggle Component</button>
          </div>
        </template>

        <script>
        import ComponentA from './ComponentA.vue';
        import ComponentB from './ComponentB.vue';

        export default {
          data() {
            return {
              currentComponent: 'ComponentA',
            };
          },
          components: {
            ComponentA,
            ComponentB,
          },
          methods: {
            toggleComponent() {
              this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
            },
          },
        };
        </script>

In this example, we conditionally render either ComponentA or ComponentB based on the currentComponent data property. When the button is clicked, the toggleComponent method switches between the two components.

Step 2: Using Dynamic Components with Props

You can also pass props to dynamic components to make them even more flexible. Here's how you can achieve that:

        
        <template>
          <div>
            <component :is="currentComponent" :propValue="componentValue"></component>
            <button @click="toggleComponent">Toggle Component</button>
          </div>
        </template>

        <script>
        import ComponentA from './ComponentA.vue';
        import ComponentB from './ComponentB.vue';

        export default {
          data() {
            return {
              currentComponent: 'ComponentA',
              componentValue: 'Hello, Component!',
            };
          },
          components: {
            ComponentA,
            ComponentB,
          },
          methods: {
            toggleComponent() {
              this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
              this.componentValue = this.componentValue === 'Hello, Component!' ? 'Welcome to Vue.js' : 'Hello, Component!';
            },
          },
        };
        </script>

In this extended example, the dynamic components ComponentA and ComponentB will now receive a prop called propValue. The value of this prop changes when the button is clicked, allowing the dynamic components to react to changes in data passed to them.

Step 3: Using Named Views with Dynamic Components

Vue allows you to use named views to conditionally load components. This is particularly useful when working with dynamic components in a more complex application, like an app with multiple routes and layouts.

        
        <template>
          <div>
            <component :is="currentComponent"></component>
            <button @click="toggleComponent">Toggle Component</button>
          </div>
        </template>

        <script>
        export default {
          data() {
            return {
              currentComponent: 'defaultComponent',
            };
          },
          components: {
            defaultComponent: () => import('./components/DefaultComponent.vue'),
            alternateComponent: () => import('./components/AlternateComponent.vue'),
          },
          methods: {
            toggleComponent() {
              this.currentComponent = this.currentComponent === 'defaultComponent' ? 'alternateComponent' : 'defaultComponent';
            },
          },
        };
        </script>

Here, we are using import() for lazy loading components, which helps to reduce the initial bundle size by loading only the necessary components when required. By toggling between defaultComponent and alternateComponent, we can dynamically load the appropriate component into the view.

Conclusion

Dynamic components in Vue.js offer powerful functionality that allows you to create flexible and efficient user interfaces. By leveraging the <component> element, props, and named views, you can easily create dynamic, reusable components that fit your app's needs.