https://github.com/momsfriendlydevco/vue-template
Compile a simple HTML string via Vue style templates
https://github.com/momsfriendlydevco/vue-template
Last synced: over 1 year ago
JSON representation
Compile a simple HTML string via Vue style templates
- Host: GitHub
- URL: https://github.com/momsfriendlydevco/vue-template
- Owner: MomsFriendlyDevCo
- License: mit
- Created: 2020-06-24T22:16:38.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-30T02:42:25.000Z (almost 3 years ago)
- Last Synced: 2025-03-25T12:50:56.930Z (over 1 year ago)
- Language: JavaScript
- Size: 102 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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.
```javascript
import vueTemplate from '@momsfriendlydevco/vue-template';
let template = vueTemplate('
Hello {{name}}');
await template({name: 'Joe'}); //~= "
Hello Joe"
await template({name: 'Jane'}); //~= "Hello Jane"
```
All built in Vue directives are supported:
```javascript
var vueTemplate = require('@momsfriendlydevco/vue-template');
var template = vueTemplate(`
Hello {{user.name.first}} {{user.name.last}}
Your favourite color
is blue
isNOTblue
Your pets are:
-
{{pet.name}} ({{pet.type}})
You have no pets (aw!)
`);
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](./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 components
* `events` - Events are entirely unsupported as this is a "one-pass" templator that returns HTML and does not react to async states
API
===
vueTemplate(html)
-----------------
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.
template(data)
--------------
Takes an object of context data to use when rendering, renders the template and returns the HTML output.
All functions are automatically converted into Vue component methods.