Getting started

Load from CDN

<script src="https://cdn.jsdelivr.net/npm/@koumoul/vjsf@latest/dist/main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@koumoul/vjsf@latest/dist/main.css">
<!-- load third-party dependencies (markdown-it, vuedraggable) -->
<!-- you can also load them separately based on your needs -->
<script src="https://cdn.jsdelivr.net/npm/@koumoul/vjsf@latest/dist/third-party.js"></script>

Vue.component('VJsf', VJsf.default)

Load from NPM

npm install --save @koumoul/vjsf

Import built version of the module

import VJsf from '@koumoul/vjsf'
import '@koumoul/vjsf/dist/main.css'
// load third-party dependencies (markdown-it, vuedraggable)
// you can also load them separately based on your needs
import '@koumoul/vjsf/dist/third-party.js'

Vue.component('VJsf', VJsf)

Import module from source

This is useful if you wish to let your build tool analyze the source code of vjsf. Particularily interesting if you use vuetify-loader.

import VJsf from '@koumoul/vjsf/lib/VJsf.js'
import '@koumoul/vjsf/lib/VJsf.css'
// load third-party dependencies (markdown-it, vuedraggable)
// you can also load them separately based on your needs
import '@koumoul/vjsf/lib/deps/third-party.js'

Vue.component('VJsf', VJsf)

// you should have something like the following somewhere in webpack.config.js or nuxt.config.js, etc.
build: {
  transpile: ['vuetify/lib', /@koumoul/], // necessary for "à la carte" import of vuetify components
}

Usage

<v-form v-model="valid">
  <v-jsf v-model="model" :schema="schema" :options="options" />
</ v-form>

Vue CLI setup

This is an example of getting started with vjsf in a new Vue CLI project. First run these commands:

npm install -g @vue/cli
vue create my-app
cd my-app
vue add vuetify
npm install -g @koumoul/vjsf

Edit vue.config.js to look like this:

module.exports = {
  "transpileDependencies": [
    "vuetify", "@koumoul/vjsf"
  ]
}

Then replace the content of src/App.vue with this code:

<template>
  <v-app>
    <v-main>
      <v-form v-model="valid">
        <v-jsf v-model="model" :schema="schema"/>
      </v-form>
      <p>valid=</p>
      <pre></pre>
    </v-main>
  </v-app>
</template>

<script>
import VJsf from '@koumoul/vjsf/lib/VJsf.js'
import '@koumoul/vjsf/lib/VJsf.css'
import '@koumoul/vjsf/lib/deps/third-party.js'

export default {
  name: 'App',
  components: { VJsf },
  data: () => ({
    valid: false,
    model: {},
    schema: {
      type: 'object',
      properties: {
        stringProp: { type: 'string' },
        colorProp: { type: 'string', 'x-display': 'color-picker' },
      }
    }
  }),
};
</script>

Finally check that everything is working with npm run serve.