A Vue.js component for easy compiling and interpreting of HTML templates at runtime.
An interactive demo of the compiler can be found over at CodeSandbox
This is a simple library that makes use of the vue-template-compiler
to generate a component on the fly from a HTML string, which solves the template binding issues that you get with the v-html
directive.
The Vue Runtime Template Compiler
makes it easy to get a template string either from a local variable or from a remote source, and then compile and render it as a component using scope of the parent.
You do not need to use the use the with-compiler
version of Vue.js, as this bundles the vue-template-compiler
. This is handy as you might not want to use the runtime compiler in the whole application. Using Webpack and code splitting you can ensure that the compiler is only fetched when necessary.
Keep in mind that the template can only access the instance properties of the component that is using it.
https://unpkg.com/vue-runtime-template-compiler/dist/vue-runtime-template-compiler.umd.js
Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/[email protected]/dist/vue-runtime-template-compiler.umd.js
.
Include Vue Runtime Template Compiler
after Vue.js and it will install itself automatically:
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/vue-runtime-template-compiler/dist/vue-runtime-template-compiler.umd.js"></script>
$ npm i vue-runtime-template-compiler
$ yarn add vue-runtime-template-compiler
When used with a module system, you must explicitly install the compiler via Vue.use()
:
import Vue from "vue"
import RuntimeTemplateCompiler from "vue-runtime-template-compiler"
Vue.use(RuntimeTemplateCompiler)
To use the Vue Runtime Template Compiler
plugin you just need to import the runtime-template-compiler
component and pass in the template that you want to use. You may either use it as a plugin, or you can use the component directly. Either way you decide to install it the usage of the component will be the same.
Note: When using Webpack you can use code splitting so that you do not load the runtime compiler in to your whole application.
If you have installed the plugin using the Vue.use()
method then you can use the component like this:
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
export default {
data() {
return {
message: 'Hello from the template compiler',
template: `
<h1>{{ message }}</h1>
`
}
}
}
</script>
Or if you choose to you can load the component directly.
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
import { RuntimeTemplateCompiler } from "vue-runtime-template-compiler"
export default {
components: {
RuntimeTemplateCompiler
},
data() {
return {
message: 'Hello from the template compiler',
template: `
<h1>{{ message }}</h1>
`
}
}
}
</script>
The template you pass has access to the parent component scope. You can access computed properties and methods as well from the template.
However if you have wrapped the runtime-template-compiler
in another component it may be necessary to set the parent property on the compiler component, else you might end up with the wrong scope being bound.
<template>
<wrapper-component>
<runtime-template-compiler :template="template" :parent="parentComponent" />
</wrapper-component>
</template>
<script>
import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
import WrapperComponent from './WrapperComponent.vue'
export default {
components: {
RuntimeTemplateCompiler,
WrapperComponent
},
data: () => ({
parentComponent: this,
userName: 'Bob',
template: `<div>Hello {{ userName }}!</div>`,
})
}
</script>
As with the data
object the methods
are also available in the runtime-template-compiler
. You just use them as if you are writing bindings in the parent's compiled template.
Note: These will behave as if they have been called from within the parent component.
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
export default {
components: {
RuntimeTemplateCompiler
},
data: () => ({
userName: 'Bob',
template: `<div @click="logUser(userName)">Hello {{ userName }}!</div>`,
}),
methods: {
logUser(userName) {
console.log(`Users name is: ${userName}`)
}
}
}
</script>
Just like the methods
the computed
properties are available in the runtime-template-compiler
. The same as the other parent property you use them as if you are writing bindings in the parent's compiled template.
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
export default {
components: {
RuntimeTemplateCompiler
},
data: () => ({
userName: 'Bob',
template: `<div>{{ greeting }}!</div>`,
}),
computed: {
greeting() {
return `Hello my name is ${this.userName}`
}
}
}
</script>
Just like the computed
the props
properties are available in the runtime-template-compiler
. The same as the other parent property you use them as if you are writing bindings in the parent's compiled template.
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
export default {
components: {
RuntimeTemplateCompiler
},
props: {
firstName: {
type: String,
default: 'Bob'
},
lastName: {
type: String,
default: 'Example'
}
}
data: () => ({
template: `<div>{{ greeting }}!</div>`,
}),
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}
</script>
Just like the props
the filters
are available in the runtime-template-compiler
. The same as the other parent property you use them as if you are writing bindings in the parent's compiled template.
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
import moment from 'moment'
export default {
components: {
RuntimeTemplateCompiler
},
filters: {
formatDate(date, mask) {
return moment(date).format(mask)
}
},
data: () => ({
template: `
<div>
Hi I'm {{user.name}}, my birthday is {{ user.birthday | formatDate('DD/MM/YYY') }}!
</div>
`,
user: {
name: "Bob",
birthday: new Date(1986,10,30)
}
})
}
</script>
Just like the props
the provide
properties are available in the runtime-template-compiler
. The same as the other parent property you use them as if you are writing bindings in the parent's compiled template.
<template>
<runtime-template-compiler :template="template" />
</template>
<script>
import { RuntimeTemplateCompiler } from 'vue-runtime-template-compiler'
export default {
components: {
RuntimeTemplateCompiler
},
provide: {
name: 'Bob'
}
data: () => ({
template: `<div>{{ name }}!</div>`,
})
}
</script>
To run the test suite, first install the dependencies, then run npm test
:
$ npm install
$ npm test
To check out live examples and docs, visit https://jonwatkins.github.io/vue-runtime-template-compiler/
Vue.js supports all browsers that are ES5-compliant (IE8 and below are not supported).
Detailed changes for each release are documented in the release notes.
Copyright (c) 2020-present Jon Watkins