Compile Laravel Vue components into different js files - laravel

Question

I have a big project in Laravel, which have several front-ends, depending on logged user.
I also have a shared directory, where common components (like table, modal, etc.) can be used by the different front-end.
I want to compile each front-end to a different js file, so I can include only the relevant file for each user.
What I have till now:
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/frontendUser.js', 'public/js')
.js('resources/js/frontendAdmin.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Under resources/js I have a separate file for each front-end, for example frontendAdmin.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component(
'frontend-admin-component',
require('./components/FrontendAdminComponent.vue').default
);
const app = new Vue({
el: '#app',
});
When I run npm run dev fiels are compiled correctly, and I can include them from the blade file:
<script src="{{ asset('js/frontendAdmin.js') }}" defer></script>
However, I get in console this error:
[Vue warn]: Unknown custom element: <frontend-admin-component>
- did you register the component correctly? For recursive components,
make sure to provide the "name" option.
Looks like the component behaves well, however I assume the warning exists for some reason and would like to fix it.
Is what I try to do have sense? What is wrong?

Answer 1

This warning generally occurs if you do not specify any name your component
For example, if you have a component called User.vue then your component should be as follows:
<template>
</template>
<script>
export default {
name: 'User'
}
</script>
<style>
</style>
This name option is not mandatory but it is convention to use a name for each component for all components.