More than 5 years have passed since last update.

Nuxt TypeScriptでオリジナルPluginを作る方法

Last updated at 2019-12-28Posted at 2019-12-28

TypeScriptでNuxtプラグインを書くけども

今回はVueインスタンスにインジェクトしないようなプラグインの方法です(ほとんどMiddlewareと大差ないように思えますが)
Vueインスタンスにインジェクトするパターン(this.$myPluginみたいなの)は公式サイトで説明があるので、そちらを参照してください。

今回は単にrouteを表示するpluginを作る場合

pluginsディリクトリ以下にMyRoute.ts(お好きな名前で)などという名前をつけて以下のように書く

import { Plugin } from '@nuxt/types'

const myPlugin: Plugin = ctx => {
  console.log(ctx.route.path)
}
export default myPlugin

機能的には同じですが、
以下のようにContext型で書くこともでき、こちらの方がよりシンプルになります。


import { Context } from '@nuxt/types'

export default ({ route }: Context) => {
  console.log(route.path)
}

nuxt.config.jsのpluginsプロパティを書き換える。これは通常通りです。

nuxt.config.js

plugins: [{ src: '~/plugins/MyRoute' }],

ちょっと型注釈で困ったので備忘録に。