#composables
公式ドキュメントにあるcomposableの例を参考に使ってみる。
composablesのディレクトリにstate.tsを作る。
ここでexportしたデータをapp.vueで読み込んで使えたので、教材にあったサンプルのリストデータを読み込めるように編集。

• Typescriptで躓く
  リスト（list）が配列でその中のオブジェクトにさらに配列（cards)があり、cardsの型が合わないとエラーが出る。
  Typescript初心者なので配列で入れ子になってる時ってどうやって型を書けば良いのかわからずしばらく調べる。
  やっと求めていた答えが書いてある記事を見つける。
  https://www.orzs.tech/typescript-interface-nest
  型はtypesというディレクトリ内にまとめることにして、リストの型をList.tsに書いて、state.tsに読み込んだらやっとエラーが消えてデータが表示できた。

やっとリストを読み込めるようになったので、componentsにBoard.vueを作ってリストのタイトルだけ表示するのとcssを読み込むところまで進める。

• cssファイルの読み込み
  cssの読み込みをnuxt.config.tsに追記した際、最初は@assets/css/styles.cssと書いたところファイルが見つからないと言われたので、エイリアスの設定を調べてみた。結果@なしで書いたら読み込めた。

• componentsのBoardをapp.vueに読み込ませる。
  これまでのNuxtやVue CLIのファイルと違って、ではなくとなっていて、その中にexport default{}でcomponentsを記入したらそんな書き方できません、と怒られる。ドキュメントに書き方の例がないのでしばし検索したり考えたりする。stateのデータはシンプルにconst list = defaultList();と書いただけだったので、import Board from './components/Board.vue';とだけ書いてみたら成功。components{}とかも何もいらなくてローカルではちゃんとリストが表示されているけれど、本当にあっているのか謎。
  ↓追記
  下記の記事にコンポーネントの一覧を登録する必要がなくなった、と書いてあったのであっているようです。
  https://zenn.dev/azukiazusa/articles/676d88675e4e74