async components

[eybarta]

Could you please show an example of how to load async components in router?

thx

[Akryum]

https://github.com/meteor-vue/vue-meteor-demo/blob/master/src/imports/ui/Async.vue

[Herteby]

@Akryum I was thinking about a more repeatable pattern for this, and came up with this wrapper component:

template:`<component :is="comp" v-bind="$attrs" v-on="$listeners"></component>`,
props:{
  component:{
    type:String
  }
},
data(){
  return {
    comp:undefined
  }
},
created(){
  const name = this.component
  this.$watch('component', name => {
    import(name).then(result => {
      this.comp = result
      this.$emit('loaded', name)
    })
  }, {immediate:true})
}

example: https://jsfiddle.net/Herteby/ht4obnb9/

What do you think? :)

then you could for example declare a route like:

{
  path:'/foo',
  component:lazy,
  props:{component:'./foo.vue'}
}