https://github.com/JounQin/vue-dynamic
Load stringified or normal Vue components dynamically!
https://github.com/JounQin/vue-dynamic
vue-components vue-dynamic
Last synced: 5 months ago
JSON representation
Load stringified or normal Vue components dynamically!
- Host: GitHub
- URL: https://github.com/JounQin/vue-dynamic
- Owner: JounQin
- License: mit
- Created: 2016-11-12T10:15:33.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-08-25T04:59:48.000Z (about 5 years ago)
- Last Synced: 2024-11-08T19:22:42.787Z (11 months ago)
- Topics: vue-components, vue-dynamic
- Language: TypeScript
- Homepage: https://jounqin.github.io/vue-dynamic/
- Size: 846 KB
- Stars: 42
- Watchers: 7
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# vue-dynamic
[](https://github.com/JounQin/vue-dynamic/actions?query=workflow%3A%22Node+CI%22)
[](https://www.codacy.com/gh/JounQin/vue-dynamic)
[](https://www.npmjs.com/package/vue-dynamic)
[](https://github.com/JounQin/vue-dynamic/releases)
[](https://david-dm.org/JounQin/vue-dynamic?type=peer)
[](https://david-dm.org/JounQin/vue-dynamic)
[](https://david-dm.org/JounQin/vue-dynamic?type=dev)
[](https://conventionalcommits.org)
[](https://renovatebot.com)
[](https://standardjs.com)
[](https://github.com/prettier/prettier)
[](https://codechecks.io)
Load stringified or normal Vue components dynamically!
## TOC
- [Notice](#notice)
- [Usage](#usage)
- [Changelog](#changelog)
- [License](#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_
```js
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_
```vue
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,
},
}
```
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:
```js
;[
{
template: `
{{ msg }}`,
data: {
msg: `It's the first dynamic template!`,
},
},
{
template: `{{ reverse ? $options.filters.reverse(msg) : msg }}
Try to reverse me!`,
data: {
msg: `It's the second dynamic template!`,
reverse: false,
},
methods: {
reverseMsg: 'this.reverse = !this.reverse',
},
},
{
template: `More Magic Here!`,
},
]
```
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](http://www.eqxiu.com/).
**_And nested components can be used! Here is a example:_**
```js
;[
{
template: '
',
components: {
component1: {
template: '{{ msg }}',
data: {
msg: 'Inner Message',
},
methods: {
click: 'alert("abc")',
},
},
component2: {
template: '{{ msg }}',
data: {
msg: 'Inn1222er Message',
},
methods: {
click: 'alert("ab11c")',
},
components: {
component3: {
template: `{{ msg }}`,
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](./CHANGELOG.md).
## License
[MIT][] © [JounQin][]@[1stG.me][]
[1stg.me]: https://www.1stg.me
[jounqin]: https://GitHub.com/JounQin
[mit]: http://opensource.org/licenses/MIT