1 | # vuetify-jsonschema-form
|
2 |
|
3 | Generate forms for the [vuetify](https://vuetifyjs.com/en/) UI library (vuejs) based on annotated JSON schemas.
|
4 |
|
5 | See the [Demo and Templatebuilder](https://digma-form-builder.netlify.com/).
|
6 |
|
7 | ## Installation
|
8 |
|
9 | ```bash
|
10 | npm i --save @dev7ch/vuetify-jsonschema-form
|
11 | ```
|
12 |
|
13 | ## Usage
|
14 |
|
15 | ```html
|
16 | <template>
|
17 | <v-form v-model="formValid">
|
18 | <v-jsonschema-form v-if="schema" :schema="schema" :model="dataObject" :options="options" @error="showError" @change="showChange" @input="showInput" />
|
19 | </v-form>
|
20 | </template>
|
21 |
|
22 | <script>
|
23 | import Vue from 'vue'
|
24 | import Vuetify from 'vuetify'
|
25 | import 'vuetify/dist/vuetify.min.css'
|
26 | import Draggable from 'vuedraggable'
|
27 | import axios from 'axios'
|
28 | import VueAxios from 'vue-axios'
|
29 | import Swatches from 'vue-swatches'
|
30 | import 'vue-swatches/dist/vue-swatches.min.css'
|
31 | import VJsonschemaForm from '@dev7ch/vuetify-jsonschema-form'
|
32 | import '@dev7ch/vuetify-jsonschema-form/dist/main.css'
|
33 | import { Sketch } from 'vue-color'
|
34 |
|
35 | Vue.use(Vuetify)
|
36 | Vue.use(VueAxios, axios)
|
37 |
|
38 | Vue.component('swatches', Swatches)
|
39 | Vue.component('draggable', Draggable)
|
40 | Vue.component('color-picker', Sketch)
|
41 |
|
42 | export default {
|
43 | components: {VJsonschemaForm},
|
44 | data() {
|
45 | return {
|
46 | schema: {...},
|
47 | dataObject: {},
|
48 | formValid: false,
|
49 | options: {
|
50 | debug: false,
|
51 | disableAll: false,
|
52 | autoFoldObjects: true
|
53 | }
|
54 | }
|
55 | },
|
56 | methods: {
|
57 | showError(err) {
|
58 | window.alert(err)
|
59 | },
|
60 | change(e) {
|
61 | console.log('"change" event', e)
|
62 | },
|
63 | input(e) {
|
64 | console.log('"input" event', e)
|
65 | }
|
66 | }
|
67 | }
|
68 | </script>
|
69 | ```
|
70 |
|
71 | The library can also be loaded from source if you use [Vuetify "à la carte"](https://vuetifyjs.com/en/framework/a-la-carte). In this case you will have to instruct your build tool to transpile the source with babel.
|
72 |
|
73 | ```js
|
74 | import VJsonschemaForm from '@dev7ch/vuetify-jsonschema-form/lib/index.vue'
|
75 | ```
|
76 |
|
77 | I you don't use a build tool, and want to load the library through script tags, you can do something like this.
|
78 |
|
79 | ```html
|
80 | ...
|
81 | <script src="https://cdn.jsdelivr.net/npm/@dev7ch/vuetify-jsonschema-form@latest/dist/main.js"></script>
|
82 | <link href="https://cdn.jsdelivr.net/npm/@dev7ch/vuetify-jsonschema-form@latest/dist/main.css" rel="stylesheet">
|
83 | ...
|
84 | <script>
|
85 | ...
|
86 | components: {
|
87 | "v-jsonschema-form": VJsonschemaForm.default
|
88 | }
|
89 | ...
|
90 | </script>
|
91 | ```
|