[HELP WANTED] Can't manage to make unplugin-vue-components work, any idea ?

[paulalbertdev]

Hi everyone !
I'm using vue 3 through webpack (through webpack encore, with symfony, but that shouldn't change anything, in theory) and I can't make the plugin "unplugin-vue-components" work and auto import my components.

I've installed it through npm i unplugin-vue-components -D
I've added the plugin to webpack using

require('unplugin-vue-components/webpack')({
    dirs: ['assets/vue/components'],
}

It seems to work since a big components.d.ts is created when I npm run serve

I've added "components.d.ts" to my tsconfig.json include key like this :

"include": [
 "assets/vue/**/*.ts",
 "assets/vue/**/*.tsx",
 "assets/vue/**/*.vue",
 "assets/vue/routes.ts",
 "components.d.ts",
],

But when I remove, let's say import PulseLoader from "@/Common/PulseLoader.vue";
That is referenced in the generated "components.d.ts" at the line
PulseLoader: typeof import('./assets/vue/components/Common/PulseLoader.vue')['default']

I've got an error in the chrome console :
[Vue warn]: Failed to resolve component: pulse-loader
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

Any idea ?

[paulalbertdev]

Ok, one step forward !

If I write pure JS an use <script setup>
Instead of using TS and writing <script lang="ts" setup>,
it works !

But the question remains, how can I use TS ?