fix(nuxt): support import submodules for @vueuse/integrations

package.json

@@ -50,6 +50,10 @@
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
+    "@vueuse/core": "./packages/core",
+    "@vueuse/integrations": "./packages/integrations",
+    "@vueuse/math": "./packages/math",
+    "@vueuse/shared": "./packages/shared",
     "axios": "^0.27.2",
     "bumpp": "^8.2.1",
     "consola": "^2.15.3",

packages/metadata/scripts/update.ts

@@ -113,6 +113,9 @@ export async function readMetadata() {
       if (related?.length)
         fn.related = related
 
+      if (pkg.submodules)
+        fn.importPath = `${pkg.name}/${fn.name}`
+
       indexes.functions.push(fn)
     }))
   }

packages/metadata/types.ts

@@ -22,6 +22,7 @@ export interface PackageManifest {
 export interface VueUseFunction {
   name: string
   package: string
+  importPath?: string
   lastUpdated?: number
   category?: string
   description?: string

packages/nuxt/index.ts

@@ -3,6 +3,7 @@ import { fileURLToPath } from 'url'
 import { isPackageExists } from 'local-pkg'
 import { defineNuxtModule } from '@nuxt/kit'
 import { metadata } from '@vueuse/metadata'
+import type { Import } from 'unimport'
 
 const _dirname = dirname(fileURLToPath(import.meta.url))
 
@@ -23,6 +24,8 @@ const packages = [
   'firebase',
   'rxjs',
   'sound',
+  'math',
+  'integrations',
 ]
 
 const fullPackages = packages.map(p => `@vueuse/${p}`)
@@ -100,24 +103,25 @@ export default defineNuxtModule<VueUseNuxtOptions>({
           if (!isPackageExists(`@vueuse/${pkg}`))
             continue
 
-          const functions = metadata
+          const imports = metadata
             .functions
-            .filter(i => (i.package === 'core' || i.package === 'shared') && !i.internal)
-
-          if (functions.length) {
-            const imports = metadata
-              .functions
-              .filter(i => i.package === pkg && !i.internal)
-              .flatMap(i => [i.name, ...i.alias || []])
-              .filter(i => i.length >= 4 && !disabledFunctions.includes(i))
-
-            sources.push({
-              from: `@vueuse/${pkg}`,
-              names: imports,
-              imports,
-              priority: -1,
+            .filter(i => i.package === pkg && !i.internal)
+            .flatMap((i): Import[] => {
+              const names = [i.name, ...i.alias || []]
+              return names.map(n => ({
+                from: `@vueuse/${i.importPath || i.package}`,
+                name: n,
+                as: n,
+                priority: -1,
+              }))
             })
-          }
+            .filter(i => i.name.length >= 4 && !disabledFunctions.includes(i.name))
+
+          sources.push({
+            from: '@vueuse/core',
+            imports,
+            priority: -1,
+          })
         }
       })
     }

packages/nuxt/package.json

@@ -41,6 +41,7 @@
     "vue-demi": "*"
   },
   "devDependencies": {
-    "@nuxt/schema": "^3.0.0-rc.4"
+    "@nuxt/schema": "^3.0.0-rc.4",
+    "unimport": "^0.4.5"
   }
 }

playgrounds/nuxt3/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

playgrounds/nuxt3/app.vue

@@ -6,6 +6,8 @@ const mounted = ref(false)
 const { width, height } = useWindowSize()
 const color = useColorMode()
 
+const data = useAxios('/api/data')
+
 onMounted(() => {
   mounted.value = true
 })

playgrounds/nuxt3/nuxt.config.mjs

@@ -11,6 +11,8 @@ export default defineNuxtConfig({
   alias: {
     '@vueuse/core': resolve(__dirname, '../../packages/core/index.ts'),
     '@vueuse/shared': resolve(__dirname, '../../packages/shared/index.ts'),
+    '@vueuse/math': resolve(__dirname, '../../packages/math/index.ts'),
+    '@vueuse/integrations': resolve(__dirname, '../../packages/integrations/index.ts'),
   },
   vueuse: {
     ssrHandlers: true,

playgrounds/nuxt3/package.json

@@ -1,11 +1,15 @@
 {
   "private": true,
+  "packageManager": "pnpm@7.5.0",
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
-    "nuxt": "^3.0.0-rc.4"
+    "@vueuse/core": "../../packages/core",
+    "@vueuse/integrations": "../../packages/integrations",
+    "@vueuse/shared": "../../packages/shared",
+    "nuxt": "^3.0.0-rc.6"
   }
 }