Compile Laravel Vue components into different js files

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?

I followed this issue @thisiskelvin, but it does not solve my problem. — guyaloni
– guyaloni, Commented Jun 11, 2019 at 7:46
Hi, I am facing the same issue. Did you find any solution? If you find a solution please post this solution. — Dwarkesh Soni
– Dwarkesh Soni, Commented Apr 3, 2020 at 12:03
Hi, in my case, (I was blind) the problem was solved after I've put the <script src="{{ mix('js/dashboard.js') }}"></script> in the right place. Between @section('scripts') ... @endsection in the blade file. — Simion
– Simion, Commented Jun 11, 2020 at 10:39

Tridib Dawn · Accepted Answer · 2021-05-18 09:06:05Z

0

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.

edited May 18, 2021 at 9:06

answered May 18, 2021 at 8:33

Tridib Dawn

1721 silver badge11 bronze badges

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

Collectives™ on Stack Overflow

Compile Laravel Vue components into different js files

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related