Configuration

nuxt-x-app-formkit has no app.config.ts keys — all component behavior is controlled via props. Configuration is limited to installation setup, an optional FormKit theme, and an optional FormKit Pro key.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],                    // required peer — provides UModal/USlideover/useToast
  extends: ['@xenterprises/nuxt-x-app-formkit']
})

The layer registers @formkit/nuxt itself (autoImport: true) and points it at its own bundled formkit.config.ts, which wires genesis icons and the custom fileUpload input.

Peer Dependencies

The @formkit/pro range is the FormKit 1.x line: 0.128.0 is the last release compatible with the layer's @formkit/nuxt ^1.7.2; 0.129.0+ requires FormKit 2.x.

FormKit Theme (consumer-provided)

The layer ships no theme. To style FormKit inputs, generate a theme with the FormKit CLI and wire it in your own formkit.config.ts, spreading the layer's named xFormkitConfig export so the fileUpload input and genesis icons stay registered:

// formkit.config.ts (consumer project root)
import { defineFormKitConfig } from '@formkit/vue'
import { xFormkitConfig } from '@xenterprises/nuxt-x-app-formkit/formkit.config'
import { rootClasses } from './formkit.theme'

export default defineFormKitConfig({
  ...xFormkitConfig, // genesisIcons + the custom fileUpload input
  config: { rootClasses },
})

// nuxt.config.ts
export default defineNuxtConfig({
  formkit: { configFile: './formkit.config.ts' }
})

For Tailwind CSS v4, add the theme file as a source in your main CSS so its classes are generated:

/* app/assets/css/main.css */
@import "tailwindcss";
@source "./formkit.theme.ts";

Environment Variables

FormKit Pro key behavior (build time)

The FORMKIT key is evaluated when Nuxt builds, not at runtime. During configuration the layer picks which FormKit config file to point @formkit/nuxt at:

• No FORMKIT, key not starting with fk-, or @formkit/pro not installed → the layer uses its bundled formkit.config.ts (genesis icons + fileUpload only); a warning is logged in the invalid-key/missing-package cases.
• Valid fk-… key present at build and @formkit/pro installed → the layer swaps to its bundled formkit.config.pro.ts, which spreads xFormkitConfig and registers createProPlugin(key, proInputs) — all Pro inputs become available.

Because the swap happens at build time, adding or changing the key requires a rebuild; setting it only at runtime has no effect.

API endpoints are passed directly as the endpoint prop on each component instance — no runtime config needed.

Component Defaults

All per-instance defaults are set via props. Common ones to configure at the call site:

AI Context

package: "@xenterprises/nuxt-x-app-formkit"
config-key: none
peers: { nuxt: ^4.0.0, "@nuxt/ui": ^4.0.0, "@formkit/pro": ">=0.127.24 <0.129.0 (optional)" }
env: FORMKIT=fk-... (optional FormKit Pro key, auto-loaded when @formkit/pro installed)
theme: consumer provides formkit.theme.ts + own formkit.config.ts (rootClasses); add @source in Tailwind v4 CSS
use-when: Configuring nuxt-x-app-formkit layer — all component behavior is prop-driven, no app.config.ts keys