This is a monorepo containing the JSON Forms extended Vuetify renderers, webcomponent, VS Code extension and an example application.
See jsonforms-vuetify-webcomponent.netlify.app for the deployed example application.
The example application is based on JSON Forms Vuetify Renderers example project but adds more examples to demonstrate the additioanal renderers that are included in the webcomponent, like TemplateLayout Renderer
See jsonforms.io and the main repository for more information about JSON Forms.
See the README of the Vue 2 Vuetify renderer set for detailed instructions on how to consume and use the JSON Forms Vue 2 Vuetify renderer set.
Use Node 14.x
- Install monorepo dependencies:
npm ci
- Hook up dependencies between packages:
npm run init
- Build all:
npm run build
- Build and watch the extended renderer set:
npm run renderers:watch
- Run webcomponent demo:
npm run wcserve
- Run example app:
npm run example:serve
- Build example app for production:
npm run example:build
- Build VS Code extension:
npm run tooling:build
- Create VSIX VS Code extension package for local deployment:
npm run tooling:vsix
Recommendations:
- For development use
npm run renderers:watch
combined withnpm run example:serve
. - For webcomponent development use
npm run renderers:watch
combined withnpm run wc:serve
. - To test production use
npm run build
combined withnpm run example:build
. Then serve the built application fromexample/dist
with a web server of your choice, e.g.npx http-server example/dist
.
The webcomponent is used in the VS Code extension project and it is available for preview from the VisualStudio Marketplace
Build a nginx image that hosts the jsonforms vuetify webcomponent and its demo HTML page.
git clone https://github.com/kchobantonov/jsonforms-vuetify-webcomponent.git
docker build -f Dockerfile -t jsonforms-vuetify-webcomponent:latest .
docker run --rm -p 8080:80 jsonforms-vuetify-webcomponent:latest
Open http://localhost:8080/demo.html
For example if we use version 3.1.0-alpha.3
of the webcomponent then using the below HTML snippet we can renders the demo form.
<vuetify-json-forms id="vuetify-json-forms"></vuetify-json-forms>
<script>
let demo = {
properties: {
firstName: {
type: "string",
description: "The person's first name.",
},
lastName: {
type: "string",
description: "The person's last name.",
},
age: {
description:
"Age in years which must be equal to or greater than zero.",
type: "integer",
minimum: 0,
},
},
};
var form = document.getElementById("vuetify-json-forms");
form.setAttribute("schema", JSON.stringify(demo));
</script>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@chobantonov/[email protected]/dist/vuetify-json-forms.min.js"
></script>
rm -f package-lock.json packages/jsonforms-vuetify-tooling/package-lock.json
docker run --rm -v $(pwd):/usr/src/app -w /usr/src/app node:14.21.3 sh -c "npm install && npm run init && cd packages/jsonforms-vuetify-tooling && npm install"
The JSON Forms Vuetify WebComponent project is built and tested via Github actions on Linux.