Personally, I like to create a folder for each component, because more files for styling and testing can be added later. How you want to build the structure is up to you, of course.

Next, we look at how this <dynamic-link /> component is built.

<template>

<component :is="component" :data="data" v-if="component" />

</template> <script>

export default {

name: 'dynamic-link',

props: ['data', 'type'],

data() {

return {

component: null,

}

},

computed: {

loader() {

if (!this.type) {

return null

}

return () => import(`templates/${this.type}`)

},

},

mounted() {

this.loader()

.then(() => {

this.component = () => this.loader()

})

.catch(() => {

this.component = () => import('templates/default')

})

},

}

</script>

So what’s going on here? Dynamic components are supported by Vue.js by default. The problem is that you have to register/import all the components you want to use. 👎

<template>

<component :is="someComponent"></component>

</template> <script>

import someComponent from './someComponent' export default {

components: {

someComponent,

},

}

</script>

Nothing is gained here because we want to use our components dynamically. So what we can do is to use dynamic imports from Webpack. Used together with computed values this is where the magic happens–yes, computed values can return a function. Super handy! 🙌

computed: {

loader() {

if (!this.type) {

return null

}

return () => import(`templates/${this.type}`)

},

},

When our component is mounted, we try to load our template. If something went wrong we can set a fallback template. Maybe this can be helpful to show an error message to your users.

mounted() {

this.loader()

.then(() => {

this.component = () => this.loader()

})

.catch(() => {

this.component = () => import('templates/default')

})

},

💡 Conclusion

Can be useful if you have many different views for one component.

Easy extendable.

It’ asynchronous. Templates are only loaded when needed.

Keeps your code DRY.

And basically, that’s it! I would love to hear if you are already using this kind of this technique? 👋

Got comments or questions? Hit the section below or feel free to contact me via Twitter!