How to compile .vue components into separate .js files?

Question

webpack

There is, for example, the following file structure:

resources
    js
        components
            ContactForm.vue
            OrderForm.vue

How to compile them into separate files through laravel mix in order to include them only on the necessary pages?
Like this:

<script src="{{ mix('js/vendors.js` }} " ></script> тут VUE
<script src="{{ mix('js/components/ContactForm.js` }} " ></script> компоненты 
<script src="{{ mix('js/app.js` }} " ></script> инициализация

Answer 1

You can separate the components into folders like so:

resources
    js
        components
            ContactForm
                index.js
                component.vue
            OrderForm.vue
                index.js
                component.vue

Then inside each index.js:

import component from './component.vue'

// регистрирует глобальный компонент
Vue.component('имя компонента', component);

Connect like this:
maybe it will work like this:
I think it will work.
And let this be at the end of all scripts:
<script src="{{ mix('js/app.js` }}"></script>