question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@vueuse/nuxt - Nuxt 3 Installation Issue?

See original GitHub issue

Following the installation advise here: https://vueuse.org/guide/#nuxt

Is there anything else we need to do to get this working within a Typescript setup?

I have a very minimal Nuxt 3 starter, with just Windi.css and @vueuse/nuxt as the build modules - and I see this error:

Screenshot 2021-12-29 at 21 18 41

Without calling useMouse():

Screenshot 2021-12-29 at 21 18 08

Example of code:

<template>
  <Navigation/>
  <main ref="main" class="text-blue-800 min-h-screen">
    <slot />
  </main>
  <BrandsWeLove />
  <Footer/>
</template>

<script lang="ts">
export default defineComponent({
  setup () {
    const main = ref()

    const { x, y } = useMouse()

    return {
      main
    }
  }
})
</script>
Screenshot 2021-12-29 at 21 18 50

Any suggestions as to why the auto-import isn’t working?

Output of running npx nuxi info:

Nuxt CLI v3.0.0-27338323.1e98259                                                                                                           21:21:54
RootDir: /Users/michael/kindandconscioius/kindandconscious-shopify                                                                         21:21:55
Nuxt project info:                                                                                                                         21:21:55

------------------------------
- Operating System: `Darwin`
- Node Version:     `v16.13.0`
- Nuxt Version:     `3.0.0-27338323.1e98259`
- Package Manager:  `npm@8.1.0`
- Bundler:          `Vite`
- User Config:      `buildModules`, `components`, `css`
- Runtime Modules:  `-`
- Build Modules:    `nuxt-windicss@2.2.1`, `@vueuse/nuxt@7.4.1`
------------------------------

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:20 (14 by maintainers)

github_iconTop GitHub Comments

1reaction
michealrobertscommented, Mar 2, 2022

@idanceinbetween Can confirm install via npm.

0reactions
idanceinbetweencommented, Mar 7, 2022

useMouse is from @vueuse/core.

Using yarn (v1) and npm 6, the result is the below thus we could use it:

node_modules/@vueuse/core

Using npm 8, the result is:

node_modules/@vueuse/nuxt/node_modules/@vueuse/core

I’m not sure if this is an issue with npm 8, or how dependencies are defined within @vueuse as a project.

I guess the workaround for now is to use npm 6 or yarn if those are the package managers of choice.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Installing the nuxt3 version based on documentation fails ...
Same issue here. Can't install it with Nuxt 3. Node v18.1.0. NPM v8.10.0. npm ERR! ERESOLVE could not resolve npm ...
Read more >
vueuse/nuxt
This is an add-on of VueUse, which provides better Nuxt integration auto-import capabilities. Install. npm i @vueuse/nuxt. // nuxt.config export ...
Read more >
Get Started | VueUse
From v7.2.0, we shipped a Nuxt module to enable auto importing for Nuxt 3 and Nuxt ... nuxt.config.ts export default { modules: [...
Read more >
How to use vue 3 with nuxt?
I'm using Nuxt3 for a project and when installing it with the cli in the docs it generated a vue 2.7 project. How...
Read more >
Installation
Here, you will find information on setting up and running a Nuxt project in 4 steps.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found