`FormKit` Integration

[Christian Preston]

🆒 Your use case

When integrating with FormKit you can add custom inputs which in this case it would be nice to see examples on how to best integrate with FormKit. I would like to have the option to just a make a new input and add the captcha to the form automatically. FormKit is a super nice library for validation creation of forms.

FormKit

🆕 The solution you'd like

I would like to see if formkit is enabled it automatically registers a new FormKit type of turnstile if that is possible.

🔍 Alternatives you've considered

No response

ℹ️ Additional info

Links & Context

It would be awesome to integrate globally so it can be easier to use.

• https://formkit.com/advanced/custom-inputs

[Daniel Roe]

Not sure if this is something for this library or whether some integrating code should be added in FormKit, but I'd welcome this kind of integration or some kind of API for component libraries.

[Christian Preston]

@danielroe It could be a separate module. But since the component lives here you could possibly check to see if the @formkit/nuxt is being used and automatically setup the custom integration plugin that makes it feel like magic so you won't have to install two vs one module.

I am just thinking out-loud. Maybe it's more complex than I am making it sound :)

I appreciate the instant feedback! let me know where I could help.

Thanks 💚

[Daniel Roe]

Well, a good start would be a sample project with both <Turnstile> and FormKit. Maybe a stackblitz to show me the ideal API/DX, with an explanation of what might be nice to happen?

[Christian Preston]

I got you thanks!

[Adriano Cahete]

Hey @danielroe, this feature is something that I like to have in my project. If you need a sponsor to do that, how much will be (remember that I'm just a solo dev hahaha)?

[Daniel Roe]

Sponsorship is always welcome 😊 but I'm happy to implement this anyway when I have time.

The first thing to do would be to spell out a little bit more of the kind of API/experience you're looking for as a user of FormKit. Make that as high-level as you like.

[Adriano Cahete]

Today I'm using FormKit for the forms and NaiveUI for the components, until I have time to create my own components, but I'll keep using FormKit because forms are hard work that I'm not following to self-made.

With that in mind, I'm using your module easily, but an auto import with, I don't know, little config on nuxt.config or some prop in FormKit form type will be awesome (but not sure if it's really can be reach from FK side). If not, just a <FormKit :type="turnstile" /> will be awesome and will make FK user's code more standardized.

(I'm having a problem with this lib on nuxt.config, that cannot set theme option, but since it's not my main concern yet, I just commented out for now)

[Inesh Bose]

Hi, I haven't made use of this project yet but I would think that integrating with FormKit may not be its scope. Instead, FormKit does make it very easy to add custom inputs. This is how I would do it:

components/FKTurnstile.vue (custom wrapper)

<script setup>
const props = defineProps({
  context: Object,
})

function handleInput(token) {
  props.context.node.input(token)
}
</script>

<template>
  <Turnstile v-model="props.context._value" @update:modelValue="handleInput" />
</template>

formkit.config.ts (FormKit configuration and component registration)

import { createInput } from '@formkit/vue';
import FKTurnstile from '~/components/FKTurnstile.vue';

export default {
  inputs: {
    turnstile: createInput(FKTurnstile, {})
  },
};

Here's a stackblitz with this: https://stackblitz.com/edit/github-ryz8tl?file=app.vue (may get deleted later); feel free to share any improvements you think can be added.