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?
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'],