Pinia

状態管理ライブラリVuexの代替。vue3から公式推奨。

公式：https://pinia.vuejs.org/
参考：
https://zenn.dev/comm_vue_nuxt/articles/6ff9a9024cdae4

状態管理ライブラリとは(by ChatGPT 4o)

状態管理ライブラリは、アプリケーションの状態（データやUIの状態）を一元的に管理し、予測可能かつ効率的に状態を更新するためのツールやライブラリです。特に、ユーザーインターフェースが複雑化する現代のWebアプリケーションやモバイルアプリケーションにおいて重要な役割を果たします。状態管理ライブラリの使用により、コードのメンテナンスが容易になり、デバッグがしやすくなります。

import { xxx } と import xxx の違い

この辺はVueというより、JavaScriptの知識
https://zenn.dev/captain_blue/articles/javascript-import-braces-memo

Amplify UI関連

こういった記述には @aws-amplify/ui-components のパッケージインストールが必要。
ただしこの書き方が最新の公式ドキュメントにないので、古くなった？

import {
  applyPolyfills,
  defineCustomElements
} from '@aws-amplify/ui-components/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});

createApp()について

こんな感じでよく使われる。

const app = createApp(App)
    .use(router)

app.mount('#app')

.mount() メソッドが呼ばれるまで、アプリケーションインスタンス(createApp)は何もレンダリングしない。かつ諸々の設定の後に呼ぶ必要がある。

この .mount() メソッドはすべてのアプリの設定やアセットの登録が完了した後、常に呼ばれる必要があります。

https://ja.vuejs.org/guide/essentials/application.html

Vue Router

画面遷移する時に使うモノ

公式：https://router.vuejs.org/
参考：
https://reffect.co.jp/vue/vite-vue-router