🐷

Nuxt3 に入門する

2022/10/20に公開約1,700字

はじめに

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

Nuxt3

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

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

  • 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>

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

まとめ

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

Discussion

ログインするとコメントできます