この記事の内容

昨年 Nuxt 3 Beta が出てわりと話題になっていたのですが、generate が実装されておらず使えないなーと思って放置していました。
が、先日やっとRCが出て、generateもできるようになったとのことで、早速試してみました。

※2022/04/24時点の記事です。

追記：2022/05/25
こちらに書かれているgenerateの問題は RC3 で解決したようです。RC3 では従来どおりの階層（サブディレクトリ内のindex.html）にファイルが出力されます。

手順

環境

node v16.14.2
VSCode
- Veturは無効にし、Volarを有効に。
Ubuntu 21.10

Hello World

まずはデフォルトプロジェクトで動作確認。

npx nuxi init nuxt-app
cd nuxt-app/
yarn install
yarn dev

ブラウザで http://localhost:3000/ にアクセス。デフォルトのトップページが表示されます。特に問題ありません。

新規のトップページを作ります。

pages/index.vue

<template>
  Hello World.
</template>

app.vueでpagesを参照するようにします。

app.vue

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

Hello World. と表示されます。

テスト用にいくつかのページを作成

pages/page1.vue

<template>
  Page1
</template>

pages/page2.vue

<template>
  Page2
</template>

pages/index.vue

<template>
  <a href="/page1">page1</a> /  <a href="/page2">page2</a>
</template>

※ちなみに Nuxt 3 は Vue 3 ベースなので template 内を一つの div で囲むようなことは不要です。

ブラウザで表示させ、リンクでページ遷移することを確認。

こんな感じです。

Generate してみる

yarn generate

↓このように作られます。

↓Nuxt2の際はデフォルトでは以下のようになっていたかと思います。

追記：2022/05/25
こちらに書かれている問題は RC3 で解決したようです。RC3 では従来どおりの階層（サブディレクトリ内のindex.html）にファイルが出力されます。

ここで、一見「あー、シンプルになったなー。良い良い。」と思ったのですが、よく見てみると、index.htmlのリンクは

index.html

...
<a href="/page1">page1</a> / <a href="/page2">page2</a>
...

という出力になっており、拡張子「.html」がついていません。なので、このままではリンク先が404になります。困った。

考えられる対策

Nuxt2方式で出力するようにconfigで設定する。
- →できるかどうか不明。Nuxt2に倣って「subFolders: true」などとやってみたがうまく行かず。
毎回出力されたファイルを書き換える。
- →やりたくない
SSGでの挙動を優先し、最初から拡張子付きのリンクにする（SPAではリンク切れ）
- 最悪これかな？
その他
- 何か方法あるんですか？ :href とかでリアクティブに書けば行けるかもしれないけどさすがに面倒くさくないですか？
- ※誰かベストプラクティスを知ってる方、教えてください。

SSGでだけリンクされるように書く(SPAはあきらめる)

思いつかなかったので（時間がなかったので）2番目の案でやってみます。

index.vue

<template>
  <a href="/page1.html">page1</a> /  <a href="/page2.html">page2</a>
</template>

これで一見うまく行きそうですが、実はうまく行きません。これでは generate しても page1.html と page2.html が出力されません。リンク先が外部ファイルだとみなされファイル出力対象から外れてしまうからですね。

というわけで、こうやってみました。

index.vue

<template>
  <a href="/page1.html">page1</a> /  <a href="/page2.html">page2</a>
  <div style="display:none">
    <a href="/page1">page1</a> /  <a href="/page2">page2</a>
  </div>
</template>

これで行きました。

ダサい！ダサすぎる！！

余談：Windows 10 の場合

Windows 10 ＋ Git bash で generate を実行してみると、以下のようなエラーになりました。

 ERROR  Only file and data URLs are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'

これはうちの環境だけ（Git bashの設定など）の問題でしょうか？

とりあえずこの問題も未解決のまま放置しています。

考察

というわけで、今のところこのダサい案でやっています。
もっといい方法きっとあると思うのですが、ご存知の方は誰か教えてください。