Vue Flext

Vue Flext is a lightweight wrapper around Flext. It compiles Handlebars‑like templates with a small set of macros and modules and exposes the result through a simple Vue component. The library ships with ESM and UMD bundles.

• Demo: Available at CodeSandbox
• Documentation: Available at TrustMe Wiki

Vue Flext is maintained by TrustMe.

Example

<script setup lang="ts">
  
import { ref } from 'vue';
import Flext from 'vue-flext';

const template = ref(`
  {{!-- @v "1.0.beta3" --}}
  {{!-- @use "put" --}}

  <div class="text-center text-red-500">{{ put data.helloWorld 'No hello world...' }}</div>
`);

const data = ref({ helloWorld: 'Hello World!' });

</script>

<template>
  <Flext :template="template" v-model="data" />
</template>

Installation

1. Install dependencies:

npm i vue-flext tailwindcss @trustme24/flext

2. Add the CSS import in your CSS file:

@import "vue-flext/index.css";

3. You're all set!

Vue Flext by Kenny Romanov
TrustMe