Usage with Vue.js

Below are the two ways of integrating Phormal in a Vue application. Fow now, a component is only available for Vue 3. For Vue 2, you save the Phormal instance directly in a data property.

As a component

For a code example, please refer to the Vue 3 example in Getting started.

Props

Prop	Description
`fields`	See fields argument to Phormal constructor
`config`	config argument to Phormal constructor Please note, that you do not need to specify the `el` config property. The component does this for you.

Methods

Prop	Description
`$validate`	Runs the validators of all fields. Returns `true` if all fields are valid, otherwise `false`
`$values`	Returns an object with key-value pairs, key being the field name, and the value being its current value

As a data property

You can also save an instance of Phormal directly in a data property. If you need to set up watchers for a form field value, this is the preferred approach. First install:

npm install @phormal/core @phormal/theme-basic

Then:

<template>
  <div id="phormal"></div>
</template>
 
<script>
import {Phormal} from '@phormal/core';
 
export default {
  data() {
    return {
      formFields: {
        name: {
          type: 'text',
          label: 'Name',
          placeholder: 'Enter your name',
          value: 'John Doe'
        },
      },
      formConfig: {
        theme: 'basic',
        el: '#phormal'
      },
      form: null
    }
  },
 
  mounted() {
    this.form = new Phormal(this.formFields, this.formConfig);
  },
 
  methods: {
    validate() {
      this.form.$validate();
    },
 
    getValues() {
      return this.form.$values(); // { name: 'John Doe' }
    }
  },
 
  watch: {
    'form.name': {
      handler: function (val) {
        console.log('name changed to', val);
      },
    }
  }
};
</script>
 
<style>
  @import '@phormal/theme-basic/dist/index.css';
</style>

Usage with Vue.js

As a component

Props

Methods

As a data property

Further reading