vue-dynamic

Load stringified or normal Vue components dynamically!

ChangeLog

0.3.0: Custom Events on dynamic component is supported, see #23 for more details

Notice

This module is just a simple wrapper of Vue component, and you should only use it to use stringified static components.

Usage

1.Global Component

import Vue from 'vue' // make sure to use 'vue/dist/vue.js' because we will use template
import VueDynamic from 'vue-dynamic'

Vue.use(VueDynamic, { name: 'dynamic' }) // you can custom the global component name and it's default name is 'dynamic'

Then it will be same with the next case:

2.Specific Component

<template>
  <Dynamic :comps="comps" :emptyView="emptyView" />
</template>
<script>
import { Dynamic } from 'vue-dynamic' // if we choose to use the first case, you don't need to import this component again
import NoItem from 'components/NoItem'

export default {
  name: 'VueDynamic',
  data() {
    return {
      comps: this.$route.meta.data,
      emptyView: NoItem,
    }
  },
  components: {
    Dynamic,
  },
}
</script>

It needs you to pass two props to Dynamic, emptyView is required because it will be used when we failed to pass your comps.

comps can be a Object like the normal components option in *.vue file of an Array of Vue-Component-like Object.

There is a deadly simple example:

;[
  {
    template: `<div>{{ msg }}</div>`,
    data: {
      msg: `It's the first dynamic template!`,
    },
  },
  {
    template: `<div>{{ reverse ? $options.filters.reverse(msg) : msg }}
<button class="btn btn-primary" @click="reverseMsg">Try to reverse me!</button></div>`,
    data: {
      msg: `It's the second dynamic template!`,
      reverse: false,
    },
    methods: {
      reverseMsg: 'this.reverse = !this.reverse',
    },
  },
  {
    template: `<div>More Magic Here!</div>`,
  },
]

As you see, the value of methods object is a string (or array, them will be applied to Function constructor) what means you can store it in your database! So that it is possible to define customer defined page component separately and link them together at once!

It's very useful to build a html5 page like eqxiu.com.

And nested components can be used! Here is a example:

;[
  {
    template: '<div><component1/><component2/></div>',
    components: {
      component1: {
        template: '<div @click="click">{{ msg }}</div>',
        data: {
          msg: 'Inner Messgae',
        },
        methods: {
          click: 'alert("abc")',
        },
      },
      component2: {
        template: '<div @click="click">{{ msg }}<component3/></div>',
        data: {
          msg: 'Inn1222er Messgae',
        },
        methods: {
          click: 'alert("ab11c")',
        },
        components: {
          component3: {
            template: `<button @click="reverse">{{ msg }}</button>`,
            data: {
              msg: `I'm the third one!`,
            },
            methods: {
              reverse: `this.msg = this.msg.split('').reverse().join('')`,
            },
          },
        },
      },
    },
  },
]

The nested components can also be an array and use a name option in component which is used in you template.

Of course, if you are passing a normal Vue components, it will also work.

Hope it will be useful to you, and if it occurs any problem, please notice me through issue.

larntin/vue-dynamic

vue-dynamic

ChangeLog

Notice

Usage