Adding a custom component isn't working with schema

• Nuxt 3
• @formkit/nuxt1.0.0-beta.11

I’m having such a headache lol I’ve been trying to add a multiselect since 3 days and I tried literally everything from the docs. Nothing seems to work.

What I want

• adding the @vueform/multiselect component to the schema, or even better: creating a component FormkitMultiselect which has @vueform/multiselect as a child component
• adding a label to this component in the same style like all other inputs (native formkit text inputs etc.)
• correct value handling

What already works

• having the VueMultiselect rendered with my provided options

Problems

• how to add a label when using a custom component?
• how to handle the data? (v-model) for some reason all values are selected (see screenshot)

I tried everything from the docs… createInput etc., but nothing worked for me.

My Code

@vueform/multiselect is provided globally via Nuxt plugin

import VueMultiselect from '@vueform/multiselect'

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component("VueMultiselect", VueMultiselect)
})

const schema = ref<FormKitSchemaCondition | FormKitSchemaNode[]>([
    {
        $formkit: 'text',
        name: 'title',
        label: 'Recipe Title',
        validation: 'required',
        value: ''
    },
    {
        $cmp: 'VueMultiselect',
        props: {
            options: useRecipeBadges()
        }
    },
])

Passing schema to a wrapper component

<FormBuilder
    :schema="schema"
/>

wrapper passes it to FormKit

<FormKit type="form" @submit="handleSubmit" :submit-label="submitLabel">
    <FormKitSchema
        :schema="schema"
    />
</FormKit>

All values selected

[justin-schroeder]

Thank you for the reproduction. I saw a number of issues that needed resolving, but rather than list them all out, here’s your reproduction working: https://stackblitz.com/edit/vueform-multiselect-formkit

Best of luck 👍 And if you enjoy FormKit, consider using our Pro inputs next time to help support the project 🙂

[phillipmohr]

@justin-schroeder thanks for your time!