Plugins

All components that are quite light and that mostly use Vuetify components are included directly into vjsf. But other components that use more specific dependencies are externalized into plugins.

Using a plugin

Install it:

 npm install @koumoul/vjsf-markdown 

When using compilation at build time, installing the plugin is sufficient and the necessary imports will be taken care of automatically.

When using compilation at runtime, you should import the plugin and provide it to vjsf using the plugins option:

Plugins can use specific options defined in the pluginsOptions options.

import Vjsf from '@koumoul/vjsf'
import VjsfMarkdown from '@koumoul/vjsf-markdown'

const options = {
  plugins: [VjsfMarkdown],
  pluginsOptions: {
    markdown: {...}
  }
}

Known plugins

@koumoul/vjsf-markdown

This plugin provides a rich markdown editor based on EasyMDE. You can customize EasyMDE configuration like so:

const vjsfOptions = {
  plugins: [VjsfMarkdown],
  pluginsOptions: {
    markdown: {
      easyMDEOptions: { minHeight: '300px', maxHeight: '300px' }
    }
  }
}

This plugins uses EasyMDE which is a CommonJS dependency. You might need to declare it to your build system. For example with Vite:

optimizeDeps: {
  include: ['easymde']
}

Writing a custom plugin

A plugin is the recommended way to extend the capabilities of Vjsf with custom components. The alternative way of simply using the component slot is very limited.

You will have to provide a combination of a Vue component with standard props and some metadata to guide the integration of this component in the form. For the time being, the most efficient way to go about it is to have a look at the markdown plugin source code.