概要
Nuxt.jsで新規作成したアプリ( nuxt@2.15.4 )で Composition API を利用しようとして、 nuxt.config.js に以下のようにプラグインとして追加したところ以下のエラーが...
buildModules: [ '@nuxtjs/composition-api' ],
✖ Nuxt Fatal Error │
│ │
│ Error: Cannot find module '@nuxtjs/composition-api'
うまくプラグインをロード出来なかったっぽい🤔 nuxt@v2.15.2 の既存プロジェクトだと普通に上記の定義で起動出来た。
$ npm run dev > nuxt-sample@1.0.0 dev > nuxt-ts WARN You're using Nuxt 2.15.2, which includes built-in TypeScript runtime support 17:41:03 WARN You can safely use nuxt instead of nuxt-ts and remove @nuxt/typescript-runtime package 17:41:03 ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 17:41:04 ℹ Merging Tailwind config from ~/tailwind.config.js nuxt:tailwindcss 17:41:04 ╭───────────────────────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.2 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: static │ │ │ │ Listening: http://localhost:3000/ │ │ │ │ Tailwind Viewer: http://localhost:3000/_tailwind/ │ │ │ ╰───────────────────────────────────────────────────────╯
バージョンが現在の最新の nuxt@2.15.4 の場合はドキュメントによると以下の形で書く必要がある模様🤔
https://composition-api.nuxtjs.org/getting-started/setup
{ buildModules: [ '@nuxtjs/composition-api/module' ] }
無事に起動出来ることを確認 🙆♀️
$ npm run dev > nuxt-www@1.0.0 dev > nuxt ╭───────────────────────────────────────────────────────╮ │ │ │ Nuxt @ v2.15.4 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: client-side │ │ ▸ Target: static │ │ │ │ Listening: http://localhost:3000/ │ │ │ │ Tailwind Viewer: http://localhost:3000/_tailwind/ │ │ │ ╰───────────────────────────────────────────────────────╯
リリースノートを確認してみる
NuxtConfig周りのバグFIXっぽいのでこれが怪しい？
(わからん...違ってたらすみません...)
https://ja.nuxtjs.org/docs/release-notes/#-bug-fixes
📝 該当PRっぽいもの
https://github.com/nuxt/nuxt.js/pull/8953
教訓
サボらず公式ドキュメントを愚直に確認しよう💪
