@vueuse/nuxt 7.0.0-alpha.3 → 7.4.0

package/README.md

@@ -2,9 +2,7 @@
 
 [![NPM version](https://img.shields.io/npm/v/@vueuse/nuxt?color=a1b858)](https://www.npmjs.com/package/@vueuse/nuxt)
 
-> This is an add-on of [VueUse](https://github.com/vueuse/vueuse), provides Nuxt specific composables and auto-import capabilities.
-
-> Experimental. **Will NOT follow semvar**.
+> This is an add-on of [VueUse](https://github.com/vueuse/vueuse), which provides better Nuxt integration auto-import capabilities.
 
 ## Install
 
@@ -17,22 +15,11 @@ npm i <b>@vueuse/nuxt</b>
 
 export function defineNuxtConfig({
   buildModules: [
-    '@vueuse/nuxt/module'
+    '@vueuse/nuxt'
   ]
 })
 ```
 
-## Functions
-
-`@vueuse/nuxt` provides the following functions
-
-<!--GENERATED LIST, DO NOT MODIFY MANUALLY-->
-<!--FUNCTIONS_LIST_STARTS-->
-  - [`useNuxtDark`](https://vueuse.org/nuxt/useNuxtDark/) — reactive dark mode with auto data persistence for Nuxt
-
-
-<!--FUNCTIONS_LIST_ENDS-->
-
 ## License
 
 [MIT License](https://github.com/vueuse/vueuse/blob/master/LICENSE) © 2021-PRESENT [Anthony Fu](https://github.com/antfu)

package/index.cjs

@@ -1,46 +1,6 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@vueuse/core');
-var vueDemi = require('vue-demi');
-var _app = require('#app');
-
-function useNuxtDark(options = {}) {
-  const {
-    attribute = "class",
-    valueDark = "dark",
-    valueLight = "light",
-    window = core.defaultWindow,
-    cookieKey = "vueuse-color-schema"
-  } = options;
-  const preferredDark = core.usePreferredDark({ window });
-  const store = _app.useCookie(cookieKey);
-  if (store.value == null)
-    store.value = "auto";
-  const isDark = vueDemi.computed({
-    get() {
-      return store.value === "auto" ? preferredDark.value : store.value === "dark";
-    },
-    set(v) {
-      if (v === preferredDark.value)
-        store.value = "auto";
-      else
-        store.value = v ? "dark" : "light";
-    }
-  });
-  _app.useMeta(vueDemi.computed(() => ({
-    htmlAttrs: {
-      [attribute]: isDark.value ? valueDark : valueLight
-    }
-  })));
-  return isDark;
+// CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
+module.exports = function(...args) {
+  return import('./index.mjs').then(m => m.default.call(this, ...args))
 }
 
-exports.useNuxtDark = useNuxtDark;
-Object.keys(core).forEach(function (k) {
-  if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-    enumerable: true,
-    get: function () { return core[k]; }
-  });
-});
+module.exports.meta = require('./package.json')

package/index.d.ts

@@ -1,48 +1 @@
-import * as vue_demi from 'vue-demi';
-import { ConfigurableWindow } from '@vueuse/core';
-export * from '@vueuse/core';
-
-interface UseNuxtDarkOptions extends ConfigurableWindow {
-    /**
-     * HTML attribute applying the target element
-     *
-     * @default 'class'
-     */
-    attribute?: string;
-    /**
-     * Value applying to the target element when isDark=true
-     *
-     * @default 'dark'
-     */
-    valueDark?: string;
-    /**
-     * Value applying to the target element when isDark=false
-     *
-     * @default 'light'
-     */
-    valueLight?: string;
-    /**
-     * A custom handler for handle the updates.
-     * When specified, the default behavior will be overridded.
-     *
-     * @default undefined
-     */
-    onChanged?: (isDark: boolean) => void;
-    /**
-     * Key to persist the data into Nuxt's useCookie.
-     *
-     * Pass `null` to disable persistence
-     *
-     * @default 'vueuse-color-schema'
-     */
-    cookieKey?: string;
-}
-/**
- * Reactive dark mode with auto data persistence for Nuxt.
- *
- * @see https://vueuse.org/useNuxtDark
- * @param options
- */
-declare function useNuxtDark(options?: UseNuxtDarkOptions): vue_demi.WritableComputedRef<boolean>;
-
-export { UseNuxtDarkOptions, useNuxtDark };
+export default function(): void

package/index.mjs

@@ -1,37 +1,68 @@
-import { usePreferredDark, defaultWindow } from '@vueuse/core';
-export * from '@vueuse/core';
-import { computed } from 'vue-demi';
-import { useCookie, useMeta } from '#app';
+import fs from 'fs';
+import { dirname, resolve } from 'path';
+import { fileURLToPath } from 'url';
+import { isPackageExists } from 'local-pkg';
 
-function useNuxtDark(options = {}) {
-  const {
-    attribute = "class",
-    valueDark = "dark",
-    valueLight = "light",
-    window = defaultWindow,
-    cookieKey = "vueuse-color-schema"
-  } = options;
-  const preferredDark = usePreferredDark({ window });
-  const store = useCookie(cookieKey);
-  if (store.value == null)
-    store.value = "auto";
-  const isDark = computed({
-    get() {
-      return store.value === "auto" ? preferredDark.value : store.value === "dark";
-    },
-    set(v) {
-      if (v === preferredDark.value)
-        store.value = "auto";
-      else
-        store.value = v ? "dark" : "light";
-    }
+const _dirname = typeof __dirname === "undefined" ? dirname(fileURLToPath(import.meta.url)) : __dirname;
+const disabledFunctions = [
+  "useFetch",
+  "toRefs",
+  "useCookie"
+];
+const packages = [
+  "core",
+  "shared",
+  "nuxt",
+  "integrations",
+  "components",
+  "motion",
+  "firebase",
+  "rxjs",
+  "sound",
+  "head"
+];
+const fullPackages = packages.map((p) => `@vueuse/${p}`);
+function VueUseModule() {
+  const { nuxt } = this;
+  nuxt.hook("vite:extend", ({ config }) => {
+    config.optimizeDeps = config.optimizeDeps || {};
+    config.optimizeDeps.exclude = config.optimizeDeps.exclude || [];
+    config.optimizeDeps.exclude.push(...fullPackages);
   });
-  useMeta(computed(() => ({
-    htmlAttrs: {
-      [attribute]: isDark.value ? valueDark : valueLight
+  nuxt.options.build = nuxt.options.build || {};
+  nuxt.options.build.transpile = nuxt.options.build.transpile || [];
+  nuxt.options.build.transpile.push("@vueuse/nuxt", "@vueuse/core", "@vueuse/shared");
+  let indexes;
+  nuxt.hook("autoImports:sources", (sources) => {
+    if (sources.find((i) => fullPackages.includes(i.from)))
+      return;
+    if (!indexes) {
+      try {
+        indexes = JSON.parse(fs.readFileSync(resolve(_dirname, "./indexes.json"), "utf-8"));
+        indexes == null ? void 0 : indexes.functions.forEach((i) => {
+          if (i.package === "shared")
+            i.package = "core";
+        });
+      } catch (e) {
+        throw new Error("[@vueuse/nuxt] Failed to load indexes.json");
+      }
+    }
+    if (!indexes)
+      return;
+    for (const pkg of packages) {
+      if (pkg === "shared")
+        continue;
+      if (!isPackageExists(`@vueuse/${pkg}`))
+        continue;
+      const functions = indexes.functions.filter((i) => (i.package === "core" || i.package === "shared") && !i.internal);
+      if (functions.length) {
+        sources.push({
+          from: `@vueuse/${pkg}`,
+          names: indexes.functions.filter((i) => i.package === pkg && !i.internal).map((i) => i.name).filter((i) => i.length >= 4 && !disabledFunctions.includes(i))
+        });
+      }
     }
-  })));
-  return isDark;
+  });
 }
 
-export { useNuxtDark };
+export { VueUseModule as default };

package/indexes.json

@@ -26,13 +26,16 @@
       "name": "nuxt",
       "display": "Nuxt",
       "description": "VueUse Nuxt Module",
+      "manualImport": true,
       "addon": true,
       "iife": false,
+      "cjs": false,
+      "dts": false,
+      "target": "node14",
       "external": [
         "@vueuse/core",
         "@vueuse/shared",
-        "nuxt3",
-        "#app"
+        "local-pkg"
       ],
       "dir": "packages/nuxt",
       "docs": "https://vueuse.org/nuxt/README.html"
@@ -134,7 +137,6 @@
     "@Electron",
     "@Firebase",
     "@Integrations",
-    "@Nuxt",
     "@Router",
     "@RxJS",
     "Animation",
@@ -627,6 +629,14 @@
       "category": "Browser",
       "description": "reactive [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API)"
     },
+    {
+      "name": "useColorMode",
+      "package": "core",
+      "component": true,
+      "docs": "https://vueuse.org/core/useColorMode/",
+      "category": "Browser",
+      "description": "reactive color mode (dark / light / customs) with auto data persistence"
+    },
     {
       "name": "useConfirmDialog",
       "package": "core",
@@ -641,6 +651,13 @@
       "category": "Browser",
       "description": "manipulate CSS variables"
     },
+    {
+      "name": "useCycleList",
+      "package": "core",
+      "docs": "https://vueuse.org/core/useCycleList/",
+      "category": "Utilities",
+      "description": "cycle through a list of items"
+    },
     {
       "name": "useDark",
       "package": "core",
@@ -719,6 +736,13 @@
       "category": "Sensors",
       "description": "reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element"
     },
+    {
+      "name": "useElementByPoint",
+      "package": "core",
+      "docs": "https://vueuse.org/core/useElementByPoint/",
+      "category": "Sensors",
+      "description": "reactive element by point"
+    },
     {
       "name": "useElementHover",
       "package": "core",
@@ -792,6 +816,13 @@
       "category": "Sensors",
       "description": "reactive utility to track or set the focus state of a DOM element"
     },
+    {
+      "name": "useFocusWithin",
+      "package": "core",
+      "docs": "https://vueuse.org/core/useFocusWithin/",
+      "category": "Sensors",
+      "description": "reactive utility to track if an element or one of its decendants has focus"
+    },
     {
       "name": "useFps",
       "package": "core",
@@ -917,6 +948,13 @@
       "category": "Sensors",
       "description": "watch for changes being made to the DOM tree"
     },
+    {
+      "name": "useNavigatorLanguage",
+      "package": "core",
+      "docs": "https://vueuse.org/core/useNavigatorLanguage/",
+      "category": "Sensors",
+      "description": "watch for changes being made to the navigator language preference by the user"
+    },
     {
       "name": "useNetwork",
       "package": "core",
@@ -1023,6 +1061,14 @@
       "category": "Sensors",
       "description": "reports changes to the dimensions of an Element's content or the border-box"
     },
+    {
+      "name": "useScreenSafeArea",
+      "package": "core",
+      "component": true,
+      "docs": "https://vueuse.org/core/useScreenSafeArea/",
+      "category": "Browser",
+      "description": "reactive `env(safe-area-inset-*)`"
+    },
     {
       "name": "useScriptTag",
       "package": "core",
@@ -1079,6 +1125,13 @@
       "category": "State",
       "description": "reactive [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)/[SessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)"
     },
+    {
+      "name": "useStorageAsync",
+      "package": "core",
+      "docs": "https://vueuse.org/core/useStorageAsync/",
+      "category": "State",
+      "description": "reactive Storage in with async support"
+    },
     {
       "name": "useSwipe",
       "package": "core",
@@ -1093,6 +1146,13 @@
       "category": "Component",
       "description": "shorthand for binding refs to template elements and components inside `v-for`"
     },
+    {
+      "name": "useTextSelection",
+      "package": "core",
+      "docs": "https://vueuse.org/core/useTextSelection/",
+      "category": "Sensors",
+      "description": "reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection)"
+    },
     {
       "name": "useThrottledRefHistory",
       "package": "core",
@@ -1217,13 +1277,6 @@
       "category": "Sensors",
       "description": "reactive window size"
     },
-    {
-      "name": "useNuxtDark",
-      "package": "nuxt",
-      "docs": "https://vueuse.org/nuxt/useNuxtDark/",
-      "category": "@Nuxt",
-      "description": "reactive dark mode with auto data persistence for Nuxt"
-    },
     {
       "name": "useRouteHash",
       "package": "router",
@@ -1316,6 +1369,13 @@
       "category": "@RxJS",
       "description": "use an Observable"
     },
+    {
+      "name": "useSubject",
+      "package": "rxjs",
+      "docs": "https://vueuse.org/rxjs/useSubject/",
+      "category": "@RxJS",
+      "description": "bind Subject to ref and propagate value changes both ways"
+    },
     {
       "name": "useSubscription",
       "package": "rxjs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/nuxt",
-  "version": "7.0.0-alpha.3",
+  "version": "7.4.0",
   "description": "VueUse Nuxt Module",
   "keywords": [
     "vue",
@@ -23,12 +23,7 @@
       "require": "./index.cjs",
       "types": "./index.d.ts"
     },
-    "./*": "./*",
-    "./module": {
-      "import": "./module.mjs",
-      "require": "./module.cjs",
-      "types": "./module.d.ts"
-    }
+    "./*": "./*"
   },
   "main": "./index.cjs",
   "types": "./index.d.ts",
@@ -39,10 +34,8 @@
   },
   "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/nuxt#readme",
   "dependencies": {
-    "@vueuse/core": "7.1.1",
+    "@vueuse/core": "7.4.0",
+    "local-pkg": "^0.4.0",
     "vue-demi": "*"
-  },
-  "devDependencies": {
-    "nuxt3": "latest"
   }
 }

package/module.cjs

@@ -1,6 +0,0 @@
-// CommonJS proxy to bypass jiti transforms from nuxt 2 and using native ESM
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-
-module.exports.meta = require('./package.json')

package/module.d.ts

@@ -1 +0,0 @@
-export default function(): void

package/module.mjs

@@ -1,73 +0,0 @@
-import fs from 'fs'
-import { dirname, resolve } from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-
-const disabled = [
-  'useFetch',
-  'toRefs',
-  'useCookie',
-]
-
-/**
- * Auto import for VueUse in Nuxt
- * Usage:
- *
- * ```ts
- * // nuxt.config.js
- * export deafult {
- *   buildModules: [
- *     '@vueuse/nuxt'
- *   ]
- * }
- * ```
- */
-export default function() {
-  const { nuxt } = this
-
-  // opt-out Vite deps optimization for VueUse
-  nuxt.hook('vite:extend', ({ config }) => {
-    config.optimizeDeps = config.optimizeDeps || {}
-    config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
-    config.optimizeDeps.exclude.push(
-      '@vueuse/core',
-      '@vueuse/shared',
-      '@vueuse/nuxt',
-      '@vueuse/integrations',
-      '@vueuse/components',
-      '@vueuse/motion',
-      '@vueuse/firebase',
-      '@vueuse/rxjs',
-      '@vueuse/sound',
-      '@vueuse/head',
-    )
-  })
-
-  // add @vueuse/nuxt to transpile target for alias resolution
-  nuxt.options.build = nuxt.options.build || {}
-  nuxt.options.build.transpile = nuxt.options.build.transpile || []
-  nuxt.options.build.transpile.push('@vueuse/nuxt')
-
-  // auto Import
-  nuxt.hook('autoImports:sources', (sources) => {
-    if (sources.find(i => i.from === '@vueuse/core' || i.from === '@vueuse/nuxt'))
-      return
-    const indexes = JSON.parse(fs.readFileSync(resolve(__dirname, './indexes.json'), 'utf-8'))
-    sources.push({
-      from: '@vueuse/core',
-      names: indexes
-        .functions
-        .filter(i => (i.package === 'core' || i.package === 'shared') && !i.internal)
-        .map(i => i.name)
-        .filter(i => i.length >= 4 && !disabled.includes(i)),
-    })
-    sources.push({
-      from: '@vueuse/nuxt',
-      names: indexes
-        .functions
-        .filter(i => i.package === 'nuxt' && !i.internal)
-        .map(i => i.name),
-    })
-  })
-}