Getting Started

Installation

npm install @dynamicforms/vuetify-modal-form-kit

In your main.ts:

import { DynamicFormsModalFormKit } from '@dynamicforms/vuetify-modal-form-kit';
import '@dynamicforms/vuetify-modal-form-kit/styles.css';

...
const app = createApp(MyApp);
app.use(router);
app.use(vuetify);

app.use(DynamicFormsModalFormKit);

Basic Usage

Modal dialogs

Add <ModalView /> to your root component to enable the modal system:

<template>
  <v-app>
    <router-view />
    <ModalView />
  </v-app>
</template>

Then call dialogs from anywhere in your application:

import { modal } from '@dynamicforms/vuetify-modal-form-kit';

// Simple message
await modal.message('Done', 'Your changes have been saved.');

// Yes / No confirmation
const answer = await modal.yesNo('Delete item', 'This cannot be undone. Continue?');
if (answer === 'yes') {
  await deleteItem();
}

Form layouts

Use FormBuilder to define a responsive layout in code and render it with <FormRender>:

import { FormBuilder } from '@dynamicforms/vuetify-modal-form-kit';

const form = new FormBuilder();

form.simple(2)
  .dfInput({ label: 'First name' })
  .dfInput({ label: 'Last name' })
  .simple()
  .dfTextArea({ label: 'Notes', rows: 3 });

<template>
  <FormRender :layout="form" />
</template>