Quasar App Extension Form

Form Builder for Quasar

Install

quasar ext add form

Quasar CLI will retrieve it from NPM and install the extension.

Uninstall

quasar ext remove form

Usage

This examples generates a simple form with an email field, with its value stored on model.email:

<template>
<purple-form :schema="schema" :model="model" />
</template>

<script>
export default {
  data () {
    return {
      model: {}
    }
  },
  computed: {
    schema () {
      return [
        {
          component: 'q-input',
          modelKey: 'email', // key of the input's value on the model object
          props: { // QInput props
            dense: true,
            label: 'Email',
            rules: [
              val => !!val || 'Field is required'
            ]
          },
          on: {}, // listen to QInput events
          attrs: { // component native attributes (like id, type)
            type: 'email'
          },
          hidden: () => this.visible // acts like v-if
        }
      ]
    }
  }
}
</script>

Troubleshooting

The Quasar Auto Import feature doesn't work on the PurpleForm component, so if you're trying to use e.g. component: 'q-input' and you're seeing unknown custom component 'q-input', you have two options to fix this:

1. Add 'QInput' to quasar.conf.js > framework > components
2. instead of using component: 'q-input', use the following:

import QInput from 'quasar'

...and on your schema:
{
  component: QInput
}

If you're using the QInput component on another page of your app, you won't see this problem since the auto import feature will read that.