課題

TEI/XMLファイルを読み込み、JavaScript（Vue.jsなど）で可視化を行う際、意図しないWhitespaceが入ってしまうケースがありました。

具体的には、以下のようなHTMLを書いた場合、

以下のように表示され、「お問い合わせはこちらからお願いします」と意図しないスペースが入ってしまいました。

この課題に対して、以下のリポジトリで解決策を公開してくださっていました。

ただ私の環境ではNuxt3ではうまく動作させることができなかったため、ソースコードを参考に、Nuxt3へ導入してみました。

以下、この備忘録です。

Nuxt3への導入

plugins/removeWhitespace.tsを作成します。

そして、pages/index.vueなどで、v-remove-whitespaceディレクティブを使用します。

その結果、以下のように、意図しないWhitespaceを削除できました。

ディレクティブの理解が不十分で誤っている点もあるかと思いますが、参考になりましたら幸いです。

以下、ソースコードとデモサイト（GitHub Pages）です。

なお、本題と話がそれますが、nuxt.config.tsを以下のように記述することで、baseURLを指定することができました。

Nuxt3のSSGをGitHub Pagesで公開する際の参考になりましたら幸いです。