Vuelr

Vuelr is a component for live rendering Vue.js components and templates in the browser.

Demo | Documentation

Installation

Vuelr is available as an npm package.

npm install vuelr

Import Vuelr in your Vue entry file:

import { createApp } from 'vue';
import { createVuelr } from 'vuelr';

createApp(App).use(createVuelr()).mount('#app');

Usage

<template>
  <Vuelr :code="code" v-slot="{ target }">
    <div :id="target" />
    <textarea v-model="code" />
  </Vuelr>
</template>

<script lang="ts">
export default defineComponent({
  setup() {
    return {
      code: ref('<p>Hello world!</p>'),
    };
  },
});
</script>

License

This project is licensed under the MIT license.