Failed to resolve component

[Brads3290]

Using the latest version of @sfxcode/formkit-primevue (2.7.5), formkit (1.6.9), and primevue (4.2.5), I get Failed to resolve component when trying to use primevue components in formkit.

It looks like it's successfully rendering the formkit-primevue component (e.g. this component), but inside that component it's failing to resolve the actual PrimeVue component.

My setup is pretty simple:

• Installed primevue as normal through the official Nuxt module (not relying on the @sfxcode Nuxt module)
• Installed formkit as normal through the official Nuxt module
• Installed @sfxcode/formkit-primevue
• Import the inputs from @sfxcode/formkit-primevue in the formkit.config.ts, as described here

I made a full repro here: https://github.com/Brads3290/formkit-primevue-repro

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@formkit/core": "^1.6.9",
    "@formkit/nuxt": "^1.6.9",
    "@formkit/vue": "^1.6.9",
    "@primevue/themes": "^4.2.5",
    "nuxt": "^3.15.4",
    "primevue": "^4.2.5",
    "vue": "latest",
    "vue-router": "latest"
  },
  "devDependencies": {
    "@primevue/nuxt-module": "^4.2.5",
    "@sfxcode/formkit-primevue": "^2.7.5"
  }
}

Screenshot:

[sfxcode]

Hi,

since formkit-primevue inputs depends on primevue inputs, there is a problem with primevue nuxt auto import mechanism, because only inputs detected on your source code are loaded automatically.

Solution 1:

define under the plugins directory a new plugin like formkit.ts

import {usePrimeInputs} from "@sfxcode/formkit-primevue";

// optional: import styles
import "@sfxcode/formkit-primevue/dist/style.css";

export default defineNuxtPlugin(nuxtApp => {
    const app = nuxtApp.vueApp
    // register inputs needed for primevue
    const { registerInputs } = usePrimeInputs()
    registerInputs(app)
})

(This solution is also used in the formkit-primevue-nuxt module)

Solution 2:

Do not rely on autoimports, but configure needed imports in the component section of the nuxt primevue config.

Solution 3 (maybe not the best but working):

include your needed primevue components somewhere in your source code, even if not visible (eg v-if="false") primevue
autoimport will scan son startup and add them

Hope that will help you,

Have a nice coding time,

Tom

[Brads3290]

Hi Tom,

Thanks for the advice. Solution 1 works. However, I couldn't get solutions 2 and 3 to work (I updated my repro with a branch that includes both changes).

Solution 2 is what the docs say, but I can't get it to work by configuring the primevue Nuxt module (with include: '*').

Maybe solution 1 is the only viable option for Nuxt (aside from using the formkit-primevue module)?

Note: while I was waiting for your reply I found a different workaround: I cloned your repo and edited all the PrimeXXX.vue components to just import the primevue component in <script setup>. I don't know if this would have negative effects on people using your package in other environments though, so I think your solution 1 is still best.

[Brads3290]

Hmm.. I just realised in order for include: '*' to work, autoImport needs to be disabled in the primevue module. So I ended up with this configuration which almost works:

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  modules: ["@formkit/nuxt", "@primevue/nuxt-module"],
  primevue: {
    autoImport: false,
    components: {
      include: "*",
      exclude: ["Form", "FormField"], // You don't have to exclude these but if you leave them included, you need to add @primevue/forms as a dependency
    },
    options: {
      theme: {
        preset: Aura,
      },
    },
  },
  devtools: { enabled: true },
});

I'm still getting some errors with this configuration so I think I'll just stick with your Solution 1 instead of trying to get this config right.