What is the best way to integrate Vue into MPA?

[miloslavnosek]

Hello everyone,

I'm trying to integrate Vue into an existing server-side rendered MPA and I only have the option to render the components selectively on specific places as opposed to making a whole thing a Vue app and this is the best I could come up with:

import { createApp } from 'vue';
import HelloComponent from './components/HelloComponent.vue';

document.addEventListener('DOMContentLoaded', () => {
  const mountComponent = (selector, component) => {
    const el = document.querySelector(selector);
    if (el) {
      createApp(component).mount(el);
    }
  };

  mountComponent('#hello-component', HelloComponent);
});

Is this an efficient way to integrate Vue in MPA even when the site grows and starts requiring more and more components? I'm fairly new to Vue, but using createApp for each component (even when it possibly contains nested components) screams bad pratice to me. On the other hand, I don't know of any other approach I could choose.

I guess even if it isn't that bad of an approach, I still can't easily pass props into the components this way. At least I'm not sure how.

Vue custom elements seem almost like something, I'm searching for, but their isolation from global styles and rest of the site overall make them less suitable for my use case :-/