Laravel 5 VueJS not working

Question

I'm trying to use vuejs in my fresh laravel setup. I run the follwing commands in my command line

npm install
npm run dev

This commands runs without any errors. When I import the default VUE componet located under ~/ressources/assets/components/ExampleComponent.vue in my template nothing happends.

@section('content')
    <example-component></example-component>
@endsection

Here the app.js

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

The defult content from github.com/laravel/laravel/blob/master/resources/assets/js/… — Markus
– Markus, Commented Mar 3, 2018 at 21:06

dav88dev · Accepted Answer · 2020-09-20 17:24:56Z

14

If you are using Laravel Mix check your webpack.mix.js file, default config must look like this

 mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Now, look if you have linked JS file to you blade template

Looks like this for older Laravel versions (<= 5.5):

<script src="{{ asset('js/app.js') }}"></script>

and like this for new once (> 5.5)

<script src="{{ mix('js/app.js') }}"></script>

Finally, see you have

el: '#app'

it mean # - id, like in CSS, VueJS will search for element with id app. Everything outside that element will not work.

so you have to use it like

<div id='app'> 
<example-component></example-component>
</div>

or

<section id='app'> 
    <example-component></example-component>
    </section>

edited Sep 20, 2020 at 17:24

answered Mar 3, 2018 at 21:33

dav88dev

6982 gold badges10 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gregory R. Sudderth Over a year ago

Laravel 5.7: assets is gone, as per: [laravel-news.com/laravel-5-7-resources-directory-changes]

hamza · Accepted Answer · 2018-03-03 21:15:13Z

2

I think you should wrap the container div with an id of app

<div id="app" > <example-component></example-component> </div>

if not just check if the Js files are properly imported in the php file

answered Mar 3, 2018 at 21:15

hamza

517 bronze badges

Comments

Erich Kitzmueller · Accepted Answer · 2019-11-20 13:40:50Z

1

I also faced this problem and mine is solved. I'm not importing

<script src="{{ asset('js/app.js') }}" defer></script>

check that you are importing js/app.js and #app

It should work for you.

edited Nov 20, 2019 at 13:40

Erich Kitzmueller

37k5 gold badges85 silver badges104 bronze badges

answered Nov 20, 2019 at 12:50

Tarik Manoar

1932 gold badges3 silver badges11 bronze badges

Comments

Markus · Accepted Answer · 2018-03-03 21:31:21Z

0

Lol, it was an faceplam question. I've removed the @yield('content') from the layout file. Sorry for that and tanks for help!

answered Mar 3, 2018 at 21:31

Markus

4072 gold badges9 silver badges26 bronze badges

Comments

Yonel yvan · Accepted Answer · 2019-04-21 13:42:08Z

0

check if you are importing app.js

<script src="{{ asset('js/app.js') }}" defer></script>

answered Apr 21, 2019 at 13:42

Yonel yvan

691 silver badge2 bronze badges

Collectives™ on Stack Overflow

Laravel 5 VueJS not working

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related