Vue component not displaying in Laravel

Have you got Vue dev tools installed in your browser? And are there any console messages?

By inspecting the console I can see the

and I can see a call to GET http://localhost.local/js/app.js and the empty app: innerHTML: "\n \n \n". But now I get a Vue.js not detected from the Vue dev tools. No console messages

Can you show us the app.js file, your bootstrap.js file and your blade file please?

Also, have you ran ,npm install && npm run dev ?

I have run npm install && npm run dev. Both no errors. app.js looks like this:

require('./bootstrap');
window.Vue = require('vue');
Vue.component(
    'example',
    require('./components/Example.vue').default
    );
const app = new Vue({
    el: '#app'    
});

and the blade file is really basic:

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

So, you might have hit something about bootstrap.js. This is my bootstrapp in resources/js:

window._ = require('lodash');
try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

However, I am not sure if I had loaded correctly because in my public/js there was a js file from /Bootstrap v4.4.1 (https://getbootstrap.com/)/, which I don't think it is correct. Should there be the same bootstrap js from above and the bootstrap.js.map from getbootstrap.com?! Should I have installed it before hand and how? Would you be so kind to point me where to read about this point? Many thanks!

Although they are the same name, bootstrap.js is just "bootstrapping" the JS, its not related to the bootstrap framework

make a hard refresh if you are using chrome. Press and hold refresh button when open devtool mode, choose clear cache and refresh , you may good to go

So, you are looking for ExampleComponent.js under resources>js>components

run the following commands below,

composer require laravel/ui

php artisan ui vue

php artisan ui vue --auth

npm install && npm run dev

you will then see the ExampleComponent.js inside the directory resources>js>components #HappyCoding

In my resources/assets/js there are app.js and bootstrap.js. When I launch npm run dev app.js is compiled and placed in public/js but bootstrap.js is not copied/compiled automatically there. Do I have to do it by hand? Another question. There are a number of js scripts loaded in the header of the master blade (and so before the vuejs and app.js). Could they be interfering with my vue component? Thanks

npm run watch and CTRL + F5 (hard refresh on your website page) to delete the cache

@cridev it is most likely looking for bootstrap.js from the bootstrap CSS framework. Don't copy the bootstrap.js from JS to public - leave that boostrap where it is i.e. in teh same folder as app.js.

Just run npm install bootstrap from command line and it should work fine.

https://getbootstrap.com/docs/4.4/getting-started/download/#npm

My reasoning for not running npm install bootstrap was that the bootstrap CSS framework is already loaded somewhere else by the laravel project where I am embedding my vue component. Thought that was necessary. Do I still need to run npm install bootstrap? Won't it interfere with the other bootstrap loaded by the laravel theme?

This is strange. Removed bootstrap.js from public and now I get a: app.js:37757 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in ) and: DevTools failed to load SourceMap: Could not load content for http://localhost.local/js/bootstrap.js.map Also, the instance seems to be empty as in VueTools I get a: This instance has no reactive state.

npm install bootstrap didn't solve the problem. I tried a rebuilt and using an empty blade template, no js loaded, but I get the same problem again. Not sure if it might be related to this problem but had to change package.json and modify sass from 8.0.0 to 7.3.1 because of this problem https://github.com/webpack-contrib/sass-loader/issues/761 . Now still getting a

app.js:37750 [Vue warn]: Unknown custom element: <example-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)

I also tried to modify app.js with this:

const example = require('./components/ExampleComponent.vue').default;
console.log(example);
Vue.component('example-component', example);

And the console prints "undefined". I don't know if it's related to the laravel platform I am trying to embed this in, but vuejs does not work on my installation. Does anyone have other ideas that I can try/check?

Well, it turns out the tricks stands in removing the .default part. from the require() in app.js. Thanks a lot to everyone

I have NEVER gleened ANYTHING useful from Laracasts.