Как правильно подключать vue js на сайт?

Question

[droit174]

Имеется сайт на django и на клиентской части нужно реализовать блоки со сложной логикой, написанные на vue js.

раньше я подключал вот так:

import prostayaLogika from './components/prostaya_logika'
import slozhnayaLogika from './components/slozhnaya_logika'

if (!!document.getElementById('slozhnaya-logika'))    
    new Vue({
        el: '#slozhnaya-logika',
        render: h => h(slozhnayaLogika)
    });

if (!!document.getElementById('prostaya-logika'))    
    new Vue({
        el: '#prostaya-logika',
        render: h => h(prostayaLogika)
    });

мне кажется этот метод не очень красивый и есть более правильное решение этой задачи.

В админке я ставил vue на всю страницу и передавал в него компоненты

import logikaOne from './components/logika_one'
import logikaTwo from './components/logika_two'
import logikaThree from './components/logika_three'
    
new Vue({
    el: '#app',
    components:{
        logikaOne,
        logikaTwo,
        logikaThree
    },
})

но на сайте не подойдет этот вариант так как придется в шаблон выводить теги вида

<!-- много html кода -->
<logikaOne></logikaOne>
<logikaTwo></logikaTwo>
<logikaThree></logikaThree>
<!-- много html кода -->

и с точки зрения seo этот код будет не валиден а это плохо.

Как это делают на серьезных проектах ?

Comments

[Ярослав Иванов]

prostaya_logika

if (!!document.getElementById('slozhnaya-logika'))

[Андрей Пике]

С точки зрения SEO это не теги.
Vue их наружу отдаёт как DOM.
Внутренние теги Vue сожрёт.
Посмотрите в инспекторе, как выглядит DOM в динамическом виде.

[Андрей Пике]

Тут только одна проблема - надеетесь ли, что поисковики прогонят сайт через интерпретатор?
1. Если да, то проблем нет.
2. Если нет, то ваших компонентов и текста всё равно не будет в шаблоне. Будет как пустая болванка.

Answer 1

[Сергей delphinpro]

мне кажется этот метод не очень красивый

Нормальный метод.

но на сайте не подойдет этот вариант так как придется в шаблон выводить теги вида

Тоже норм. Как вариант, можно использовать атрибут is (правда он тоже не пройдет валидацию w3c)

<div is="logikaOne">
</div>