Tengo un proyecto Vue 3 usando Vite. Cuando se ejecuta en modo de desarrollo, abre un modal que realiza algunas llamadas a la API.

principal.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')

aplicación.vue

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

Quiero que este proyecto esté disponible como una biblioteca que se puede instalar con una etiqueta <script> , o a través de la instalación de NPM, exponiendo una función a la que se puede llamar para montar el modal, por ejemplo:

 import myApi from '@me/myapi' import '@me/myapi/dist/style.css' myApi.show({ value: 'something' })

o

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

Esta llamada inicializaría la biblioteca, la montaría en el DOM y mostraría el modal. Descubrí que Vite tiene un modo de biblioteca , que debería ser compatible con lo que quiero.

Mi pensamiento actual es refactorizar main.js para exportar una función de inicializador y cambiar la entrada del paquete a una clase que llama al inicializador:

principal.js

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

punto de entrada.js

 import { initialize } from './main' class MyApi { show(args) { const element = document.createElement('div') this.app = initialize(element, args) } } export default new MyApi()

Pero estoy atascado en cómo configuraría la variable global para la integración de <script> (que no sea window.myApi = new MyApi() ).

¿Es esta la forma correcta de hacerlo?