Почему не работает vue2 в последних Laravel?

Question

[kiranananda]

Ставлю последнюю сборку laravel. Он уже я так понял под vue3 заточен. Ставлю свой проект на vue2 и получаю ошибку в консоли браузера:

undefined is not an object (evaluating 'Vue.version.split')

В веб паке вот так вот:

mix.js('vendor/vkiranananda/backend/resources/js/backend.js', 'public/backend/js/admin.js').vue({ version: 2 }).version();

Comments

[Александр Аксентьев]

Причем здесь ларавел если вы какую-то дичь мутите? И к лараввелу фронт никак не относится вообще.

Что значит ставлю свой проект на vue2?
Закидываете скрипты в папку или что?
А зависимости обновлять кто должен под ваш проект?

[kiranananda]

Так я все обновил, все сделал как надо, он ошибки мне пишет, далее начал гуглить и нагуглил вот https://laravel-mix.com/docs/6.0/vue

Answer 1

[Антон Антон]

Нужно в энтри поинт Vue руками импортировать:

// src/app.js

import Vue from 'vue'; //////// <---
import Alert from './Alert.vue';

new Vue({
    el: '#app',
    components: { Alert }
});

Comments

[kiranananda]

require('./bootstrap');
import Vue from 'vue';

// window.Vue = require('vue');

import Vuex from 'vuex';

import editForm from '../../Form/resources/js/store/edit';
// Подючаем быстрые фонкции для работы с алертами
import alert from './libs/alert'

const store = new Vuex.Store({
    modules: {
        editForm,
    }
});

// Обновляет страницу при history.back()
// Не работает в сафари
if (performance.navigation.type == 2) {
    location.reload(true);
}
// А вот этот код похоже работает в сафари но в хроме нет :).
window.onpopstate = (event) => {
    location.reload(true);
};

//module.exports = {store: store}

Vue.prototype.$bus = window.bus = new Vue()

Vue.prototype.store = store;

// Подключаем иконки они должы быть доступны всем.
Vue.component('v-icon', require('./components/octicons.vue').default)
// Модальные окна
Vue.component('v-modal', require('./components/modal').default)
// Alert
Vue.component('v-alert', require('./components/alert').default)
window.vAlert = alert.vAlert
window.vConfirm = alert.vConfirm


// Модуль форм
require('../../Form/resources/js/init.js');
// Меню
require('../../Menu/resources/js/init.js');

// Пользовательский js
require('../../../../../backend/resources/js/backend.js');

const backend = new Vue({
    el: '#backend-body',
});

[kiranananda]

Не пойму что не так...

Answer 2

[Антон Антон]

Нужно в компоненте Vue импортировать:

// src/app.js

import Vue from 'vue';
import Alert from './Alert.vue';

new Vue({
    el: '#app',
    components: { Alert }
});