I've got a Vue 3 project using Vite. When run in development mode, it opens a modal which makes some API calls.

main.js

import { createApp } from 'vue'
import { VTooltip } from 'floating-vue'
import store from '@/store'
import App from './App.vue'
import 'floating-vue/dist/style.css'
import './tailwind.css'

const app = createApp(App)

app.use(store)
app.directive('tooltip', VTooltip)
app.mount('#app')

App.vue

<template>
  <Modal />
</template>

<script setup>
import Modal from './components/Modal.vue'
</script>

I want to make this project available as a library which can be installed with a <script> tag, or via NPM install, exposing a function which can be called to mount the modal, for example:

import myApi from '@me/myapi'
import '@me/myapi/dist/style.css'

myApi.show({ value: 'something' })

or

<link rel="stylesheet" href="https://unpkg.com/@me/myapi/dist/main.css">
<script src="https://unpkg.com/@me/myapi/dist/main.umd.js" />

myApi.show({ value: 'something' })

This call would initialise the library, mount it to the DOM and show the modal. I've found Vite has a library mode, which should support what I want.

My current thinking is to refactor main.js to export an initialiser function, and change the bundle entry to a class which calls the initializer:

main.js

// ...

export const initialize = (el, args) => {
  const app = createApp(App)
  app.use(store)
  app.directive('tooltip', VTooltip)
  app.mount(el)
  return app
}

entrypoint.js

import { initialize } from './main'

class MyApi {
  show(args) {
    const element = document.createElement('div')
    this.app = initialize(element, args)
  }
}

export default new MyApi()

But I'm stuck at how you'd set the global variable for <script> integration (other than window.myApi = new MyApi()).

Is this the right way to go about this?