Varlet Schema is a Lightweight Schema renderer based on Vue3, developed and maintained by varletjs community team.
# Install with npm or yarn or pnpm
# npm
npm i @varlet/schema-renderer -S
# yarn
yarn add @varlet/schema-renderer
# pnpm
pnpm add @varlet/schema-rendererSchema rendering uses eval. Eval is not allowed to be used in strict mode, but script module is in strict mode. So we have to do the following.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Varlet Schema Playground</title>
<script src="https://cdn.jsdelivr.net/npm/@varlet/schema-eval-with/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html><script setup lang="ts">
import { Button, Snackbar } from '@varlet/ui'
import { SchemaRenderer, type SchemaPageNode } from '@varlet/schema-renderer'
import { shallowRef } from 'vue'
const components = shallowRef({
Button,
})
const injects = shallowRef({
Snackbar
})
const schema = shallowRef<SchemaPageNode>({
name: 'Page',
code: `\
function setup() {
const count = ref(0)
onMounted(() => {
Snackbar('hello')
})
function handleClick() {
count.value++
}
return { count, handleClick }
}\
`,
children: [
{
name: 'Button',
props: {
onClick: {
type: 'Expression',
value: 'handleClick'
}
},
children: [
{
name: 'Text',
value: {
type: 'Expression',
value: 'count.value'
}
}
]
}
]
})
</script>
<template>
<schema-renderer :components="components" :injects="injects" :schema="schema" />
</template>We recommend that issue be used for problem feedback, or others:
- Wechat group
- Join the Discord
Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.
