Nuxt(Vue) 2 だけど script setup 使ったら、体験良かった

QIita - Nuxt.jsアドベントカレンダー2021 の5日目記事です。（ちょうどネタがあったので投稿してみました）

結論、お試しできる Vue / Nuxt 2 環境があったら、unplugin-vue2-script-setupを導入すると、お手軽に<script setup>を体験できるよ、という話しです。

<script setup> については、次の記事がわかりやすいかと思います。

zenn.dev

Nuxt 2.x 環境で script setup を利用可能にする

• Nuxt.js 2.x
• @nuxt/content -> Content とは - Nuxt Content
• @nuxtjs/composition-api -> Nuxt Composition API

を使って、次のブログを作りました。

• zaki-blog
  • なんでブログ作ったかはこちら -> @nuxt/content でブログつくった という近況報告 - ざきの学習帳（旧 zackey推し ）

Vue 3 から利用できる <script setup> も素振りしたいと思い、unplugin-vue2-script-setup を導入してみました。

github.com

導入した際のハマったことはこちら -> Vue / Nuxt 2系で <script setup> を使用するには unplugin-vue2-script-setup を導入する

<script setup>修正前後の diff

簡単な例ですが、赤枠の PostDateTime.vue を script setup 構文に変えてみたところ、次のようになりました。 by 元のコミット -> refactor: PostDateTime.vue を script setup に · zakizaki-ri9/blog@2c94d71 · GitHub

-<script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api'
+<script setup lang="ts">
import dayjs from 'dayjs'
type Props = {
  postedAt: string
}
+const { postedAt } = defineProps({
+  postedAt: {
+    type: String,
+    required: true,
+  },
+})
const format = (datetime?: string) => {
  return datetime ? dayjs(datetime).format('YYYY-MM-DD') : undefined
}
-export default defineComponent({
-  props: {
-    postedAt: {
-      type: String,
-      required: true,
-    },
-  },
-  setup({ postedAt }: Props) {
-    return { formatedPostedAt: format(postedAt) }
-  },
-})
+const formatedPostedAt = format(postedAt)
</script>

PostDateTime.vueは日付を表示するだけの簡単なコンポーネントですが、defineComponent内にネストした記述が不要となり、見通しが良くなったのがわかるかと思います。

おわり

年末年始に Vue / Nuxt 3 に触れてみようという方、もし Vue / Nuxt 2 環境下で試せるリポジトリがあれば unplugin-vue2-script-setup を導入し、<script setup>を触ってみてはいかがでしょうか。