Vue Forms - Overview

DevExtreme Vue Form is a UI component for data editing that provides a customizable layout for arranging editors in columns, groups, and tabs. Best suitable editors are chosen automatically depending on the data type. You can use Vue syntax and techniques to instantiate and configure the Form or handle its events. In addition, the component supports prop validation and templates that use named slots. Find out more about DevExtreme Vue components.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <DxForm :form-data="formData"> <template #avatar-template="{}"> <div class="form-avatar"/> </template> <DxGroupItem :col-count="4" css-class="form-group" > <DxSimpleItem template="avatar-template"/> <DxGroupItem :col-span="3"> <DxSimpleItem data-field="FirstName"/> <DxSimpleItem data-field="LastName"/> <DxSimpleItem :editor-options="birthDateOptions" data-field="BirthDate" editor-type="dxDateBox" /> </DxGroupItem> </DxGroupItem> <DxGroupItem :col-count="2" css-class="form-group" > <DxGroupItem> <DxSimpleItem data-field="Address"/> <DxSimpleItem data-field="City"/> <DxSimpleItem :editor-options="positionOptions" data-field="Position" editor-type="dxSelectBox" /> </DxGroupItem> <DxGroupItem> <DxSimpleItem :editor-options="stateOptions" data-field="State" editor-type="dxSelectBox" /> <DxSimpleItem data-field="ZipCode"/> <DxSimpleItem :editor-options="phoneOptions" data-field="Mobile" > <DxLabel text="Phone"/> </DxSimpleItem> </DxGroupItem> <DxSimpleItem :col-span="2" :editor-options="notesOptions" data-field="Notes" editor-type="dxTextArea" /> </DxGroupItem> </DxForm> </template> <script setup lang="ts"> import { DxForm, DxSimpleItem, DxGroupItem, DxLabel, } from 'devextreme-vue/form'; // eslint-disable-next-line import { DxTextArea } from 'devextreme-vue/text-area'; // needs for editor-type="dxTextArea" import { employee, positions, states } from './data.ts'; const formData = employee; const birthDateOptions = { width: '100%' }; const positionOptions = { items: positions, value: '', }; const stateOptions = { items: states, }; const phoneOptions = { mask: '+1 (000) 000-0000' }; const notesOptions = { height: 140 }; </script> <style> .form-group { padding: 20px; } .form-avatar { height: 128px; width: 128px; margin-right: 10px; border: 1px solid #d2d3d5; border-radius: 50%; background-image: url("../../../../images/petersmith.png"); background-size: contain; background-repeat: no-repeat; background-position: center; } </style>

export const employee = { ID: 1, FirstName: 'John', LastName: 'Heart', Position: 'CEO', BirthDate: '1964/03/16', HireDate: '1995/01/15', Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAV as its CEO since 2003.\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', Address: '351 S Hill St.', City: 'Los Angeles', State: 'CA', ZipCode: '90013', Home: '555-684-1334', Mobile: '555-684-1335', Email: 'jheart@dx-email.com', Skype: 'jheart_DX_skype', }; export const positions = [ 'HR Manager', 'IT Manager', 'Controller', 'CEO', 'Sales Manager', 'Support Manager', 'Shipping Manager', ]; export const states = ['AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'FL', 'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'];

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <script src="https://cdn.jsdelivr.net/npm/typescript@5.4.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://cdn.jsdelivr.net/npm/@vue/compiler-sfc@3.4.27/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>