Hello.

I’ve been using Quasar since 0.13x. I’ve architected quite a few platforms using Quasar as the underlying UI framework. Quasar is technically superior in many ways to any other UI framework I’ve used, but I don’t see a lot of people showing some major stuff working in the community vs other platforms (i.e Vuetify has a lot more production apps on display than Quasar).

I think this incorrectly leads people to think Vuetify may be better, and that is incorrect.

Here are some projects that use Quasar under the hood that I’ve architected:

https://experience.aerialhealth.io/ (formerly GSI Health, this is a complete medical platform. This uses Quasar Framework on the front end, and Spring/Java on the backend, with a Node.js API gateway. This was architected from an outdated Java monolith over a period of about 6 months)

https://life.io/ (this uses Quasar Framework on the front end, and Node.js on the backend. This was architected from scratch over the period of about a year, this includes a full education and customer engagement platform. This is used by some of the biggest names in the insurance industry).

https://sourcedigital.net (this is a content delivery framework used by NBC, Universal Studios, MotorTrend, the Golf Channel, VUDU and many other big names. This was architected from scratch over the period of about 6 months. This includes all build targets including a desktop app, a Browser extension, and iOS and Android apps. This uses Quasar Framework on the front end, Strapi on the backend, and Kubernetes to scale).

https://demo.valuecare365.com (this is another medical platform. Full HIPPA compliance and ISO certified. This is being adopted by hospitals across the US. This uses Quasar Framework on the front-end, and FeathersJS on the backend. It uses Kubernetes to scale).

Raw JSON…

Here is a Vue-based JSON editor that even uses Schemas: https://vuejsfeed.com/blog/a-schema-aware-json-editor-developed-with-vue-js

Here is a vue-based JSON editor that is a lot simpler: https://jinkin1995.github.io/vue-json-edit/

JSON/Form generator…

Here is an opinionated way to create JSON forms: https://github.com/yourtion/vue-json-ui-editor

Here is an unopinionated way to create JSON forms (even works directly with Quasar or any Vue components - this is what I use): https://github.com/jarvelov/vue-form-json-schema

Here are more choices, depending on your needs: https://morioh.com/p/130d79a6cc77

@crazymind for what it’s worth, this is all you have to do to convert the Quasar UID to a UUID v4:

function uuid () {
let uuid = uid()
return uuid.substr(0, 14) + ‘4’ + uuid.substr(15)
}

While Quasar uid() uses Math.random() for speed, and for which a very feeble case for “but it’s not technically cryptographic quality” can be made, that argument simply cannot be made for avoiding collisions as Math.random() indeed is an excellent source of entropy which is all UUID v4 promises.

You can feel confident that simply adding the 4 makes it UUID compatible, it will pass all UUID validators, and your UUIDs can play in the global UUID space properly without collisions.

Since Quasar Framework has gone through effort to mimic a UUID look and feel, I think it may have been developed either before UUID v4, or was kept non-standard because weird math Nazis like to chastise Math.random(), much to the detriment of the entire universe. I bet my life that this will serve you just find if you run on standard browsers and don’t let anyone hijack Math.random() with something stupid in your code.

WOW. Just… WOW. I spent a day testing vue-form-json-schema, and not only is it FULLY Quasar compatible, you can literally use this to create ENTIRE LAYOUTS not just a single Quasar form… HOLY COW is it powerful with Quasar…

For anyone that would like to quickly use vue-form-json-schema with Quasar, here is some of my testing work…

Just “npm i vue-form-json-schema” in your Quasar project, create a component and paste this code into it…

<template>
<div class="">
   <vue-form-json-schema
    v-model="value"
    :schema="schema"
    :ui-schema="uiSchema"
    v-on:state-change="onChangeState"
    v-on:validated="onValidated"
    :components="components"
  />
</div>

</template>

<script>
import { QInput, QCard, QExpansionItem } from 'quasar'
import VueFormJsonSchema from 'vue-form-json-schema/dist/vue-form-json-schema.esm.js'
export default {
  props: ['value', 'schema', 'uiSchema'],
  components: {
    VueFormJsonSchema
  },
  data () {
    return {
      components: { // Add your sandboxed quasar or other components here (if you don't add it here, you can't use them)
        'input': QInput,
        'card': QCard,
        'expansion': QExpansionItem
      }
    }
  },
  methods: {
    onChange (value) {
      this.$emit('change', value)
    },
    onChangeState (value) {
      this.$emit('state', value)
    },
    onValidated (value) {
      this.$emit('valid', value)
    }
  }
}
</script>

Then from anywhere in app, add this to your template (you’ll have to add the above component to your project as well of course):

<form-generator v-model="yourModel" :schema="yourSchema" :uiSchema="yourUISchema"/>

If you want some quick data that you can use to just see it working immediately, here is a q-card, with padding and spacing set, and inside it 2 input items, and they are all generated right from schema that you can put into config …

yourModel: {
        firstName: '', lastName: ''
      },
      yourSchema: {
        type: 'object',
        properties: {
          firstName: {
            type: 'string'
          },
          lastName: {
            type: 'string'
          }
        }
      },
      yourUISchema: [
        {
          component: 'card',
          fieldOptions: {
            class: ['q-ma-xl', 'q-pa-md']
          },
          children: [
            {
              component: 'input',
              model: 'firstName',
              fieldOptions: {
                on: ['input'],
                props: { outlined: true, label: 'First Name' }
              }
            },
            {
              component: 'input',
              model: 'lastName',
              fieldOptions: {
                props: { rounded: true, outlined: true, label: 'Last Name' },
                class: ['q-pa-xl'],
                on: ['input']
              }
            }
          ]
        }
      ]