Nuxt.jsでDOM操作していたらReferenceError window is not definedとエラー。

原因

Nuxt.jsがvueファイルをサーバーサイドでレンダリングした時、node.jsの世界にはwindowもdocumentも存在しないため、こんなエラーが出る。

対処法

とりあえず以下の２通りで対処することとした。

process.browserの時に制限する

プロセスがブラウザの時のみ実行するようにする。

if (process.browser) {
    document.getElementById('');
}

mountedで処理する

mountedはDOMが作成された直後に呼ばれるため、documentが存在する。
要素の取得も追加もできる。

mounted: () => {
    const hs = [
        ...document.getElementsByTagName('h2'),
        ...document.getElementsByTagName('h3'),
        ...document.getElementsByTagName('h4'),
    ];
    for (const h of hs) {
        const id = encodeURIComponent(h.textContent);
        h.setAttribute('id', id);
    }
},