This repository is considered deprecated and will be archived.
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.jsUnpkg.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/vue-runtime-template-compiler@1.1.0/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/vue@2.6.11/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 testTo 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