LaraVuel-ApiSpa

Appearance

Complementos Globales de Vue ​

Esta sección explica de qué manera son ordenados y agregados los complementos globales de Vue en nuestra SPA.

Empecemos desde el principio.

main ​

En el archivo principal, ubicado en la raiz del proyecto, tenemos lo siguiente.

ts
// @/main.ts
import app from '@/plugins/app'
import '@/plugins'
import '@/assets/css/app.css'

app.mount('#app')

plugins/app ​

La primera pregunta que nos viene a la mente es:

Hechemos un vistazo a este archivo.

ts
// @/plugins/app.ts
import { createApp } from 'vue'
import App from '../App.vue'

const app = createApp(App)

export default app

Observe que primero importamos el método createApp, nativo de Vue, para luego instanciar la constante app, pasándole el componente principal App.vue. Una vez hecho esto, exportamos la constante app.

plugins ​

Según lo establecido en el archivo principal, la siguiente pregunta que hacemos es:

Hechemos un vistazo también a este archivo.

ts
// @/plugins/index.ts
import './pinia'
import './components'
import './router'

Como se puede observar, trata sobre la importación de tres complementos debidamente ordenados, cada uno en su propio módulo. Veamos cada uno de ellos.

plugins/pinia ​

Empezamos con plugins/pinia el cual nos permitirá manejar el estado global de la aplicación.

ts
// @/plugins/pinia.ts
import app from '@/plugins/app'
import { createPinia } from 'pinia'
import { PiniaHistoryPlugin } from "@/modules/ShopCart/plugins/PiniaHistoryPlugin";
import FontAwesomePlugin from "@/modules/ShopCart/plugins/FontAwesome";

const pinia = createPinia();
pinia.use(PiniaHistoryPlugin);

app.use(pinia)
app.use(FontAwesomePlugin)

Aquí están sucediendo varias cosas que despiertan curiosidad y que serán discutidas más adelante.

Sin embargo, lo importante para reconocer aquí es que primero estamos importando lo que devuelve plugins/app. Luego configuramos los complementos pinia y FontAwesomePlugin, pasándolos como complemento a la instancia de app a travéz del método use.

plugins/components ​

Continuamos con los componentes globales de la aplicación.

ts
// @/plugins/components.ts
import app from '@/plugins/app'
import { defineAsyncComponent } from 'vue'

const EmptyLayout = defineAsyncComponent(
  () => import('@/layouts/EmptyLayout.vue')
)

const DashboardLayout = defineAsyncComponent(
  () => import('@/layouts/DashboardLayout.vue')
)

const AppLink = defineAsyncComponent(
  () => import('@/components/AppLink.vue')
)

app.component('empty-layout', EmptyLayout)
   .component('default-layout', DashboardLayout)
   .component('AppLink', AppLink)

Observe que aquí también se está importando primero @/plugins/app. Luego se importan dinámicamente tres componentes respectivamente, los cuales finalmente serán implementados de manera global:

plugins/router ​

Y por último, en este archivo, también se importa primero @/plugins/app, para finalmente pasar el router como complemento global.

ts
// @/plugins/router.ts
import app from '@/plugins/app'
import router from '@/router'

app.use(router)

Esto es todo lo que necesita saber para entender lo que hace el archivo principal en cuanto a los complementos.