Vue3 composition API * Typescript * Vite * Amplify tiips

順不同でCompostion APIで色々やるスニペットを貼っていく

$routerのかわり

import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const jumpLogin = () => {
  router.push('/login')
}

NSome

routeの代わり

import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id) // pattern: /:id, path: /xxx, params: { id: 'xxx' }

NSome

element plusを使う方法

NSome

Amplify変わりすぎててわからんかった。。

@aws-amplify/ui-components => 昔からあるUIコンポーネント amplify-authenticatorとか
@aws-amplify/ui-vue => 新しい (2021/11ごろリリース) UIコンポーネント、READMEでは amplify-authenticator とか書かれているが、本当は authenticator というコンポーネント名。
こちらもREADMEには明には書いてないが、Composition APIを利用する場合は、他のVueコンポーネントと同じくimportして使うのが正解？っぽい
（auto resolveするには、ElementPlusのようにResolverを作らないといけないはず。あるのかな？）

NSome

こっちが新しい Amplify UI Component のドキュメント

NSome

Viteで新しいAmplify UI Component使う時は、下記ドキュメント記載のWork Aroundを実施する必要がある。