\r\n \u003Cmain ref=\"main\" class=\"text-blue-800 min-h-screen\">\r\n \u003Cslot />\r\n \u003C/main>\r\n \u003CBrandsWeLove />\r\n \u003CFooter/>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nexport default defineComponent({\r\n setup () {\r\n const main = ref()\r\n\r\n const { x, y } = useMouse()\r\n\r\n return {\r\n main\r\n }\r\n }\r\n})\r\n\u003C/script>\r\n```\r\n\r\n\u003Cimg width=\"1680\" alt=\"Screenshot 2021-12-29 at 21 18 50\" src=\"https://user-images.githubusercontent.com/84131395/147704185-b6a0ef92-6974-42ee-97ad-bcb73534b40a.png\">\r\n\r\nAny suggestions as to why the auto-import isn't working?\r\n\r\nOutput of running `npx nuxi info`:\r\n\r\n```\r\nNuxt CLI v3.0.0-27338323.1e98259 21:21:54\r\nRootDir: /Users/michael/kindandconscioius/kindandconscious-shopify 21:21:55\r\nNuxt project info: 21:21:55\r\n\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.13.0`\r\n- Nuxt Version: `3.0.0-27338323.1e98259`\r\n- Package Manager: `npm@8.1.0`\r\n- Bundler: `Vite`\r\n- User Config: `buildModules`, `components`, `css`\r\n- Runtime Modules: `-`\r\n- Build Modules: `nuxt-windicss@2.2.1`, `@vueuse/nuxt@7.4.1`\r\n------------------------------\r\n```",[],1115,"@vueuse/nuxt - Nuxt 3 Installation Issue?","2022-03-08T10:36:08Z","https://github.com/vueuse/vueuse/issues/1115",0.7192962,{"description":3125,"labels":3126,"number":3130,"owner":3068,"repository":3068,"state":3095,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Describe the bug\n\nhttps://nuxt.com/modules/vueuse\r\n\r\nIt says on nuxt modules website that to install VueUse Nuxt module you need to install `npm i @vueuse/nuxt` but that is not correct because you also need to install `@vueuse/core` just like it says here - https://vueuse.org/guide/#nuxt\r\n\r\nThere is inconsistency between what it says on vueuse.org and what it says on nuxt.com/modules. Also when using Nuxt to add Vueuse module it does not install `@vueuse/core` causing it not to work.\n\n### Reproduction\n\nNot needed\n\n### System Info\n\n```Shell\nNot needed\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[3127],{"name":3128,"color":3129},"vue: upstream","0E8A16",3861,"Incorrect Nuxt module installation instructions","2024-03-20T10:22:46Z","https://github.com/vueuse/vueuse/issues/3861",0.71939784,{"description":3136,"labels":3137,"number":3138,"owner":3068,"repository":3068,"state":3095,"title":3139,"updated_at":3140,"url":3141,"score":3142},"### Describe the bug\n\nThe useElementHover directive and the useDraggable Component are not working in Vue v2.16.4.\r\nDo these features of Vueuse need to be supported in v2.7 or later?\r\n\r\n- https://vueuse.org/core/useElementHover/#directive-usage\r\n- https://vueuse.org/core/useDraggable/#component-usage\r\n\r\n### Reproduction Step\r\n\r\n1. clone [repo](https://github.com/sunecosuri/vueuse-vue2-example)\r\n2. npm install\r\n3. npm run dev\r\n4. access to http://localhost:8080\r\n\u003Cimg width=\"500\" alt=\"image\" src=\"https://github.com/vueuse/vueuse/assets/13265134/ee243b94-3b26-4452-9c95-61105a400ce0\">\r\n\r\n```\r\n[Vue warn]: Failed to resolve directive: element-hover\r\n\r\n(found in \u003CApp> at src/App.vue)\r\n```\n\n### Reproduction\n\nhttps://github.com/sunecosuri/vueuse-vue2-example\n\n### System Info\n\n```Shell\nSystem:\r\n OS: macOS 13.5\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 495.55 MB / 32.00 GB\r\n Shell: 3.6.0 - /opt/homebrew/bin/fish\r\n Binaries:\r\n Node: 16.13.0 - ~/.asdf/installs/nodejs/16.13.0/bin/node\r\n Yarn: 1.22.15 - ~/.asdf/installs/nodejs/16.13.0/bin/yarn\r\n npm: 8.1.0 - ~/.asdf/plugins/nodejs/shims/npm\r\n pnpm: 6.11.0 - ~/.asdf/installs/nodejs/16.13.0/bin/pnpm\r\n Browsers:\r\n Chrome: 118.0.5993.88\r\n Safari: 16.6\r\n npmPackages:\r\n @vueuse/components: ^10.5.0 => 10.5.0 \r\n @vueuse/core: ^10.5.0 => 10.5.0 \r\n vue: ^2.6.14 => 2.6.14\n```\n\n\n### Used Package Manager\n\nnpm\n\n### Validations\n\n- [X] Follow our [Code of Conduct](https://github.com/vueuse/vueuse/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/vueuse/vueuse/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://vueuse.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/vueuse/vueuse/issues) that reports the same bug to avoid creating a duplicate.\n- [X] Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.\n- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/vueuse/vueuse/discussions).\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],3497,"The useElementHover directive and the useDraggable Component are not working.","2023-12-30T11:34:31Z","https://github.com/vueuse/vueuse/issues/3497",0.72019184,{"description":3144,"labels":3145,"number":3146,"owner":3068,"repository":3068,"state":3095,"title":3147,"updated_at":3148,"url":3149,"score":3150},"Hello,\r\n\r\nI am new to Nuxt3 but previously used vueuse. As this time I have to use nuxt I have some difficulties using client composable like `useWindowSize`.\r\n\r\nI am trying to apply class-based on windowSize but it doesn't feel reactive because code first runs on a server in nuxt.\r\n\r\nHere is sample codesandbox: https://codesandbox.io/s/infallible-glade-oiynv?file=/app.vue\r\n\r\nIn the demo, if I want to hide sidebar in `\u003C1264px` then on reload it always stays visible.\r\n\r\nAs I just use windowSize to add class, it will be better if we don't have to do some complex things like watching multiple things etc.\r\n\r\nRegards.",[],881,"[question] What is best practice to run client side code in nuxt 3","2021-11-04T18:30:13Z","https://github.com/vueuse/vueuse/issues/881",0.7210568,["Reactive",3152],{},["Set"],["ShallowReactive",3155],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fRVuWLyXw86tnEYmWclJGrdWynNa2DccV3kpvTSCJ_cQ":-1},"/vueuse/gesture/21"]