@vueuse/nuxt 7.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# @vueuse/nuxt
+
+[![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.
+
+> Expiremental. **Will NOT follow semvar**.
+
+## Install
+
+<pre class='language-bash'>
+npm i <b>@vueuse/nuxt</b>
+</pre>
+
+```ts
+// nuxt.config
+
+export function defineNuxtConfig({
+  buildModules: [
+    '@vueuse/nuxt/module'
+  ]
+})
+```
+
+## 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

@@ -0,0 +1,46 @@
+'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;
+}
+
+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]; }
+  });
+});

package/index.d.ts

@@ -0,0 +1,48 @@
+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 };

package/index.mjs

@@ -0,0 +1,37 @@
+import { usePreferredDark, defaultWindow } from '@vueuse/core';
+export * from '@vueuse/core';
+import { computed } from 'vue-demi';
+import { useCookie, useMeta } from '#app';
+
+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";
+    }
+  });
+  useMeta(computed(() => ({
+    htmlAttrs: {
+      [attribute]: isDark.value ? valueDark : valueLight
+    }
+  })));
+  return isDark;
+}
+
+export { useNuxtDark };

package/module.cjs

@@ -0,0 +1,6 @@
+// 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

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

package/module.mjs

@@ -0,0 +1,67 @@
+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/core/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',
+    )
+  })
+
+  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),
+    })
+  })
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vueuse/nuxt",
+  "version": "7.0.0-alpha.0",
+  "description": "VueUse Nuxt Module",
+  "keywords": [
+    "vue",
+    "vueuse",
+    "nuxt",
+    "nuxt3",
+    "nuxt-module"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vueuse/vueuse.git",
+    "directory": "packages/nuxt"
+  },
+  "funding": "https://github.com/sponsors/antfu",
+  "author": "Anthony Fu <https://github.com/antfu>",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "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",
+  "module": "./index.mjs",
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/vueuse/vueuse/issues"
+  },
+  "homepage": "https://github.com/vueuse/vueuse/tree/main/packages/nuxt#readme",
+  "dependencies": {
+    "@vueuse/core": "7.1.0",
+    "vue-demi": "*"
+  },
+  "devDependencies": {
+    "nuxt3": "latest"
+  }
+}