DOCSEARCHbyAlgolia
Submit Docs

vuetify-jsonschema-form

repository·master·Indexed 20 days ago

https://github.com/koumoul-dev/vuetify-jsonschema-form

A framework for generating Vuetify-based forms using JSON Schema for data validation and JSON Layout for visual structure. It includes the @koumoul/vjsf core library and @koumoul/vjsf-compiler for transforming schemas into Vue component source code. The ecosystem supports plugins such as @koumoul/vjsf-img-cropper for Markdown image cropping and provides a Vjsf component for rendering forms with support for precompiled layouts and two-way data binding.

Tokens
8K
Snippets
36
Records
40
Agent score
70%

What's inside vjsf

  1. Overview of VJSF

    master

    VJSF allows you to easily create beautiful forms that output valid data by leveraging the following technologies:

    • Vue.js: The underlying UI framework.
    • Vuetify: For the component UI layer.
    • JSON Schema: To define the data structure and validation rules.
    • JSON Layout: To define the visual arrangement of form elements.

  3. Publish library versions and documentation

    master

    Publishing a standard release

    To release a minor version and publish the library:

    npm -w lib version minor
npm -w lib publish
git push

    Publishing a beta version

    To publish a beta version using a next tag:

    npm -w lib version preminor --preid=beta
npm -w lib publish --tag=next

    Publishing updated documentation

    After a library release, update doc/package.json and run:

    rm -rf doc/node_modules
npm -w doc install
npm run publish:latest
    # Standard release
npm -w lib version minor
npm -w lib publish

# Beta release
npm -w lib version preminor --preid=beta
npm -w lib publish --tag=next

# Documentation update
rm -rf doc/node_modules
npm -w doc install
npm run publish:latest

  4. Start the local development server

    master

    To view the documentation site locally with hot-reloading for both the library source and the documentation examples, follow these steps:

    1. Install dependencies in the root.
    2. Install dependencies in the doc directory.
    3. Run the development server command.

    Note: A "Development" group of examples is available in the documentation for maintainer-focused examples that do not need to be public-facing.

    npm install
cd doc
npm install
cd -
npm run dev-zellij

  5. Work on json-layout locally

    master

    The project uses relative-deps to link local json-layout modules. Use the following commands to add the necessary local dependencies to the lib and doc workspaces:

    npx -w lib relative-deps add ../../json-layout/core/
npx -w lib relative-deps add ../../json-layout/vocabulary/
npx -w doc relative-deps add ../../json-layout/examples/

  6. Run and update Vitest snapshots

    master

    The test suite is powered by Vitest. In this project, test cases and documented examples are unified.

    • Running tests: Execute npm run test. This renders examples and compares HTML snapshots.
    • Handling snapshot failures: If a snapshot diff is expected and valid, run npm run test-update to update the snapshots.
    • Writing tests: You can create new hidden examples by prefixing the filename with an underscore (e.g., _example.js) to cover edge cases without cluttering the public documentation. You can also add custom assertions directly within the examples.
    npm run test
npm run test-update

  11. Set up VJSF with Vite and TypeScript

    master

    To use VJSF in a modern Vite-based TypeScript project, follow these steps:

    1. Initialize a Vuetify project: Use the official Vuetify scaffolding tool.
    2. Install VJSF: Add the @koumoul/vjsf package to your project.
    3. Configure CommonJS dependencies: VJSF exports a commonjsDeps list. You must import and use this in your vite.config.ts to ensure your build system correctly handles these dependencies.
    4. Define Schemas: Create your JSON schemas (e.g., src/schemas/person.json).
    5. Implement Component: Import and use VJSF within your Vue components (e.g., src/App.vue).
    6. Runtime Compilation (Optional): If you require schema compilation at runtime, you can use a script similar to scripts/compile-schemas.js to prepare your schemas.
    # 1. Create Vuetify project
npm create vuetify
# Project name: vite-typescript
# Preset: Default (Vuetify)
# TypeScript: Yes
# Package manager: npm

# 2. Install VJSF
cd vite-typescript
npm install @koumoul/vjsf

  12. Run quality checks and linting

    master

    The project uses husky for pre-commit hooks. You can manually run the following commands to ensure code quality:

    • Linting: Uses eslint to check the source code. Run npm run lint.
    • Testing: Run npm test to execute the test suite.
    • Pre-publishing checks: Run npm run prepublishOnly to run all checks required before publishing.
    npm run lint
npm test
npm run prepublishOnly