@jsonforms/vue-vuetify

npmpackage.info

Gathering detailed insights and metrics for @jsonforms/vue-vuetify

Other packages similar to @jsonforms/vue-vuetify

@jsonforms/vue2-vuetify

3.0.0

Vue 2 Vuetify renderers for JSON Forms

@cznethub/cznet-vue-core

0.2.39

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

@backoffice-plus/jsonforms-vue-vanilla

0.1.3

This is a set of vanilla renderers for JSON Forms 3.2 for Vue 3. Most renderers are direct ports from the [Vue 2 Vuetify renderer set](https://github.com/eclipsesource/jsonforms-vuetify-renderers) and thus fill the gap of missing renderers from the [Vue 3

@pvale/vue-vuetify

3.2.1-alpha.5-1

Vue Vuetify renderers for JSON Forms

Gathering detailed insights and metrics for @jsonforms/vue-vuetify

Vue Vuetify Renderers

This is the JSON Forms Vue Vuetify renderers package which provides a Vuetify based renderer set for JSON Forms Vue. The renderers are in a preview state.

Quick start

Install JSON Forms Core, Vue 3 and Vue 3 Vuetify Renderers.

1npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vuetify

Also add the packages to the transpile dependencies in the vite.config.js file:

1// https://vitejs.dev/config/ 2export default defineConfig({ 3 optimizeDeps: { 4 // Exclude vuetify since it has an issue with vite dev - TypeError: makeVExpansionPanelTextProps is not a function - the makeVExpansionPanelTextProps is used before it is defined 5 exclude: ['vuetify'], 6 }, 7 8 // more config.... 9});

Use the json-forms component for each form you want to render and hand over the renderer set.

1<script> 2import { JsonForms } from '@jsonforms/vue'; 3import { extendedVuetifyRenderers } from '@jsonforms/vue-vuetify'; 4import { markRaw } from 'vue'; 5 6const renderers = markRaw([ 7 ...extendedVuetifyRenderers, 8 // here you can add custom renderers 9]); 10 11export default defineComponent({ 12 name: 'app', 13 components: { 14 JsonForms, 15 }, 16 data() { 17 return { 18 renderers: Object.freeze(renderers), 19 data, 20 schema, 21 uischema, 22 }; 23 }, 24 methods: { 25 onChange(event) { 26 this.data = event.data; 27 }, 28 }, 29}); 30</script> 31 32<template> 33 <json-forms 34 :data="data" 35 :schema="schema" 36 :uischema="uischema" 37 :renderers="renderers" 38 @change="onChange" 39 /> 40</template> 41 42<style> 43@import '@jsonforms/vue-vuetify/lib/jsonforms-vue-vuetify.css'; 44</style>

In your vuetify creation specify the icons used

Material Design Icons (mdi)

1import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi'; 2import { createVuetify } from 'vuetify'; 3 4import { mdiIconAliases } from '@jsonforms/vue-vuetify'; 5import '@mdi/font/css/materialdesignicons.css'; 6 7createVuetify({ 8 icons: { 9 defaultSet: 'mdi', 10 sets: { 11 mdi, 12 }, 13 aliases: { ...mdiAliases, ...mdiIconAliases };, 14 }, 15 });

Font Awesome (fa)

1import { fa, aliases as faAliases } from 'vuetify/iconsets/fa'; 2import { createVuetify } from 'vuetify'; 3 4import { faIconAliases } from '@jsonforms/vue-vuetify'; 5import '@fortawesome/fontawesome-free/css/all.css'; 6 7createVuetify({ 8 icons: { 9 defaultSet: 'fa', 10 sets: { 11 fa, 12 }, 13 aliases: { ...faAliases, ...faIconAliases };, 14 }, 15 });

For more information on how JSON Forms can be configured, please see the README of @jsonforms/vue.

Other packages similar to @jsonforms/vue-vuetify

Other packages similar to @jsonforms/vue-vuetify

Installations

Developer Guide

No

ESM

18.20.5

10.8.2

Pull Requests

15

1,254

160

1,079

Issues

125

1,213

1,088

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

JSON Forms - More Forms. Less Code

Vue Vuetify Renderers

Quick start

License

10

10

10

10

10

7

3

0

0

0

0

0

0

5.1

/10