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.


<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(() => {
  <div class="container">
    <div id="phormal"></div>
@import '@phormal/theme-basic/dist/index.css';


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