vc-html

vue3 component replace v-html directive

Install

npm install @eriksyuan/vc-html

Usage

<script setup>
import InnerHtml from '@eriksyuan/vc-html'
const html = '<div>hello world</div>'
</script>

<template>
  <InnerHtml :nodes="html" />
</template>

Example

SFC Playground

demo

<script setup>
import InnerHtml from '@eriksyuan/vc-html'
const html = `
<div>
    <ul>
        <li id="main">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<div>hello world</div>`
</script>

<template>
  <InnerHtml :nodes="html">
    <template #li="{ node, render, childrenRender }">
      <template v-if="node.props.id === 'main'">
        <component :is="render" />
      </template>
      <li v-else>
        <component :is="childrenRender" />0
      </li>
    </template>
  </InnerHtml>
</template>

results

<div>
    <ul>
        <li id="main">1</li>
        <li>20</li>
        <li>30</li>
        <li>40</li> 
        <li>50</li>
    </ul>
</div>

Props

| Name | Type | Default | Description | | ----- | ------ | ------- | ----------- | | nodes | string | '' | html string |

Slots

| Name | Parameters | Description | | --------- | ------------------------------------------------------------------- | ----------- | | [key:tag] | { node:Node, render:renderFunction,childrenRender:renderFunction} | - |