Integration guide

// nuxt.config.ts
export default defineNuxtConfig({
  // KunUI's Nuxt layer: auto-imports every Kun* component and injects
  // NuxtLink / @nuxt/icon / @nuxt/image into KunUI's config.
  extends: ['@kungal/ui-nuxt'],

  modules: ['@nextmoe/edit-ui-nuxt'],

  css: ['~/assets/css/main.css'],

  editUi: {
    prefix: 'Edit', // default. <SchemaForm> registers as <EditSchemaForm>
    global: false   // default: lazy registration
  }
})

<template>
  <EditSchemaForm
    :fields="fields"
    :values="values"
    :config="config"
    :group-order="['Basics', 'Media']"
    layout="tabs"
    @update:patch="(patch) => (draft = patch)"
  />

  <EditFieldDiff label="Title" diff-hint="inline" :from="a" :to="b" />
  <EditReviewQueue v-model:status="status" :items="open" :label-for="labelFor" />
</template>

// main.ts
import { createApp } from 'vue'
import { installKunUIConfig } from '@kungal/ui-vue'
import { Icon } from '@iconify/vue'
import { RouterLink } from 'vue-router'
import App from './App.vue'
import './style.css'

const app = createApp(App)

installKunUIConfig(app, {
  iconComponent: Icon,      // see the note below — without this some icons vanish
  linkComponent: RouterLink // optional: keeps KunUI hrefs in the SPA router
})

app.mount('#app')

<script setup lang="ts">
import { SchemaForm, FieldDiff } from '@nextmoe/edit-ui-vue'
import type { EditFieldConfigMap, EditSchemaField } from '@nextmoe/edit-ui-vue'

const fields = ref<EditSchemaField[]>([])
const config: EditFieldConfigMap = { title: { label: 'Title', control: 'input' } }
</script>

<template>
  <SchemaForm :fields="fields" :values="values" :config="config" />
</template>