error: No loader is configured for ".vue" files: components/ComponentName.vue

[jericopulvera]

tried it just now with my SPA project.

[maddocnc]

Same here:

html:/Users/user/Projects/big-vue/pages/news/_id.vue:6:28: error: No loader is configured for ".vue" files: components/v3/v3-promo.vue
6 │ v3Promo: () => import('@/components/v3/v3-promo'),
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~

[heyarviind]

I am having the same issue with layouts...

[pierredup]

Vue files need to be imported with the .vue extension. Without the extension, it won't work. E.G

// before
import MyButton from '@/components/util/my-button';

// after
import MyButton from '@/components/util/my-button.vue';

[heyarviind]

@pierredup it worked

[jericopulvera]

Worked for me as well.

Here's a shortcut that worked for me if you have many lines without .vue

Step 1: Add .vue at the end of lines that contains @/components using search in regex mode.

Type in Regex Search

^.*(@/components).*$

Replace with

$0.vue

Execute Replace All

Step 2: Search and Replace ";.vue to .vue";

[FelixGraf]

Not sure if this issue should be closed. I think it would be cool, if it would work out of the box - without having to add .vue extension to every import.

[jericopulvera]

Not sure if this issue should be closed. I think it would be cool, if it would work out of the box - without having to add .vue extension to every import.

You've got a point. I'll reopen this and wait for the maintainers decision.

[pierredup]

I think it would be cool, if it would work out of the box - without having to add .vue extension to every import

This is not an issue with this plugin but is by design how Vite works.

See vitejs/vite#178 (comment) and https://twitter.com/youyuxi/status/1288859415878283264

[FelixGraf]

This is not an issue with this plugin but is by design how Vite works.

Good to know, thanks!

[jericopulvera]

I will close this now as it has nothing to do with the plugin.