LIFF×Vue×Flask×Cloud Runアプリ実装（LINEアプリ）②
こちらの続き 前回までで基本的な環境構築はできているので、この記事はVueの内容がメインになるかと思います。 「Options API」と「Composition API」 ちょっと本筋からズレちゃいますが、実装を試していく上でハマったので、Options APIとCompositon APIの書き方の違いについて触れたいと思います。 前の記事でLIFFの開発環境を構築した際は以下のように、Options APIでソースが生成されていました。（sendMessagesの部分だけ前回の記事で追加しています） src/App.vue これは古い書き方っぽくて現在のトレンドはCompositon APIだそうなので、以下のように修正します。 コードの量が減り見やすくなりました。 この状態で後続に進みます。 子コンポーネントを使用 Vueではパーツごとにコンポーネントという単位でファイルを分けて、必要に応じて取り込めるということなので、一旦子コンポーネントを作成して表示します。 src配下にcomponentsというフォルダを作成して、components配下に、CustomTextArea.vueというファイルを以下のように作成します。 次にApp.vueを以下のように変更します。 import文の追加と「<CustomTextArea 〜/>」というタグの追加です。 画面遷移 Vueの機能を使用して、ルーティング機能を追加しようと思います。URLごとに表示するコンポーネントを出し分けることで画面遷移を実装していきます。 vue-routerをインストールします。（公式サイトはこちら） インストールできたら、main.jsと同じ階層にrouter.jsを作成します。 そして、同じ階層にviewsというフォルダを作成して、その中にTest1.vue、Test2.vueを作成します。 中身は前回使用したvueファイルをコピーしただけで「test1です」「test2です」という文言だけ追加してます。 続いてmain.jsを修正 router.jsを使用できるようにします。 App.vueも修正 修正箇所としてはRouterView, RouterLinkのimport追加 「<RouterLink to=></RouterLink>」でリンク追加 「<RouterView />」でリンクをタップした場合の表示領域の作成です。 画面表示します。まずは「<liff url>/」 「リンクテスト」「リンクテスト２」というリンクが追加されています。 続いて、リンクテストをタップ test1ですという文言などが表示されます。 続いてリンクテスト２をタップ test2ですの表示に切り替わりました。