① nuxt3 プロジェクトをセットアップします。②「npm run generate」コマンドで SSG (静的サイトジェネレート) できます。

特に設定を変更する必要はありません。詳細な手順を以下に記載します。

(1) Nuxt3 プロジェクトの作成

Nuxt3 の公式情報に従い、プロジェクトを作成します。

# nuxt3の新規プロジェクトを作成
$ npx nuxi init nuxt3-ssg

# カレントディレクトリを移動
$ cd nuxt3-ssg

# 各種パッケージのインストール
$ npm i

# 開発環境で実行 (Ctrl+Cで停止)
$ npm run dev

(2) Nuxt3 で SSG (静的サイトジェネレート)

$ npm run generate

これで、SSG 完了です。.output/public ディレクトリもしくは dist ディレクトリを確認すると静的に生成された html/css/javascript ファイルなどが保存されています。

(3) ページを追加して確認してみる

ここではページを追加して実際に各ページが静的に生成されるか確認してみます。

app.vue にページ切り替え用のリンクを追加します。

<template>
  <!-- メニュー -->
  <ul>
    <li>
      <NuxtLink to="/">Index</NuxtLink>
    </li>
    <li>
      <NuxtLink to="/about">About</NuxtLink>
    </li>
  </ul>

  <!-- ページ内容の表示 -->
  <NuxtPage />
</template>

pages/index.vue と pages/about.vue を追加します。

<template>
  <p>Index Page...</p>
</template>

<template>
  <p>About Page...</p>
</template>

npm run generate コマンドを実行すると、index.html と about/index.html が生成されていることが確認できると思います。
実際に静的サーバーにアップロードして動作もできます。

おわりに

今回サンプルで作成したプログラムは GitHub で公開しています。MIT ライセンスとしていますのでご自由にご利用ください。

https://github.com/alclimb/nuxt3-ssg-example