vue-app-form

AppForm

Generate Form for quasar

Install npm or yarn

npm i vue-app-form
yarn add vue-app-form

Documentation

In your vue3 applications import component

<script setup lang="ts">
import { QInput } from 'quasar'
import { z } from 'zod'
import { AppForm, AppFormSchemaField } from 'vue-app-form'

const modelSchema = z.object({
  name: z.string().noempty(),
})

const schema: AppFormSchemaField[] = [
  {
    scope: 'name',
    component: QInput,
    defaultValue: '',
    componentProps: {
      label: 'Namn',
      // component props i.e from quasar
      square: true,
    },
  },
]
</script>

<template>
  <app-form :schema="schema" :model-schema="modelSchema" />
</template>

AppForm

AppFormSchemaField interface

AppSelect

Easy to use quasar q-select with filtering, add new value, checkbox list.

<script setup lang="ts">
import { ref } from 'vue'
import { AppSelect } from 'vue-app-form'

const model = ref([])
const options = [
   {
      value: 1,
      label: 'Test',
      // optional
      caption: 'Caption'
      disable: true
   },
   {
      value: 2,
      label: 'Test 2',
   }
]
</script>

<template>
  <app-select v-model="model" multiple :options="options" new-value />
</template>