How to properly connect vue js to the site?

Question

JavaScript

There is a site on django and on the client side you need to implement blocks with complex logic written in vue js.

I used to connect like this:

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)
    });

It seems to me that this method is not very beautiful and there is a more correct solution to this problem.

In the admin panel, I put vue on the entire page and passed components to it

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
    },
})

but this option will not work on the site, since you will have to display tags of the form

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

and from the point of view of seo, this code will not be valid, which is bad.

How is it done on serious projects?

Answer 1

I don't think this method is very nice.

Normal method.

but this option will not work on the site, since you will have to display tags of the form

That's OK too. Alternatively, you can use the is attribute (although it will not pass w3c validation either)

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