Vue Router и Main файла

При стартиране на нов Vue проект, използвам Quick Start секцията на сайта на Vue. След това, задължително, правя няколко малки промени, преди да добавя проекта към Source Control банката.

От въпросите, които ми задава npm create vue@latest почти винаги си избирам:

√ Add TypeScript? ... no / YES
√ Add Vue Router for Single Page Application development? ... no / YES
√ Add Pinia for state management? ... no / YES
√ Add an End-to-End Testing Solution? » Playwright

Другите, ако в процеса на разработка се наложат.

След изпълнение на всички инструкции, които Ви излизат по екрана, получавате един готов за стартиране проект. Първото нещо, което редактирам е Main файла - src/main.ts.

В началото той има следния вид:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

Тук има една малка скрита тайна, която вероятно не знаете. Понякога може да се случи, Vue приложението да се зареди, преди да се инициализира рутера. За да избегна появата на подобни Vue jokes, редактирам src/main.ts:

import "./assets/main.css";

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";

initializeApp();

async function initializeApp(): Promise<void> {
  const app = createApp(App);
  const pinia = createPinia();

  const { default: router } = await import("@/router");

  app.use(router);
  app.use(pinia);

  await router.isReady();
  app.mount("#app");
}

По този начин рутера се инициализира преди Vue приложението да бъде заредено. Една мъничка хитрина, която ще Ви спаси от евентуални бъдещи проблеми.