CODEWITHSUNDEEP
vue.jsvuejs2
Niraj Bharti
Niraj Bharti

Reputation: 43

Import VueJs component based on conditions

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.

Upvotes: 0

Views: 303

Answers (1)

I_Shayderov
I_Shayderov

Reputation: 167

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
}

Upvotes: 1

Related Questions