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');

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

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

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'
});

• javascript
• laravel
• laravel-5
• vue.js
• vuejs2

• What's inside ExampleComponent that is not working? – Bhojendra Rauniyar Commented Mar 3, 2018 at 20:56
• The defult content from github.com/laravel/laravel/blob/master/resources/assets/js/… – Markus Commented Mar 3, 2018 at 21:06

5 Answers 5

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>

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

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.

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

check if you are importing app.js

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