Problem

When loading TEI/XML files and visualizing them with JavaScript (such as Vue.js), there were cases where unintended whitespace was inserted.

Specifically, when writing HTML like the following:

It was displayed as shown below, with unintended spaces inserted: “お問い合わせはこちらからお願いします”.

A solution for this issue was published in the following repository.

However, I was unable to get it working properly with Nuxt 3 in my environment, so I referenced the source code and introduced it into Nuxt 3.

Below is a note on this process.

Introduction to Nuxt 3

Create plugins/removeWhitespace.ts.

Then, use the v-remove-whitespace directive in pages/index.vue, etc.

As a result, the unintended whitespace was successfully removed.

My understanding of directives may be incomplete, and there may be errors, but I hope this serves as a useful reference.

Below are the source code and demo site (GitHub Pages).

As a side note, by writing nuxt.config.ts as follows, I was able to specify the baseURL.

I hope this serves as a useful reference for publishing Nuxt 3 SSG on GitHub Pages.