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.


  <div id="phormal"></div>
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() {
  methods: {
    validate() {
    getValues() {
      return this.form.$values(); // { name: 'John Doe' }
  watch: {
    'form.name': {
      handler: function (val) {
        console.log('name changed to', val);
@import '@phormal/theme-basic/dist/index.css';
#phormal {
  font-family: sans-serif;


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