jounqin / vue-dynamic

Load stringified or normal Vue components dynamically!

vue-dynamic

Load stringified or normal Vue components dynamically!

TOC

• Notice
• Usage
• Changelog
• License

Notice

This module is just a simple wrapper of Vue's built-in 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 Message',
        },
        methods: {
          click: 'alert("abc")',
        },
      },
      component2: {
        template: '<div @click="click">{{ msg }}<component3/></div>',
        data: {
          msg: 'Inn1222er Message',
        },
        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.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

License

MIT © [e-mail]

vue-dynamic's Issues

Re-generate component

Great component! Thanks for it.

I just have one doubt: How can I re-generate the component after changing comps?

After changing comps.template the component doesn't seems to update.

Emitted events don't propagate

Hi,

Thanks for making vue-dynamic.

I'm using it to display a form, here's how I create comps

[{
    data: {formModel: {field1: 'text', field2: 'text'}},
    methods: {onSubmit: "this.$emit('formSubmitted', this.formModel);"},
    template: '<form>....</form>'
}]

Everything is working fine, the form displays, field models react properly and I can see that the event is triggered in the Vue debugger extension.

However, when I listen to the event on <dynamic>, it doesn't seem to be triggered.

<dynamic :comps="comps" :emptyView="emptyView" v-on:form-submitted="handleForm"/>

handleForm is never called.

Looking at the components tree in Vue debugger, I see that the event comes from <Dynamic_0>, and that element has a <Dynamic_Root>. It seems that the event is stopped at <Dynamic_Root> and not propagated to the parent.

Is there a way to go around that?

Thanks

Headless CMS website builder

Usage v-if or v-show inside template

At first, — thanks for nice component, but in my use case, with dynamic changes in data props with v-if and v-show is not work in template.

As example, on initial state of component I have an empty array named as hideAgreements: []. Inside dynamic component I render a list with v-for, and set up conditions to show items, based on his index:

<template v-for="(service,index) in services">
  <tr >
    <td :data="setAgreement(index, false)">{{index+1}}.</td>
    <td>....
      <span v-if="!getAgreement(index)" :class="`w-${getAgreement(index)}`">... {{agreement.name}} from {{agreement.startDate|date}}
          <span @click="setAgreement(index, !getAgreement(index))" class="no-print"> X</span>
    </td>
  </tr>
</template>

As you can see, I has a @click-event for change a state of hideAgreement[index]. In action — this these changes will occur inside the component scope, but render conditions v-if or v-show is not handled.

What can work wrong?

npm build Module parse failed error problem

Hi @JounQin

how can I solve this problem

ERROR in ./~/vue-dynamic/lib/dynamic.js
Module parse failed: \node_modules\vue-dynamic\lib\dynamic.js Unexpected token (56:58)
You may need an appropriate loader to handle this file type.
|
|     if (data) {
|       component.data = isFunction(data) ? data : () => ({ ...data })
|     }
|
 @ ./~/vue-dynamic/lib/index.js 1:0-31
 @ ./ClientApp/app.js
 @ ./ClientApp/boot-app.js

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (@)

TypeError: Cannot read property 'warn' of undefined

While I was using this module, I get this error:

TypeError: Cannot read property 'warn' of undefine

It occurs at this line in dist/vue-dynamic.js at line 116.
return _vue.util.warn('no ' + msg + ' found thus it will be ignored!');

Little investigation into the problem showed that correct syntax is _vue.default.util.warn and not _vue.util.warn.

I want to know if this issue is with the library or with my configuration.

Thank you

Comps with Filters

Hi, it's posible use filters like:
comps: [{ template: "<h1> {{name | uppercase}}", data: { name: "John"}, filters:{ uppercase: function (str) { return str.toUpperCase() } } }]

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Vuetify used within template causes "Unknown custom element"

Vuetify used within template causes "Unknown custom element"

Vuetify is registered globally with:

Vue.use(Vuetify);

Vuetify is working fine in VueJS but the following code triggers "Unknown custom element "

I can use <v-btn> normally in other templates?

This does not work:

<template>
  <Dynamic :comps="comps" :emptyView="emptyView" />
</template>

<script>
import Error  from './Error.vue';


export default {
  data() {
    return {
      emptyView: Error,
      comps: [{
        template: `<div><v-btn>HI</v-btn></div>`,
      }]
    }
  },
};
</script>

This does work:

<template>
  <v-btn>Hi</v-btn>
</template>

<script>

export default {};
</script>

Replacement html element to vue-dynamic bind data

Hi @JounQin ,

i want to do replace html tag to vue-dynamic tag after bind data vue-dynamic companent. How can I to do

template = "<div>" + settings.comps[0].data.template.replace("<!--viewModel.Guide-->", "<dynamic :comps="comps1" />) + "</div>";
After replacement How I do comps1 bind to inserted dynamic companent

I get error: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the

Can this be used to load a Vue single file component?

The documentation seems to hint at this but can this be used to dynamically load/use a template from a .vue file? Do you have an example for that?

I'm hoping to load a component asynchronously from an external .vue file but haven't worked out how to do it yet.

Thanks!

An in-range update of rollup is breaking the build 🚨

The devDependency rollup was updated from 1.9.2 to 1.9.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

rollup is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v1.9.3

2019-04-10

Bug Fixes

• Simplify return expressions that are evaluated before the surrounding function is bound (#2803)

Pull Requests

• #2803: Handle out-of-order binding of identifiers to improve tree-shaking (@lukastaegert)

Commits

The new version differs by 3 commits.

• 516a06d 1.9.3
• a5526ea Update changelog
• c3d73ff Handle out-of-order binding of identifiers to improve tree-shaking (#2803)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Why not <component :is>?

Hi!
Sorry for my noob question but what is the difference between VueDynamic and ?

Accessing value of child components

I tried using v-model for child component data binding, but it seems I cannot access the value. Please refer to code excerpt below. Is there a way to do this? Or to bind child value to parent data variable?

Thanks.

<template>
  <div>
    <button @click="onClick">Please click me</button>
	<dynamic :comps="components" :emptyView="emptyView" ref="container" />
  </div>
</template>
<script>
  import dynamic from 'vue-dynamic/dynamic'
 
  export default {
    name: 'VueDynamic',
    data() {
      return {
        components: [{
          name: "dynamic",
          template: '<div><component1/><component2/></div>',
          components: {
          	component1: {
          	  template: '<input type="text" v-model="value">',
	          data() {
	          	return {
	          	  value: '1'
	          	}
	    	  },
	        },
          	component2: {
          	  template: '<input type="text" v-model="value">',
	          data() {
	          	return {
	          	  value: '2'
	          	}
	    	  },
          	}
          }
        }],
		emptyView: {
		  template: '<div>Hi There</div>'
        }
      }
	},
	components: {
	  dynamic
	},
	methods: {
	  onClick() {
	  	var mesg = this.components[0].components['component1'].value + ":" + this.components[0].components['component2'].value;
	  	alert(mesg)
	  }
	}
  }
</script>

Dynamic :comps working problem

Hi @JounQin

I am load dynamic companent to axios into another dynamic companent.

I have a problem there. :comps = "nestedView" declare in js that is ok but load time declare is not working

by example

axios.get(....)
.then(function (response) {
page.view.NestedView = [{
template: '....',
data: {
............................
}
}];
})

Support created()/mounted() method

Can we add created() and mounted() function to the template

How can we use vue-dynamic with vuetify or eleme-fe ? Could you add sample?

I've added script and css for vuetify to your demo (https://jounqin.github.io/vue-dynamic/)

to header:
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" name="viewport">

to body:

<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> (after vue-dynamic)

But I'm getting Unable to locate target error.

Could you add very simple example.

SSR & Nuxt.js support

Hi, good component, but not work with Nuxt.js. It is to be great if vue-dynamic will be support Nuxt.js

Vue-Dynamic & Route together use

Hi @JounQin ,

I need a example. I want to using vue route But I have some question. I will give you the result from axios to vue-dynamic comps parameter after push route. how can I do it ?