Import VueJs component based on conditions

Question

I am working on micro frontend architecture where multiple teams working on different pages or may be on a single page.

I have a component in vue2(Feature1.vue) and I have to import this dynamically based on the need of the component. if Feature1.vue is not needed then it should not be part of the bundle.

if any team needs that component then It will be part of the build and bundle size also increase.

Using props or any flag if true then only it should be part of the bundle if false it should remove from the bundle. Is it possible?

I am using Vue 2 and I am not using Vue Router.

tony19 · Accepted Answer · 2022-07-15 01:02:21Z

1

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

This article is not relevant by name, but offers dynamic import solution.

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

components: {
  TreeFolderContents: () => true ? import('./tree-folder-contents.vue') : undefined
}

edited Jul 15, 2022 at 1:02

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 5, 2021 at 10:45

I_Shayderov

1653 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Import VueJs component based on conditions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related