Need help with v-runtime-template?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

452 Stars 54 Forks MIT License 64 Commits 24 Opened issues


Vue component for compiling templates on the fly using a v-html like API

Services available


Need anything else?

Contributors list

No Data


npm npm Donate

A Vue.js components that makes easy compiling and interpreting a Vue.js template at runtime by using a

like API.

Do you know VueDose? It's where you can learn tips about the Vue.js ecosystem in a concise format, perfect for busy devs! 🦄

See Demo on CodeSandbox


This library solves the case where you get a vue-syntax template string on runtime, usually from a server. Think of a feature where you allow the user to create their own interfaces and structures. You save that as a vue template in your database, which your UI will request later. While components are pre-compiled at build time, this case isn't (since the template is received at runtime) and needs to be compiled at runtime.

v-runtime-template compiles that template and attaches it to the scope of the component that uses it, so it has access to its data, props, methods and computed properties.

Think of it as the

equivalent that also understands vue template syntax (while
is just for plain HTML).

Getting Started

Install it:

npm install v-runtime-template

You must use the with-compiler Vue.js version. This is needed in order to compile on-the-fly Vue.js templates. For that, you can set a webpack alias for

to the

For example, if you use the Vue CLI, create or modify the

file adding the following alias:
// vue.config.js
module.exports = {
  runtimeCompiler: true

And in Nuxt, open the

file and extend the webpack config by adding the following line to the
// nuxt.config.js
  build: {
    extend(config, { isDev, isClient }) {
      config.resolve.alias["vue"] = "vue/dist/vue.common";
      // ...


You just need to import the

component, and pass the template you want:

The template you pass have access to the parent component instance. For example, in the last example we're using the

component and accessing the
{{ name }}
state variable.

But you can access computed properties and methods as well from the template:

export default {
  data: () => ({
    name: "Mellow",
    template: `
Hello {{ name }}! Say Hi!

{{ someComputed }}

`, }), computed: { someComputed() { return "Wow, I'm computed"; }, }, methods: { sayHi() { console.log("Hi"); }, }, };


Keep in mind that the template can only access the instance properties of the component who is using it. Read this issue for more information.


v-runtime-template VS v-html

TL;DR: If you need to interpret only HTML, use

. Use this library otherwise.

They both have the same goal: to interpret and attach a piece of structure to a scope at runtime. The difference is,

doesn't understand vue template syntax, but only HTML. So, while this code works:

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.