9. vuejsforge

• vuejs forge

main.js

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import {plugin, defaultConfig} from "@formkit/vue";

createApp(App)
    .use(plugin, defaultConfig())
    .mount('#app');

App.vue

<script setup>
import BaseForm from '@/components/BaseForm.vue'
import SchemaForm from '@/components/SchemaForm.vue'
</script>

<template>
  <div style="border: 2px solid #ddd">
    <BaseForm />
  </div>
  <div style="border: 2px solid #ddd">
    <SchemaForm />
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>

components/BaseForm.vue

<script setup></script>

<template>
  <FormKit id="my-form" type="form" submit-label="Get Started" @submit.prevent="">
    <FormKit
        type="text"
        label="Name"
        help="This helps us customize your experience."
        validation="required"
    />
    <FormKit
        type="number"
        name="age"
        label="Age"
        validation="required|max:27"
        validation-visibility="live"
        :validation-messages="{
        required: 'Age is required',
        max: 'no boomers'
      }"
    />
    <FormKit
        type="checkbox"
        name="actions"
        label="I have..."
        :options="['Liked', 'Commented', 'Subscribed']"
        validation="required|min:2"
    />
  </FormKit>
</template>

<style scoped></style>

components/SchemaForm.vue

<script setup>
import { FormKitSchema } from '@formkit/vue'
// import { FormKitSchemaDefinition } from '@formkit/core'

/**
 * typescript 사용시 아래와 같이 타입 정의
 * */
// const schema: FormKitSchemaDefinition = [
const schema = [
  {
    $formkit: 'text',
    type: 'text',
    label: 'Name',
    help: 'This hepls us customize your experience.',
    validation: 'required'
  },
  {
    $formkit: 'text',
    type: 'text',
    label: 'Age',
    validation: 'required|max:27',
    validationMessages: {
      required: 'Age is required',
      max: 'no boomers'
    }
  },
  {
    $cmp: 'FormKit',
    props: {
      validation: 'required|min:2',
      type: 'checkbox',
      name: 'actions',
      label: 'I have...',
      options: ['Liked', 'Commented', 'Subscribed']
    }
  }
]
</script>

<template>
  <FormKitSchema :schema="schema" />
</template>

<style scoped></style>