Nuxt.js + TypeScript + Composition API の.vueファイルテンプレート

結論

VSCodeで、nuxttsと打ち込むだけで以下のテンプレートが出力されるようにします。

Hoge.vue

<template>
  <div></div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
} from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const state = reactive({

    })
    return {
      state,
    }
  }
})
</script>

<style>

</style>

手順

[ctrl] + [shift] + [p] を押し、User Snippets と入力してエンターを押します。

vue と入力し、vue.json を作成します。
以下の内容を入力します。コメントアウト部分はデフォルトの記載です。不要であれば消してください。

{
	// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"nuxtTs": {
		"prefix": "nuxtts",
		"body": [
			"<template>",
  			"\t<div></div>",
			"</template>",
			"",
			"<script lang=\"ts\">",
			"import {",
  			"\tdefineComponent,",
  			"\treactive,",
			"} from '@nuxtjs/composition-api'",
			"",
			"export default defineComponent({",
  			"\tsetup() {",
    		"\t\tconst state = reactive({",
			"",
    		"\t\t})",
    		"\t\treturn {",
      		"\t\t\tstate,",
    		"\t\t}",
  			"\t}",
			"})",
			"</script>",
			"",
			"<style>",
			"",
			"</style>"
		]
	}
}

保存してテキトーに.vueファイルを作って、nuxttsと打ちます。

やりました。

補足

素の@vue/composition-apiではなく@nuxtjs/composition-apiを使っています。asyncDataが使えない等の面倒な問題をある程度解決してくれています。
ただバージョンが浅いのでいきなり仕様が変わったりするかもしれません。(そこはご愛敬)

末尾のカンマとかstyleの言語とかは各々カスタマイズしていただければと思います。

感想

Vue3リリースおめでとうございます。Nuxt.jsのVue3対応が待ち遠しいですね！

コードスニペット作ってみて思ったんですが、何が面倒って""とか,とか\t(タブ)とかいちいち打ち込むところですね。
ある程度は一括入力で何とかなるんですが、タブ揃えのための\t打ち込みがしんどい。。。

Vue, Composition API, TypeScriptでの開発はまだコーディングのお作法のデファクトみたいなのが決まっていないと思うので、こういうテンプレも良いよーというのがあれば是非教えてください！

(追記)「vscode スニペット 作成」でググったらめっちゃ普通にスニペット作成ツールがありました(激怒)
ポチポチ記号を打ち込む前に調べなかった自分への激怒であり、スニペット作成ツールは神です。これから積極的に使います。

(追記2)投稿してから思ったんですが、Vue3何も関係ないのでタイトルから削除しました()