Nuxt3 には構成が変わるだろうから、今から導入するのはどうかなとは思いますが、

Composition API を使いたいので始めたいと思います。

pages、components 以下を移行すれば動くような淡い期待！

プラグイン

  • @nuxtjs/composition-api

↓ 通りにやれば Composition API 使える！

https://composition-api.nuxtjs.org/getting-started/setup

ハマったポイント

データ取得どうやるの?

普段 Nuxt.js でデータ取得する場合には middleware で action 呼んで、

取得完了を待ってページがレンダリングされる使い方が多いのですがどうも良さげな API がないらしい。

useFetch

を使ってもページレンダリングが待ってくれない

ここは今まで通り middleware で action を呼ぶしななさそう・・・

Composition API っぽく書くと ↓ な感じ

<template>
	<div>
		Stars: {{ stars }}
  <div>
<template>
<script lang="ts">
import {
  defineComponent,
  computed
} from '@nuxtjs/composition-api';

// 適当な遅延Promise
function fetchStars(num = 0): Promise<number> {
  num += 1;
  return new Promise((resolve) => {
    setTimeout(() => {
      return resolve(num);
    }, 5000);
  });
}

export default defineComponent({
	async middleware({ store }) {
    // action相当の処理
    const stars = await fetchStars(0);
    store.commit('star/setStar', stars);
  },
	setup() {
		const stars = computed(() => store.state.star.star);

		return {
			stars
		}
	}
})
</script>

おわり

@nuxtjs/composition-api を触るのは Vue3、Nuxt3 へのモチベーションとしていいけど、

現状ではあまりプロジェクトへの導入はできないかなと思いました。