Nuxt3 に入門する

はじめに

Nuxt3がそろそろ正式リリースしそうなので、触ってみる

Nuxt3

• Vue3用のフレームワーク
• 開発者体験の向上
• パフォーマンスの向上

２つのレンダリングモード

• Client-side only redering　クライアントサイドのレンダリング

  • JSをダウンロードして解析後、Vue.jsがHTMLを生成
  • 静的サーバでホスティングできるのでランニングコスト抑えられる

• Universal Rendering サーバサイドのレンダリング

  • サーバでレンダリングして、HTMLをブラウザに返す
  • パフォーマンスに優れている
  • 検索エンジンの最適化できる（サーバでHTMLを持っている。クローラがインデックス貼ってくれる）

セットアップ

せっかくなので、npmでなく、pnpmというパッケージマネージャを利用する。
npmとの違いはpnpmは、圧倒的にスピードが早いところ。
開発にスピードは、大事ですからね。

shell

# Create new project プロジェクト名はnuxt-app
pnpm dlx nuxi init nuxt-app
# Install dependencies
cd nuxt-app
pnpm install --shamefully-hoist
# Run Development mode
pnpm run dev

ブラウザでアクセスしてみると、洒落た画面が出てきた！！

画面をつくる

Nuxtは、デフォルトでapp.vueをエントリポイント(最初に実行されるプログラム)として扱う。
中身を確認する

app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

めっちゃコードが短い。
NuxtWelcomeって何？？？
コンポーネントぽいけど、該当ファイルが見当たらない。

とりあえず、オリジナルの画面を実装する。
今回、注目しているuseFetchを利用して、外部からリソースを取得して、表示する。
VSCodeのリンタとフォーマッタがうまく効かない・・・。

app.vue

<template>
  <div>
    <p>{{ sampleHtml }}</p>
  </div>
</template>

<script setup lang="ts">
const { data: sampleHtml } = useFetch("https://example.com/");
</script>

表示される

新しい画面を追加する

Nuxt3では、自分自身でpagesディレクトリを切る必要がある。

shell

mkdir pages
touch pages/index.vue

適当なページを作る

pages/index.vue

<template>
  <div>Index</div>
</template>

エントリポイントにNuxtPageを追加

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

作成したページが表示されることを確認

まとめ

少ないコードでサクサク画面作れる。良さそう。