Getting started
Vue 2

Tutorial of the basics: Vue 2 integration

For this short tutorial, we will need the core package, as well as a theme:

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

We will create a form with four input fields. The paymentMethod radio group will be rendered with three different options. The name field will be a required field, and have a minimum length of 3 characters. The email field will also be required, and has to contain a valid email address. Lastly, there will be a checkbox for subscribing to a newsletter.

Code

<template>
  <div id="phormal"></div>
</template>
 
<script>
import {Phormal, useLength, useEmail, useRequired} from '@phormal/core';
 
export default {
  name: 'PhormalContent',
 
  data() {
    return {
      formFields: {
        paymentMethod: {
          type: 'radiogroup',
          label: 'Payment Method',
          value: 'paypal',
          options: [
            {label: 'PayPal', value: 'paypal'},
            {label: 'Credit card', value: 'creditcard'},
            {label: 'Klarna', value: 'klarna'},
          ]
        },
        name: {
          label: 'Name',
          hooks: [useRequired(), useLength(3)]
        },
        email: {
          label: 'Email',
          hooks: [useRequired(), useEmail()]
        },
        newsletter: {
          type: 'checkbox',
          label: 'Newsletter',
          value: true
        },
      },
      formConfig: {
        theme: 'basic',
        el: '#phormal',
        language: 'en'
      },
      form: null
    }
  },
 
  mounted() {
    this.form = new Phormal(this.formFields, this.formConfig);
  },
 
  beforeDestroy() {
    this.form.$destroy();
  },
 
  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';
 
#phormal {
  font-family: sans-serif;
}
</style>

Result


Example repo

If you want to play around with this code locally, you can clone this repo: https://github.com/phormal/example-nuxt-vue-2 (opens in a new tab)

Last updated on January 21, 2023
Vue 3Usage