JSON Forms Vuetify WebComponent

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

JSON Forms

See jsonforms.io and the main repository for more information about JSON Forms.

Vue Vuetify renderer set

See the README of the Vue Vuetify renderer set for detailed instructions on how to consume and use the JSON Forms Vue Vuetify renderer set.

Developer documentation

Use Node 18.x

Initial setup

Install dependencies: pnpm i --frozen-lockfile

Scripts

Build (all packages): pnpm run build
Build and watch the extended renderer set: pnpm run renderers:watch
Run webcomponent demo: pnpm run wc:dev
Run example app: pnpm run example:dev
Build example app for production: pnpm run example:build
Build VS Code extension: pnpm run tooling:build
Create VSIX VS Code extension package for local deployment: pnpm run tooling:vsix

Recommendations:

For development use pnpm run renderers:watch combined with pnpm run example:dev.
For webcomponent development use pnpm run renderers:watch combined with pnpm run wc:dev.
To test production use pnpm run build combined with pnpm run example:build. Then serve the built application from example/dist with a web server of your choice, e.g. npx http-server example/dist.

VS Code Extension

The webcomponent is used in the VS Code extension project and it is available for preview from the VisualStudio Marketplace

Docker

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

Loading from CDN

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/jsonforms-vuetify-webcomponent@3.1.0-alpha.3/dist/vuetify-json-forms.min.js"
></script>

Continuous Integration

The JSON Forms Vuetify WebComponent project is built and tested via Github actions on Linux.

Current status:

kchobantonov / jsonforms-vuetify-webcomponent

readme