Как правильно встроить vue.js в «обычный» сайт?

Question

[JohnDaniels]

Здравствуйте.

Имеется сайт на laravel, где на одной из страниц понадобилось сделать несколько интерактивных блоков с использованием vue (слайдер, опросник, драгдроп, еще кое-что).

сейчас я просто подключил на этой странице vue и нужные библиотеки

<script src="{{ url('js/libs/vue.min.js') }}"></script>
<script src="{{ url('js/libs/vue-awesome-swiper.js') }}"></script>
<script src="{{ url('js/libs/vue-radial-progress.min.js') }}"></script>

итд

и написал один скрипт, примерно такой:

Vue.use(VueAwesomeSwiper)
Vue.use(RadialProgressBar)

new Vue({
    el: '#slider_view',
    //логика
})

new Vue({
    el: '#dragdrop_view',
    //логика
})

new Vue({
    el: '#test_view',
    //логика
})

все работает, но насколько это правильно (в частности, отдельные экземпляры vue для каждого элемента)?

Vue уже "полноценно" используется в админке, с webpack и всем таким, возможно ли это как-то использовать?

Comments

[Сергей delphinpro]

© Всё правильно сделал

Answer 1

[Дмитрий Ларин]

На мой взгляд правильно. Ничего плохого в нескольких экземплярах vue я не вижу. Это моя любимая часть vue - возможность встроить ее куда угодно, не ломая прочий функционал.

Answer 2

[atawerrus]

По сути можно было обернуть в div с id app поставить на элемент экземпляр Вью, и после создать методы которые бы реагировали на события, v-on:click и т.д

Answer 3

[aden]

я в таких случаях делаю подгружаемые компоненты которые грузяться только если они используются на странице и подключаю их в одном экземпляре вью

Comments

[vism]

можно код глянуть пожалуйста?

[aden]

Vue.component('messages', function (resolve) {
    require(['./components/messages.vue'], resolve);
});

вот так подключается компонент и при сборке создается отдельный файл который будет подгружаться на странице только если этот компонент будет вызван как
<messages></messages>

для фронта создаю отдельный типовой front.js с экземпляром Vue в котором указываю такие компоненты и подключаю его в лейауте публичной части

Answer 4

[semki096]

мне кажется vue уже имеется в ларавеле, если это так - тогда в доках должно быть написано как правильно работать.