Getting started
Vue 3

Tutorial of the basics: Vue 3 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

<script setup>
import {ref, onMounted, onBeforeUnmount} from "vue";
import {Phormal, useLength, useEmail, useRequired} from "@phormal/core";
 
const 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
  },
}
 
const formConfig = {
  theme: 'basic',
  el: '#phormal',
  language: 'en'
}
 
const phormal = ref(null);
 
onMounted(() => {
  phormal.value = new Phormal(formFields, formConfig);
});
 
onBeforeUnmount(() => {
  phormal.value.$destroy();
});
 
</script>
 
<template>
  <div class="container">
    <h1>Phormal</h1>
 
    <div id="phormal"></div>
  </div>
</template>
 
<style>
@import '@phormal/theme-basic/dist/index.css';
</style>

Result


Example repo

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

Last updated on January 21, 2023
ReactVue 2