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

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

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

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

f:id:kic-yuuki:20211205093324p:plain

簡単な例ですが、赤枠の 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>