README
@MomsFriendlyDevCo/Vue-Template
Compile a simple HTML string via Vue style templates.
This package exports a single function to compile a Vue-style template and return a render function which can then be provided with data.
var vueTemplate = require('@momsfriendlydevco/vue-template');
var template = vueTemplate('<div>Hello {{name}}</div>');
template({name: 'Joe'}); //= "<div>Hello Joe</div>"
template({name: 'Jane'}); //= "<div>Hello Jane</div>"
All built in Vue directives are supported:
var vueTemplate = require('@momsfriendlydevco/vue-template');
var template = vueTemplate(`
<body>
<p>Hello {{user.name.first}} {{user.name.last}}</p>
<p>
Your favourite color
<span v-if="user.color.toLowerCase() == 'blue'">is blue</span>
<span v-else>is<strong>NOT</strong>blue</span>
</p>
<p>
Your pets are:
<ol v-if="user.pets && user.pets.length">
<li v-for="pet in user.pets">
{{pet.name}} ({{pet.type}})
</li>
</ol>
<span v-else>You have no pets (aw!)</span>
</p>
</body>
`);
template({
user: {
name: {first: 'Joe', middle: 'H', last: 'Random'},
color: 'Red',
pets: [
{name: 'Pepper', type: 'Cat'},
{name: 'Meg', type: 'Dog'},
],
},
}) // Compiled version of the above template
Support table
The below is a non-exhaustive list of templating functions that are supported. If you find a Vue feature that isn't listed below please file an issue or add a test for it.
Feature | Supported | Notes |
---|---|---|
v-if |
:white_check_mark: | |
v-on |
:no_entry_sign: | events |
v-for |
:white_check_mark: | |
v-pre |
? | |
v-bind |
? | |
v-else |
:white_check_mark: | |
v-else-if |
:white_check_mark: | |
v-html |
? | |
v-once |
:no_entry_sign: | events |
v-show |
? | |
v-slot |
:no_entry_sign: | components |
v-text |
? | |
v-cloak |
? | |
v-model |
? | |
:class |
:white_check_mark: | classes |
:style |
? |
Notes:
classes
- All styles of class binding are supported (e.g. static, lookup, array lookup, objects, mixed)components
- At this point this module does not support custom componentsevents
- Events are entirely unsupported as this is a "one-pass" templator that returns HTML and does not react to async states
API
vueTemplate(html, options)
Compile raw HTML into a Vue render function and return a template wrapper function. See template(data)
for documentation on how to use the templator return.
Options:
Option | Type | Default | Description |
---|---|---|---|
context |
Object |
{} |
Additional vue-template-compiler context to inject |
selfClosingTags |
Set |
See code | A Set object initialized with all tags which support the HTML self closing spec |
async |
Boolean |
false |
Treat all functions as potencially async, the template function is a promise instead of a string return |
keySeralize |
Function |
JSON.stringify |
How to handle template seralization |
template(data)
Takes an object of context data to use when rendering, renders the template and returns the HTML output.
This can be a Promise if {async: true}
in the initial call.
Notes on using Aysnc:
- Promises are waited on - If a function returns an async / promisable that function is waited for before re-rendering with the result return
- Functions are wrapped to provide this functionality - All input data functions are wrapped to handle this functionality
- All functions are assumed to be "pure" - calling the same function with the same arguments will only run once and return the first result only
- Promises are evaluated to one level only - A promise returning another promise will throw rather than render