Как скомпилировать .vue компоненты в отдельные .js файлы?

Question

[tyraelqp]

Есть, к примеру, такая структура файлов:

resources
    js
        components
            ContactForm.vue
            OrderForm.vue

Как через laravel mix скомпилировать их в отдельные файлы, чтобы подключать только на нужных страницах?
Вот так:

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

Comments

[Артем]

Можно сделать каждый набор компонентов отдельным приложением.

Answer 1

[Илья]

Можете разделить компоненты по папочкам, так:

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

Потом внутри каждого index.js:

import component from './component.vue'

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

Подключать так:

<script src="{{ mix('js/components/ContactForm/index.js` }}"></script>

возможно и так будет работать:

<script src="{{ mix('js/components/ContactForm` }}"></script>

Думаю будет работать.

И пусть это будет в конце всех скриптов:

<script src="{{ mix('js/app.js` }}"></script>

Comments

[tyraelqp]

Так и делал.
Думал можно без лишнего js файла.