Nuxt BridgeをNuxt3に移行。上に戻るボタンに対応

2023年9月6日 / 最終更新日時 : 2024年1月17日 admin Vue.js（主にNuxt.jsとVuetify）

上に戻るボタンに対応します。vue-go-topがVue3に対応していなかったので、Vuetifyを使って、実装する事にしました。
前回：Nuxt BridgeをNuxt3に移行。vue-toast-notificationかvue-toastificationを導入

上に戻るボタンを実装
【次回】ESlintを導入
今回のコミット内容

上に戻るボタンを実装

探しましたが適当なのは見つからず、処理は単純な事。
Vuetifyの公式サイトはVuetifyで出来ていて、下記に辿り着いたので、参考にさせて頂きました。

vuetify/packages/docs/src/components/app/BackToTop.vue at master · vuetifyjs/vuetify · GitHub

components/app/BackToTop.vue

※テスト書いた時にリファクタしました。（スッキリ）
→ Nuxt BridgeをNuxt3に移行。VitestとVue Test Utilsを導入

※一番下にしか出ないようになっちゃった＋テストが通らないので修正しました。

<template>
+  <!-- /* c8 ignore next 3 */ -->
+  <!-- NOTE: [Vuetify] Could not find injected layout。@scrollはtestの為 -->
-  <div
+- <v-layout-item
+  <component
+    :is="$config.public.env.test ? 'div' : 'v-layout-item'"
    id="back_to_top_item"
    v-scroll="updateShow"
    class="text-end pointer-events-none"
+    model-value
+    position="bottom"
+    size="24"
    @scroll="updateShow()"
  >
    <v-fab-transition class="ma-4">
      <v-btn
        v-show="show"
        id="back_to_top_btn"
        class="mt-auto pointer-events-initial"
        color="primary"
        elevation="8"
        icon="mdi-chevron-up"
        size="default"
        @click="backToTop()"
      />
    </v-fab-transition>
-  </div>
+- </v-layout-item>
+  </component>
</template>

<script setup lang="ts">
+ const $config = useRuntimeConfig()
const show = ref(false)

function updateShow () {
  show.value = window.scrollY > 200
}
function backToTop () {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>

<style scoped>
.pointer-events-none {
  pointer-events: none;
  z-index: 9999 !important; /* v-footer等より大きく、v-snackbar(10000)より小さい値 */
}
.pointer-events-initial {
  pointer-events: initial;
}
</style>

layouts/default.vue

-    <go-top :max-width="48" :size="48" :right="24" :bottom="24" bg-color="#1867c0" />
+    <AppBackToTop />
  </v-app>
</template>

- import GoTop from '@inotom/vue-go-top'
+ import AppBackToTop from '~/components/app/BackToTop.vue'

  components: {
-    GoTop,
+    AppBackToTop

自動インポートできるので、importは無くても動きますが、
テスト(Jest？)をどうするか決まってないので、既存と合わせて定義しました。