⬅️ Back to Table of Contents

📄 module

📊 Analysis Summary

Metric	Count
🔧 Functions	1
📦 Imports	9
📊 Variables & Constants	2
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Default Export
• Imports
• Variables & Constants
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/nuxt/module.ts

📤 Default Export

export default defineNuxtModule<ModuleOptions>({ ... })

Property	Value
meta.name	'vueuse'
meta.configKey	'vueuse'
defaults.ssrHandlers	false
defaults.autoImports	true

Entry point: setup — documented under Functions.

---

📦 Imports

Name	Source
Import	unimport
Preset	unimport
dirname	node:path
resolve	node:path
fileURLToPath	node:url
defineNuxtModule	@nuxt/kit
hasNuxtModule	@nuxt/kit
metadata	@vueuse/metadata
isPackageExists	local-pkg

---

Variables & Constants

Name	Type	Kind	Value	Exported
disabledFunctions	Set<string>	const	new Set([ // Vue 3 built-in 'toRefs', 'toRef', 'toValue', // Nuxt built-in 'u...	✗
packages	string[]	const	[ 'core', 'shared', 'components', 'motion', 'firebase', 'rxjs', 'sound', 'mat...	✗

---

Functions

setup(options: any, nuxt: any): void

Parameters:

• options any
• nuxt any

Returns: void

Calls:

• nuxt.hook
• config.optimizeDeps.exclude.includes
• config.optimizeDeps.exclude.push
• nuxt.options.build.transpile.push
• resolve (from node:path)
• nuxt.options.plugins.push
• iframeTabs.push
• sources.some
• fullPackages.includes
• metadata.functions.forEach
• hasNuxtModule (from @nuxt/kit)
• disabledFunctions.add
• isPackageExists (from local-pkg)
• nuxt.options._layers.map
• metadata .functions .filter(i => i.package === pkg && !i.internal && i.name.length >= 4 && !disabledFunctions.has(i.name), ) .flatMap
• names.map
• sources.push

Internal Comments:

// opt-out Vite deps optimization for VueUse (x4)
// add packages to transpile target for alias resolution (x5)
// @ts-expect-error - private API (x4)
// auto import (x4)
// disable useColorMode in favor of nuxt color mode

Code

setup(options, nuxt) {
    // opt-out Vite deps optimization for VueUse
    nuxt.hook('vite:extend', ({ config }: any) => {
      config.optimizeDeps = config.optimizeDeps || {}
      config.optimizeDeps.exclude = config.optimizeDeps.exclude || []
      for (const pkg of fullPackages) {
        if (!config.optimizeDeps.exclude.includes(pkg))
          config.optimizeDeps.exclude.push(pkg)
      }
    })

    // add packages 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(...fullPackages)

    if (options.ssrHandlers) {
      const pluginPath = resolve(_dirname, './ssr-plugin.mjs')
      nuxt.options.plugins = nuxt.options.plugins || []
      nuxt.options.plugins.push(pluginPath)
      nuxt.options.build.transpile.push(pluginPath)
    }

    // @ts-expect-error - private API
    nuxt.hook('devtools:customTabs', (iframeTabs) => {
      iframeTabs.push({
        name: 'vueuse',
        title: 'VueUse',
        icon: 'i-logos-vueuse',
        view: {
          type: 'iframe',
          src: 'https://vueuse.org/functions.html',
        },
      })
    })

    if (options.autoImports) {
      // auto import
      nuxt.hook('imports:sources', (sources: (Import | Preset)[]) => {
        if (sources.some(i => fullPackages.includes((i as Import).from)))
          return

        metadata.functions.forEach((i) => {
          if (i.package === 'shared')
            i.package = 'core'
        })

        // disable useColorMode in favor of nuxt color mode
        if (hasNuxtModule('@nuxtjs/color-mode')) {
          disabledFunctions.add('useColorMode')
        }

        for (const pkg of packages) {
          if (pkg === 'shared')
            continue

          if (pkg !== 'core' && !isPackageExists(
            `@vueuse/${pkg}`,
            { paths: nuxt.options._layers.map(layer => layer.config.rootDir) },
          )) {
            continue
          }

          const imports = metadata
            .functions
            .filter(i => i.package === pkg
              && !i.internal
              && i.name.length >= 4
              && !disabledFunctions.has(i.name),
            )
            .flatMap((i): Import[] => {
              const names = [i.name, ...i.alias || [], ...i.variants || [], ...i.utils || []]
              return names.map(n => ({
                from: `@vueuse/${i.importPath || i.package}`,
                name: n,
                as: n,
                priority: -1,
                meta: {
                  description: i.description,
                  docsUrl: i.docs,
                  category: i.category,
                },
              }))
            })

          sources.push({
            from: '@vueuse/core',
            imports,
            priority: -1,
          })
        }
      })
    }
  }

---

Interfaces

VueUseNuxtOptions

Interface Code

export interface VueUseNuxtOptions {
  /**
   * @default true
   */
  autoImports?: boolean

  /**
   * @experimental
   * @default false
   */
  ssrHandlers?: boolean
}

Properties

Name	Type	Optional	Description
autoImports	boolean	✓	not shown
ssrHandlers	boolean	✓	not shown

---

Type Aliases

ModuleOptions

type ModuleOptions = VueUseNuxtOptions;

---

Generated by Syntax Scribe