【Nuxt.js】クラスベースコンポーネントを使えるようにする（nuxt-property-decorator）

2020年8月9日

Typescriptを使用したVue.jsの開発をしていた時はクラスベースコンポーネントでVueコンポーネントを開発していたので、Nuxt.jsでも同様に使えるようにしようと思って設定しました。

環境情報

node.js: version 12.18.0
npm: version 6.14.4
Nuxt.js: version 2.13.0
Typescript: version 3.8.3

Nuxt.jsでクラスベースコンポーネントを使えるようにする

クラスベースコンポーネントを使用するために今回使用するパッケージはnuxt-property-decoratorです。

nuxt-property-decoratorをインストールする

npmでnuxt-property-decoratorを以下のコマンドでインストールします。

npm install --save nuxt-property-decorator

このパッケージを入れるとクラスベースコンポーネントで記載できるようになります。

クラスベースコンポーネントに書き換える

例えばVueファイルにこのようなTypescriptの記載があったとします。（私はクラスベースコンポーネントを以外使ったこと無いので記載間違っているかも・・・）

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
	data() {
		return {
			msg: 'Sample'
		}
	},
	props: {
		propText: { default: '', type: String, require: true },
	}
})
</script>

これをクラスベースコンポーネントに書き換えます。

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

@Component({
	data() {
		return {
			msg: 'Sample'
		}
	},
})
export default class SampleComponent extends Vue {
	private msg: string
	
	@Prop({ default: '', required: true })
	private propText: string
}
</script>

クラスベースコンポーネントで記載するとこんな感じです。

今回インストールしたnuxt-property-decoratorはvue-property-decoratorのラッパーだそうで、nuxt-property-decorator独自のアノテーションも追加されているとのことです。この辺りは実際に使用した際にまた記事にしようかと思います。