Search code examples
laravelvue.jsviteelement-plus

Use env.d.ts with Laravel 9 + Vite?


I am trying to bootstrap a new laravel project with element-plus taking inspiration from element-plus-vite-starter.

I've created the new project with:

laravel new laravel-vue3

Then installed whatever was mentioned in the tutorials I followed.

I was able to make the Laravel + Vue + Vite project work, then I tried to import element-plus examples from the element-plus-vite-starter.

My issue is with the resolutions of my components:

[Vue warn]: Failed to resolve component: BaseHeader
If this is a native custom element, make sure to exclude 
it from component resolution via compilerOptions.isCustomElement. 
  at <App>

Here the structure I have:

resources
├── assets
│   └── logo.png
├── css
│   ├── element/...
│   └── index.scss
├── js
│   ├── App.vue
│   ├── app.ts
│   ├── auto-imports.d.ts
│   ├── bootstrap.js
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── layouts
│   │       ├── BaseHeader.vue
│   │       └── BaseSide.vue
│   ├── components.d.ts
│   ├── composables
│   │   ├── dark.ts
│   │   └── index.ts
│   └── env.d.ts
└── views
    └── welcome.blade.php

It seems the env.d.ts is ignored, and I think this is the one responsible for looking for the components I am missing. Also, the components.d.ts mentioned in vite.config.js is populated with nothing.

Of course I have added the Components section in vite.config.ts:

    Components({
        // allow auto load markdown components under `./src/components/`
        extensions: ['vue', 'md'],
        // allow auto import and register components used in markdown
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
        resolvers: [
            ElementPlusResolver({
                importStyle: 'sass',
            }),
        ],
        dts: 'resources/js/components.d.ts',
    }),

Am I missing something?


Solution

  • By default unplugin-vue-components/vite uses src/components as base. You need to change it if the location is different, in your case:

        Components({
            dirs: ['resources/js/components'],