Nuxt×TypeScriptでmiddlewareを使う

はじめに

この投稿はこちらのページと同じことを記載しているだけです

ゴール

• Nuxt.jsに
• Typescriptを導入して
• middlewareを使う

問題

こちらに記載されている通り、middlewareはVue標準でなくNuxt独自のプロパティである為、そのままjs→tsに変換してもうまく行かない

js:読み込める

index.vue

<script>
export default {
  middleware: 'auth'
}
</script>

ts:読み込めない

index.vue

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

@Component({
  middleware: 'auth'
})
export default class extends Vue {}
</script>

Object literal may only specify known properties, and 'middleware' does not exist in type 'ComponentOptions<Vue...... というエラーが発生してしまう

解決策

ComponentOptionsを拡張してmiddlewareを追加する

index.d.ts

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    // This adds the `middleware` property to the existing `vue/types/options/ComponentOptions` type
    middleware?: string | string[];
  }
}

これで読み込めなかったtsでも読み込めるようになる