@eriksyuan/vc-html

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}	-