how to use FormKit with Laravel +Vue3 + inertiaJS app

Question

Pls F1, I cannot setup FromKit (https://formkit.com/) to work with Laravel 9 + Vue 3 + inertiajs (+Tailwind) app:

on my app.js i have:

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

import { plugin, defaultConfig } from '@formkit/vue'


const appName = 'Test';

createInertiaApp({
    title: (title) => `${appName} | ${title}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin, defaultConfig)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

parent component:

<script setup>
import Fktest from '@/Components/Fktest';
</script>

<template>
    <div class="flex flex-col">
       <Fktest></Fktest>
    </div>
</template>

child component (Fktest.vue):

<template>
  <FormKit
    type="text"
    label="Section-key class props"
    help="Look, Ma! Tailwind styles"
    outer-class="mb-5"
    label-class="block mb-1 font-bold text-sm"
    inner-class="max-w-md border border-gray-400 rounded-lg mb-1 overflow-hidden focus-within:border-blue-500"
    input-class="w-full h-10 px-3 border-none text-base text-gray-700 placeholder-gray-400"
    help-class="text-xs text-gray-500"
  />
</template>

when i npm run watch i get error:

app.js:1462 [Vue warn]: Failed to resolve component: FormKit
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Fktest> 
  (...)

can anyone explain what am i doing wrong?

Yuray · Accepted Answer · 2022-05-01 10:19:03Z

3

Hmm, i changed my app.js import FormKit section to:

import { plugin as FKp, defaultConfig as FKdc } from '@formkit/vue'

and createInertiaApp part as:

createInertiaApp({
    title: (title) => `${appName} | ${title}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(FKp, FKdc)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

seems ok for now.

answered May 1, 2022 at 10:19

Yuray

8572 gold badges10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to use FormKit with Laravel +Vue3 + inertiaJS app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related