[URGENT] unable to import "useParentElement" and use "stringify"

[Jennievon]

I am trying to

1. import “useParentElement” from "@vueuse/core" and
2. “stringify” from "@vueuse/doc-utils",

...but I don't seem to have any luck.

For the first, the error says “'"@vueuse/core"' has no exported member named 'useParentElement'. Did you mean 'useCurrentElement'?”
For the second, “404 Not Found - GET https://registry.npmjs.org/@vueuse%2fdocs-utils - Not found”

version: 10.9.0

I would appreciate any help.

Reference: ttps://vueuse.org/core/useMouse/#source

Code block:

<script setup lang="ts">
import { reactive } from 'vue'
import { stringify } from '@vueuse/docs-utils'
import { useMouse, useParentElement } from '@vueuse/core'
import type { UseMouseEventExtractor } from '@vueuse/core'

const parentEl = useParentElement()

const mouseDefault = reactive(useMouse())
const textDefault = stringify(mouseDefault)

const extractor: UseMouseEventExtractor = (event) => {
  if (typeof Touch !== 'undefined' && event instanceof Touch)
    return null
  else
    return [event.offsetX, event.offsetY]
}

const mouseWithExtractor = reactive(useMouse({ target: parentEl, type: extractor }))
const textWithExtractor = stringify(mouseWithExtractor)
</script>

<template>
  <p>Basic Usage</p>
  <pre lang="yaml">{{ textDefault }}</pre>
  <p>Extractor Usage</p>
  <pre lang="yaml">{{ textWithExtractor }}</pre>
</template>

[hotenov]

@Jennievon Hi!

For the first one, check that @vueuse/core is installed in your environment

npm i @vueuse/core

If you see this warning in VS Code try to reload VS Code or just run the command of Vue extension "Vue: Restart Vue and TS servers" (by pressing Ctrl + Shift + P and typing part of the command name)

For the second, about “stringify” from "@vueuse/doc-utils"

Look at my answer to the similar discussion!

I hope, this will help you! 😉