Nuxt3 使ってみた

いつも Vue しか書いていないフロントド素人です。今さら Nuxt に入門しました。

プロジェクトのセットアップ

nuxt init

これで nuxt のサンプルプロジェクトが生成されます。

SSR っぽいことをしてみる

App.vue を捨て、次のディレクトリ構成にしてみます。
普通の Vue と違って Nuxt はディレクトリ構成の制約が強く、例えば pages/index.vue はページパス / にアクセスした際に表示されるページの構成に相当します。

Vue と Nuxt の関係はだいたい Ruby と Ruby on Rails のような関係でしょうか？

node_modules
layouts
└ default.vue
pages
└ index.vue
package.json

レイアウト

layouts/default.vue

<template>
  <div>
    <header>
      ヘッダーだよ
    </header>
    <NuxtPage />
    <footer>
      フッターだよ
    </footer>
  </div>
</template>

ページの基本的なレイアウトを layouts/default.vue に記述します。<NuxtPage /> は Vue-Router の <router-view> みたいなもので、Nuxt でレンダリングされるページコンポーネントになります。

ページ

pages/index.vue

<template>
  <div>
    このページは {{ dateTime }} にレンダリングされました！
  </div>
</template>

<script setup>
const { data: dateTime, refresh, pending, error } = useAsyncData(() => {
  return new Date().toString()
})
</script>

レンダリング時の時刻を表示するページです。

asyncData はレンダリング前にデータを API から取得するステージで、そのライフサイクルフックが useAsyncData です。レンダリング時にほど近い時刻を打刻できます。

開発者ツールを確認すると、HTML 読み込みの時点で dateTime が計算されていることがわかります。フロントエンドのウェブサーバが計算して返したということでしょう。

おわり

スマートフォンが対象の WEB サイトで夢が広がる～
全然わかっていないので冬休みに勉強します。