Installing vueuse on Nuxt 2 gives an error "command not found" when you try to npm run dev

Question

CODESANDBOX link

Their guide outlines these steps Step 1: Install vueuse core and vueuse nuxt packages

npm i -D u/vueuse/nuxt u/vueuse/core

Step 2: Modify nuxt.config.js to add this line under buildModules '@vueuse/nuxt',

Step 3: Test the use windowSize function on pages/index.vue

<template lang="pug">
h1 Welcome
</template>

<script>
import Vue from 'vue'
import { useWindowSize } from '@vueuse/core'

export default Vue.extend({
  name: 'IndexPage',
  mounted () {
    console.log(useWindowSize());
  },
})
</script>

Step 4: npm run dev

It gives me this error

EDIT package.json already has all the scripts in place. If I uninstall both libraries everything works as usual with npm run dev

package.json

{
  "name": "ui",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
    "lint:prettier": "prettier --check .",
    "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lintfix": "prettier --write --list-different . && npm run lint:js -- --fix && npm run lint:style -- --fix",
    "prepare": "husky install",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "eslint --cache",
    "*.{css,scss,sass,html,vue}": "stylelint",
    "*.**": "prettier --check --ignore-unknown"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^2.0.10",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/svg": "^0.4.1",
    "buefy": "^0.9.25",
    "core-js": "^3.33.1",
    "cryptocurrency-icons": "^0.18.1",
    "nuxt": "^2.17.2",
    "qs": "^6.11.2",
    "vue": "^2.7.15",
    "vue-server-renderer": "^2.7.15",
    "vue-template-compiler": "^2.7.15",
    "vue-virtual-scroll-list": "^2.3.5"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.22.15",
    "@commitlint/cli": "^18.0.0",
    "@commitlint/config-conventional": "^18.0.0",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/router": "^1.7.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "@nuxtjs/stylelint-module": "^4.2.1",
    "@vue/test-utils": "^1.3.6",
    "@vueuse/core": "^10.6.1",
    "@vueuse/nuxt": "^10.6.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^29.7.0",
    "eslint": "^8.52.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-jest": "^27.4.3",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.18.0",
    "husky": "^8.0.3",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "lint-staged": "^15.0.2",
    "postcss-html": "^1.5.0",
    "prettier": "^3.0.3",
    "pug": "^3.0.2",
    "pug-plain-loader": "^1.1.0",
    "sass": "^1.69.4",
    "sass-loader": "^10.4.1",
    "stylelint": "^15.11.0",
    "stylelint-config-recommended-vue": "^1.5.0",
    "stylelint-config-standard": "^34.0.0",
    "vue-jest": "^3.0.7"
  }
}

Answer 1

change script to:

"scripts": {
  "dev": "nuxi dev"
}

output: this solves this problem of no command problem,