Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/varletjs/varlet-schema
Lightweight Schema renderer based on Vue3
https://github.com/varletjs/varlet-schema
schema varlet vue3
Last synced: about 2 months ago
JSON representation
Lightweight Schema renderer based on Vue3
- Host: GitHub
- URL: https://github.com/varletjs/varlet-schema
- Owner: varletjs
- License: mit
- Created: 2023-10-29T16:38:57.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-16T11:13:41.000Z (12 months ago)
- Last Synced: 2024-01-16T18:05:11.081Z (12 months ago)
- Topics: schema, varlet, vue3
- Language: TypeScript
- Homepage: https://varletjs.github.io/varlet-schema/
- Size: 6.34 MB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
### Intro
Varlet Schema is a Lightweight Schema renderer based on Vue3, developed and maintained by `varletjs` community team.
### Install
```shell
# 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.
```html
Varlet Schema Playground
```
#### Basic Usage
```vue
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'
}
}
]
}
]
})
```
### More Example Info
[See Playground](https://github.com/varletjs/varlet-schema/tree/main/packages/varlet-schema-playground)
### Community
We recommend that `issue` be used for problem feedback, or others:
* Wechat group
* Join the [Discord](https://discord.gg/Dmb8ydBHkw)
### 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
#### Wechat / Alipay
