Question

I had a nuxt2 project where the package "@nuxtjs/composition-api" was installed: "^0.33.1", I need to change nuxt version from 2.5 to 3.6.2, I will be glad if you can help me solve this problem, thanks in advance.

I changed and at the moment I get an error with the yarn dev command

 ERROR  error while updating dependencies:                                                                                                                                                                                  4:36:09 PM  
Error: Build failed with 3 errors:
node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs:1:175: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "set"
node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs:2:30: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "del"
node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs:2:409: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "set"
    at failureErrorWithLog (C:UsersskyWeb	estfrontend
ode_modulesvite
ode_modulesesbuildlibmain.js:1636:15)
    at C:UsersskyWeb	estfrontend
ode_modulesvite
ode_modulesesbuildlibmain.js:1048:25
    at C:UsersskyWeb	estfrontend
ode_modulesvite
ode_modulesesbuildlibmain.js:1512:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

where I don t look I couldn t find the documentation(((, and if i remove the package i get errors in imports import {onMounted, computed, useRoute, useContext, ref} from "@nuxtjs/composition-api";

Answer 1

The @nuxtjs/composition-api package backported Composition API functionality to Vue2, however this is no longer require as Nuxt3 is built on top of Vue3; To resolve this issue, you should be able to remove the package from your package.json and as a dependency, and use the associated Composition API functions (ref, computed, etc) without requiring any imports, as Nuxt is now handling this via auto-imports, which you can read more about with the below link:

https://nuxt.com/docs/guide/concepts/auto-imports

Hope this helps you migrate to Nuxt 3 :)

Answer 2

I m also migrating a Nuxt 2 project to Nuxt 3 with the @nuxtjs/composition-api package.

One error is that vue 3 deleted the set and del functions so in order to migrate to 3 you must replace those with a working solution. Remove usage of Vue.set() with a compilant Vue 3 reactivity assing. Maybe this post can help!

Then replace all usage of @nuxtjs/composition-api with imports from

import { onMounted, computed, ref } from "@nuxtjs/composition-api"; // <-- REMOVE
import { onMounted, computed, ref } from "vue"; // <-- ADD from vue

import { useRoute } from "@nuxtjs/composition-api"; // <-- REMOVE
import { useRoute } from "#imports"; // <-- ADD Path from Nuxt 3


import { useContext } from "@nuxtjs/composition-api";
import { useNuxtApp } from "#imports"; // <-- ADD Path from Nuxt 3

Vuex

Also as bonus if you still use Vuex to handle stores you could use this package for Nuxt 3, then replace:

import { useStore } from "@nuxtjs/composition-api";
import { useStore } from "vuex";

友情链接