Dependency issue with @nuxtjs/composition-api

I’m trying to use @vueuse/core with @nuxtjs/composition-api in my Nuxt project. And I get a error message:

This dependency was not found:
* @vue/composition-api/dist/vue-composition-api.esm.js in ./node_modules/vue-demi/lib/index.mjs

But @vue/composition-api have been install. Because @vue/composition-api is also @nuxtjs/composition-api’s dependency. I have no idea how to fix it.

Here is reproduction link: codesandbox

Have any solution to fix this? Thank you!

[Kematia]

If you’re on Netlify try adding a .nvmrc file with your desired node version, this fixed it for me!

[TonyPythoneer]

Hi @antfu @Ricklin90085

Before this PR nuxt-community/composition-api#517 gets merged, I have another workaround to this issue. It’s worked to me.

import { resolve } from 'path'
const vueCompositiobnAPIFullpath = resolve("./node_modules/@vue/composition-api/dist/vue-composition-api.esm.js");

config = {
  alias: {
    // keep default settings
    '~~': resolve(__dirname, './'),
    '@@': resolve(__dirname, './'),
    '~': resolve(__dirname, './'),
    '@': resolve(__dirname, './'),
    'assets': resolve(__dirname, './assets'), // (unless you have set a custom `dir.assets`)
    'static': resolve(__dirname, './static'), // (unless you have set a custom `dir.static`)
    // workaround
    '@vue/composition-api/dist/vue-composition-api.esm.js': vueCompositiobnAPIFullpath,
  },
}

Thanks to the @antfu 's answer, he inspires me to have this workaround.

---

So, when we have this workaround, we can enjoy @vueuse 's charm. 😄