Daftar cangkuk tambahan dalam projek NuxtJs menggunakan komponen kelas Vue

Question

Saya sedang membina projek NuxtJs pertama saya dan saya juga menggunakan komponen kelas Vue untuk menulis komponen saya sebagai kelas.

Selepas menggunakan komponen kelas Vue, saya menghadapi masalah mengakses cangkuk komponen beforeRouteEnter (tidak dipanggil lagi). Jadi saya menjumpai dokumentasi tentang mendaftarkan cangkuk tambahan apabila menggunakan perpustakaan ini, tetapi saya tidak dapat mengetahui tempat untuk meletakkan pernyataan import dalam struktur NuxtJs.

Saya mempunyai fail ini (sama seperti dokumentasi):

// class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

Dan saya ingin mendapatkan bantuan tentang cara menyediakannya dalam projek NuxtJs saya:

// Where should I place this?
import './class-component-hooks'

Answer 1

Hasilnya sangat mudah:

Saya telah meletakkan fail .js ke dalam folder plugins:

// plugins/class-component-hooks.js
import Component from 'vue-class-component'

// Register the router hooks with their names
Component.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

Kemudian dalam fail nuxt.config.js saya saya meletakkan baris ini:

...
  plugins: [
    { src: "~/plugins/class-component-hooks.js", mode: "client" },
  ],
...