[小ネタ]Nuxt.jsアプリケーションのグローバルIDを変更する

こちらの検証をしていて、最後まで残ったNuxt.jsアプリケーションのルート要素について、レスポンスとなる断片的なHTMLに残すなら、id属性を個別に切り替えようと変更方法を確認しました。

Nuxt.jsアプリケーションのレスポンスを断片的なHTMLになるようにカスタマイズしてみた

これは1つのページを構成するHTMLコンポーネントでid属性が重複するのが嫌だったためです。
(後で id="__nuxt" を変更しても id="__layout" が重複したままなことに気付きましたが)

$ curl localhost:3000
<div data-server-rendered="true" id="__nuxt"><!----><!----><div id="__layout"><div class="container">
  Hello World
</div></div></div>

globalNameプロパティでグローバルIDを変更

globalNameプロパティ
https://ja.nuxtjs.org/api/configuration-global-name/

nuxt.config.js の globalName プロパティで指定可能でした。 id="__nuxt" の nuxt 部分が globalName で指定したものに変わります。

試しに id="__sample" になるように、設定を変更します。

nuxt.config.js

export default {
  mode: 'universal',
  render: {
    injectScripts: false,
  },
  globalName: 'sample',
  ...

$ curl localhost:3000
<div data-server-rendered="true" id="__sample"><!----><!----><div id="__layout"><div class="container">
  Hello World
</div></div></div>

レスポンスに含まれるルート要素のidが変更されていることが分かります。

globalNameプロパティとglobalsプロパティの補足

公式ドキュメントでも記載がありますが、ソースコードも確認しました。
https://ja.nuxtjs.org/api/configuration-global-name/

https://github.com/nuxt/nuxt.js/blob/2.x/packages/config/src/config/_common.js#L18

  ...
  // Globals
  globalName: `nuxt`,
  globals: {
    id: globalName => `__${globalName}`,
    nuxt: globalName => `$${globalName}`,
    context: globalName => `__${globalName.toUpperCase()}__`,
    pluginPrefix: globalName => globalName,
    readyCallback: globalName => `on${capitalize(globalName)}Ready`,
    loadedCallback: globalName => `_on${capitalize(globalName)}Loaded`
  },
  ...

globalName のデフォルトが nuxt であり、さらに id: globalName => __${globalName}, というように、 globalName の前に __ を付与したものが id として使われるのが分かりますね。