Cannot find package '@vue/composition-api' imported from - NUXT 3

The error you're encountering is due to a mismatch or missing dependency related to @vue/composition-api. This package is typically used with Vue 2, but Nuxt 3 uses Vue 3, which has the Composition API built-in. The issue might be arising from a package that is not fully compatible with Vue 3 or Nuxt 3.

Here are the steps to resolve this issue:

1. Ensure Compatibility: Make sure all your dependencies are compatible with Vue 3 and Nuxt 3. Specifically, check if vue-demi is causing the issue, as it is a compatibility layer for libraries that support both Vue 2 and Vue 3.

2. Check Pinia Version: Ensure you are using a version of Pinia that is compatible with Vue 3. The latest versions of Pinia should be compatible with Vue 3.

3. Clean Install: Sometimes, cleaning the node_modules and reinstalling dependencies can resolve such issues.

Here is a step-by-step guide to address the problem:

Step 1: Update Dependencies

Ensure your package.json has the correct versions of the dependencies:

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.5.4",
    "nuxt": "^3.13.0",
    "vue": "^3.2.0",
    "vue-router": "^4.0.0"
  }
}

Step 2: Clean Install

Delete the node_modules directory and the package-lock.json file (or yarn.lock if you are using Yarn), and then reinstall the dependencies:

rm -rf node_modules package-lock.json
npm install

Or if you are using Yarn:

rm -rf node_modules yarn.lock
yarn install

Step 3: Verify Configuration

Ensure your nuxt.config.ts (or nuxt.config.js) is correctly set up:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@pinia/nuxt']
})

Step 4: Check for Vue-Demi

If the issue persists, it might be related to vue-demi. Ensure that vue-demi is correctly installed and compatible with Vue 3. You can try installing it explicitly:

npm install vue-demi

Or with Yarn:

yarn add vue-demi

Step 5: Rebuild and Run

After performing the above steps, rebuild and run your Nuxt application:

npm run dev

Or with Yarn:

yarn dev

By following these steps, you should be able to resolve the issue related to the @vue/composition-api package not being found. If the problem persists, consider checking the specific versions of the packages and their compatibility with Vue 3 and Nuxt 3.