Vuejs large application lazy loading dynamic components

Question

I'm trying to build a vuejs application which will have hundreds if not thousands of "form" or "page" components that all get swapped out inside a dynamic <component is=''> tag. The problem is having to import each component. Is there a way to dynamically import components based on a route parameter? So far I have the following but it doesn't work:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Hello = resolve => require(['@/components/Hello.vue'], resolve)

export default new Router({
  routes: [{
    path: '/',
    name: 'Hello',
    component: Hello
  }, {
    path: '/:name',
    name: 'Dynamic',
    component : {
      template: '<component :is="$route.params.name"></component>',
      watch: {
        '$route': function(to) {
          window[to.params.name] = resolve => require(['@/components/' + to.params.name + '.vue'], resolve)
          Vue.component(to.params.name, window[to.params.name])
          console.log(to.params.name)
        }
      }
    }
  }]
})

Maybe this will help? gist.github.com/Rich-Harris/ea561810900eedd2a8e9afbc78ddd566 See also SystemJS github.com/systemjs/systemjs — Roy J
– Roy J, Commented Mar 9, 2017 at 23:11

Zia · Accepted Answer · 2017-05-11 19:51:47Z

One way to do it, assuming all components are stored in a single directory (technically they can be stored anywhere as long as the loader file grabs and imports them).

import Vue from 'vue'
import Router from 'vue-router'
import Components from './components'

Vue.use(Router)

const Hello = resolve => require(['@/components/Hello.vue'], resolve)

export default new Router({
  routes: [{
    path: '/',
    name: 'Hello',
    component: Hello
  }, {
    path: '/:name',
    name: 'Dynamic',
    component : {
      template: '<component :is="Components[$route.params.name]"></component>'
    }
  }]
})

Then inside ./components/index.js the following assuming all your components are .vue files:

const files = require.context('.', false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key)
})

export default modules

I haven't tested this implementation, but the approach to loading the directory files is how I use it in some areas where I have a dynamic number of components located in a folder that can change over time (say as more modules get installed into the application and you don't want to have to update the supportive frontend code every time).

Collectives™ on Stack Overflow

Vuejs large application lazy loading dynamic components

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