Quick start with Vue 3 #

This guide will walk you through the process of creating a simple form using formkl in your Vue 3 project.

Demo #

You can visit the playground here: https://sandbox.formkl.org/

Instalation #

To begin, install the formkl adapter as a dependency in your project:

Use your favorite package manager to install the packages, like npm, yarn, or pnpm

pnpm add @formkl/vue @formkl/elemento
pnpm add -D @formkl/plugin-vite

Setup loader #

Setup .form file loader for your bundler (Vite/Webpack) so you can import .form files directly in Vue file or JavaScript module.

You can checkout the installation guide for Vite or Webpack.

// vite.config.ts
import FormklPlugin from "@formkl/plugin-vite";

export default {
  plugins: [
    // Your other plugins
    FormklPlugin(),
  ],
};

Setup plugin #

Setup @formkl/vue using the default theme @formkl/elemento or your own theme

// main.ts
import { createApp } from "vue";
import FormklPlugin from "@formkl/vue";
import formklTheme from "@formkl/elemento";
import App from "./App.vue";

import "./style.css";

createApp(App)
  .use(FormklPlugin, {
    theme: formklTheme,
  })
  .mount("#app");

/* style.css */
@import url(@formkl/elemento);

⚡️ That's all! You're ready to start building forms.

Basic Usage #

Use the Formkl component to render the form.

// example.form
formkl {
  "Personal Information" has {
    "Fullname" text;
    "Bio" paragraph;
  }
}

<!-- YourForm.vue -->
<template>
  <formkl v-model="exampleModel" :form="ExampleForm" />
</template>

<script lang="ts">
import ExampleForm from "./example.form";

export default {
  setup() {
    const exampleModel = ref({});

    return {
      ExampleForm,
      exampleModel,
    };
  },
};
</script>

Result: