es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo crear una aplicación Vue3+composición API a pedido

27 Jul, 2023 Programación

Tengo un par de aplicaciones Vue2 que planeo reescribir en Vue3+API de composición. El problema es que no se inicializan inmediatamente, sino después de alguna interacción del usuario.

En Vue2, podía hacer lo siguiente:

import MyApp from './MyVue2App.vue';
import Vue from 'vue';

export default { Vue: Vue, MyApp: MyApp }

y luego podía obtener estas exportaciones a través de requirejs, por lo que las aplicaciones podrían haber sido renderizadas únicamente bajo demanda.

Sin embargo, no pude hacer algo similar con Vue3. La solución más fea posible sería almacenar tanto el createApp como MyApp.vue en window (realmente me gustaría evitar el uso de variables globales), por ejemplo:

// main.ts
import { createApp } from 'vue';
import App from './MyVue3App.vue';

window.MyVue3App = App
window.createApp = createApp

// index.html
<script src="vendor.js"></script>
<script src="app.js"></script>

<div id="foo"></div>

<button onclick="window.createApp(window.MyVue3App).mount('#foo')">
  Montar APP
</button>

¿Alguien sabe cómo hacer que esto funcione sin usar variables globales? Estoy en un proyecto limpio de vue-cli.

¡Gracias!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en IT especializado en webpack, Vue.js 3 y Vue Composition API, recomiendo utilizar importaciones dinámicas en lugar de variables globales para manejar la situación en la que las aplicaciones Vue no se inicializan de inmediato, sino en función de la interacción del usuario.

    En Vue 3, puedes utilizar importaciones dinámicas para cargar el código de la aplicación solo cuando sea necesario. Aquí tienes un ejemplo de cómo hacerlo:

    // main.js
import { createApp } from 'vue';

export const mountApp = (selector) => {
  import('./MyVue3App.vue').then((module) => {
    const app = createApp(module.default);
    app.mount(selector);
  });
};

    <!-- index.html -->
<div id="app"></div>
<button onclick="mountApp('#app')">Montar APP</button>

<script src="app.js"></script>

    En este ejemplo, la función mountApp carga el componente MyVue3App.vue dinámicamente cuando se hace clic en el botón. La propiedad module.default se utiliza para acceder a la definición del componente, ya que Vue 3 exporta la definición del componente como la exportación default.

    Al utilizar importaciones dinámicas, puedes evitar el uso de variables globales y cargar el código de la aplicación solo cuando sea necesario, lo que mejora el rendimiento y reduce el tamaño del paquete.

Comments are closed.