Use Mods (Nuxt Module)

Auto-imported functions, modifiers, and reactive Vue composables for zippy Nuxt developers.

Quick Setup

npx nuxi module add usemods-nuxt

What you get

• Auto-imports for every export from usemods (formatNumber, slugify, detectBreakpoint, …)
• Reactive composables for helpers that need event listeners (SSR-safe defaults until mounted):

| Composable | Wraps | | --- | --- | | useScrollPosition | detectScrollPosition | | useMousePosition | detectMousePosition | | useRelativeMousePosition | detectRelativeMousePosition | | useWindowSize | detectWindowSize | | useActiveBrowser | detectActiveBrowser | | useColorScheme | detectColorScheme | | useBreakpoint | detectBreakpoint | | useContainerBreakpoint | detectContainerBreakpoint | | useNetworkStatus | detectNetworkStatus | | useOrientation | isPortrait / isLandscape |

<script setup>
const breakpoint = useBreakpoint()
const size = useWindowSize()
const { isPortrait, isLandscape } = useOrientation()
</script>

Alias option

Remap auto-imported names via nuxt.config:

export default defineNuxtConfig({
  modules: ['usemods-nuxt'],
  usemods: {
    alias: [
      ['formatNumber', 'fmt'],
    ],
  },
})

AI / coding agents

Docs optimized for agents: usemods.com/llms.txt, AGENTS.md, and the AI discovery checklist.

Manual Setup

1. Add usemods-nuxt dependency to your project

# Using pnpm
pnpm add -D usemods-nuxt

# Using yarn
yarn add --dev usemods-nuxt

# Using npm
npm install --save-dev usemods-nuxt

2. Add usemods-nuxt to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["usemods-nuxt"],
})

That's it! You've got every mod util (and the reactive composables) in your Nuxt app ✨🛵