Skip to content

varletjs/varlet-schema

Repository files navigation

Intro

Varlet Schema is a Lightweight Schema renderer based on Vue3, developed and maintained by varletjs community team.

Install

# 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-renderer

Basic Usage

Inject eval in index.html

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

Basic Usage

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

More Example Info

See Playground

Community

We recommend that issue be used for problem feedback, or others:

  • Wechat group

Thanks to contributors

Thanks to the following sponsors

Sponsor this project

Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.

Afdian

https://afdian.net/a/haoziqaq

Wechat / Alipay