Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

acfasolutions's avatar

Laravel Vue ExampleComponent not working

So I'm trying to use laravel exampleComponent.vue, which is out of the box, and I keep getting an error. I am new at this, so I need your help.

What I'm trying to do.

  1. Default exampleComponent.vue

https://prnt.sc/jfef0j

  1. app.js

https://prnt.sc/jfefrr

  1. blade template

https://prnt.sc/jfefao

  1. package.json

https://prnt.sc/jfefit

The error I receive every time is:

Uncaught Error: Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type.

https://prnt.sc/jfeg6w

Do I need to update something in webpack? From what I read it should work like this.

Thank you!

0 likes
6 replies
Cronix's avatar

You'll need to show your relevant code, along with the specific error you're getting. We can't guess what you've done.

Cronix's avatar

It looks like you're using more than just the default exampleComponent component, or at least loading them.

I'd remove everything from app.js that you aren't actually using until you get the exampleComponent working (vue-select, vue-inputmask, vue-jsdatepicker) and rerun npm run dev

Robstar's avatar

In the default Laravel app.js at https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js you should reference the component as <example-component></example-component> in your template.

EDIT: ah, you done it the other way around. You've renamed the component within the app.js to example, meaning you can reference it within you template using <example></example>. Try changing the component file to:

export default {
        name: 'example',

        mounted() {
            console.log('Component mounted.')
        }
    }

Ideally you'd be naming component in a consistent manner.

acfasolutions's avatar

Unfortunatelly, I've already tried that and still getting the same error :(

Vue-select, etc. - I am using them in other places (like directly in blade), but I want to refine my code and use vue the proper way with components. But I can get the exampleComponent to work and I think that I'm missing some step or something I forgot to add. Also I am getting this error in docker:

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config

That is why I asked if I need to add something in webpack. My webpack now is:

https://prnt.sc/jfeyp2

keithchasen's avatar

Try adding this to your webpack:

const VueLoaderPlugin = require('vue-loader/lib/plugin')

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .webpackConfig({
        plugins: [
            new VueLoaderPlugin()
        ]
    });

Please or to participate in this conversation.