Nuxt.jsでのページ遷移後のhtmlについて

Question

Nuxt.jsで、初回ページ表示時はHTMLのdata属性が読まれているのですが、
ページ遷移後data属性が読み込まれない原因はどこにあるのでしょうか？

１、luxy.js( https://min30327.github.io/luxy.js/ )と言うスクロールに余韻を与え、さらに要素にdata属性を付与することでパララックスも演出できるプラグインを使用しているのですが、どうもページ遷移をし戻ってくるとパララックス部分が動かなくなります。

<div class="text-box luxy-el" data-speed-y="-10" data-offset="150">
    <p class="title">{{item.name}} + {{index}}</p>
    <p class="category">{{item.category}}</p>
</div>

↑このdata部分でパララックスのパラメータを与えているのですが、動作しなくなります。

<template>
  <div>
    <Mouse/>
    <Opening/>
    <Header/>
    <div id="luxy">
      <nuxt/>
    </div>
  </div>
</template>

↑また、このプラグインではパララックス処理の他に、#luxyを与えることで余韻あるスクロールが動作するようになるのですが、この部分はページ遷移後もうまく動作しています。このことからルーティング内に記載していることが怪しいとは思うのですが、解決法などあるのでしょうか。。

Answer 1

一応、ページ描画の度に luxy.init() を呼び出すことでページ遷移後もアニメーションが動作するようになりますが、luxy 側で想定されていない使い方のためお勧めしません。安全に運用するためには、 luxy と nuxt の併用はあきらめるか、luxy のソースコードを自力で改修するしかなさそうです。

説明

Nuxt.js はページ遷移を表現するために、DOM 要素（HTMLのタグなどのこと）を必要に応じて生成してドキュメントにマウントします。

一方 luxy.js は、 init() メソッドを呼び出した際にドキュメントを走査し、対象となる属性を持つ要素を検出してスクロールの動作をドキュメントに登録します。

最初に luxy.js の init() 関数呼び出しでドキュメントを走査した時に存在した DOM 要素が、Nuxt のページ描画処理で一度削除され、のちに最初のページに戻った際には Nuxt によって 新たな 要素が生成されてドキュメントに登録されて見かけ上は最初と同じに戻りますが、実態としては最初に生成されたコンテンツとは別の要素になっています。

この時 luxy は init() 呼び出し時に見つけた、すでに DOM 上に存在しない要素を動かそうとするため、うまくいかなくなっています。

対応としては、冒頭に書いたように、ページコンポーネント側の mounted フックに luxy.init() を登録するなどの対応が考えられますが、luxy.js のソースコード の 88 行目以降を見る限り、登録した resize イベントを除去するコードや Targets 配列を初期化するコードは存在せず、そもそも複数回呼び出されることを想定していない設計であることが分かります。そのため、この対応方法はやや危険です。

最低限、ページ更新時に init() を呼び出すコード

ページコンポーネントファイル (page/~.vue) のスクリプト部分に、以下を追加

export default {
  /* data, computed, ... */
  mounted() {
    luxy.init()
  }
}

補足

Nuxt.js が DOM 要素を削除するようなことを書きましたが、正確には、ページ内容に差分の無い箇所は要素を削除せずにそのまま再利用することがあります。

さらに補足 (少なくともこれで動作しています)

<template>
  <div id="luxy" class="text-box luxy-el" data-speed-y="-80" data-offset="150">
    <p>Lorem ipsum dolor sit amet, graeci compr...
    <p class="text-box luxy-el" data-speed-y="-80" data-offset="150">MOVE TEXT</p>
    <nuxt-link to="/nextpage" >NEXT PAGE</nuxt-link>
  </div>
</template>
<script>
import luxy from 'luxy.js'
export default {
  mounted() {
    luxy.init()
  }
}
</script>

Comments

[okpk]

大変細く記載していただきありがとうございます。
それぞれのpage/vueにluxyを読む方法で一旦は解決しようと思ったのですが、
現状は、pluginsでluxyをimportし、nuxt.config.jsで読んでいる前提で、
あらたに各pageのvueファイル<script>タグ内に
import Luxy from "luxy.js"
を記載するだけで、
「window is not defined」　と言うエラーが出てしまいます。

これはやはりnuxtとluxy.jsの相性が悪いと思って諦めるしかないのでしょうか。。

[R.Mizukami]

追記した通り、私の環境では一応動作はしています。create-nuxt-app で適当に生成して luxy のみインストールしただけの環境ですが……。
window is not defined のエラーはバンドラーによるものと思います。あるいは、サーバー側で実行してしまっているのなら、それが原因だと思います。サーバーサイドで実行される部分に luxy#init() が含まれていると当然そのようなエラーになります。クライアントサイドで実行するようにしてください。

[okpk]

度々ありがとうございます。
こちらも新たにyarn createでnuxtプロジェクトを開始して試してみたのですが、やはり(page/~.vue)ファイルでimport luxyの記述するとwindow is not definedが出てしまいました。

しかしdata属性が効かないと言う点は理解できましたので、一旦解決にさせていただきます。
回答ありがとうございます。

(追記)
nuxt.configでmodeを"spa"に変えると動作することを確認しました。
universalの場合でもなんとか使えないか検証続けてみます。