Import a Vue js component from Laravel Blade File

Question

I have registered a some components as a global components in js/app.js file, But this makes the compiled app.js file larger.

//example         


        

Answer 1

register the component in another file rather than app.js

resources/js/example.js

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

Compile your component to another file in webpack.mix.js

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

Include it in blade