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

alexjoverm
452 Stars 54 Forks MIT License 64 Commits 24 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

v-runtime-template

npm npm Donate

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

v-html
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

Motivation

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

v-html
equivalent that also understands vue template syntax (while
v-html
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

vue
to the
vue/dist/vue.common
file.

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

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

And in Nuxt, open the

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

Usage

You just need to import the

v-runtime-template
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

AppMessage
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"); }, }, };

Limitations

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.

Comparison

v-runtime-template VS v-html

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

v-html
. 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,

[v-html](https://vuejs.org/v2/api/#v-html)
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.