@bubblesortt/nuxt-es-toolkit
@bubblesortt/nuxt-es-toolkit
Es-toolkit auto import module for Nuxt
Nuxt-es-toolkit
🪄 About
A lightweight Nuxt 3 & 4 module that auto-imports functions from es-toolkit as Nuxt composables with full TypeScript support.
✨ Features
- Auto-import
es-toolkitfunctions - Support custom prefix or no prefix at all
- Skip prefix automatically for predicate-like names (
isX) viaprefixSkip - Alias any function with type-safe completions
- Exclude unwanted functions
- Generated
.d.tsfor IDE autocomplete - Tree-shaking friendly (import only what you use)
- Zero runtime overhead (handled at build phase)
- Nuxt 3 & 4 compatible
- Clean and minimal configuration surface
📦 Install
Using nuxt cli
npx nuxt module add @bubblesortt/nuxt-es-toolkit
or manual
- Install
@bubblesortt/nuxt-es-toolkitas development dependency:
Using npm:
npm i -D @bubblesortt/nuxt-es-toolkit
Using pnpm:
pnpm add -D @bubblesortt/nuxt-es-toolkit
Using bun:
bun add -d @bubblesortt/nuxt-es-toolkit
- Add it to the
modulessection of yournuxt.config:
export default defineNuxtConfig({
modules: ["@bubblesortt/nuxt-es-toolkit"],
});
- Config it if you need:
export default defineNuxtConfig({
modules: ["@bubblesortt/nuxt-es-toolkit"],
esToolkit: {
// your options here
}
});
or
export default defineNuxtConfig({
modules: [
["@bubblesortt/nuxt-es-toolkit",
{
// your options here
},
],
],
});
🧪 Example
When you use Es-toolkit utilities in your Nuxt application, they will be auto-imported
<script setup lang="ts">
const text = useUpperFirst("hello");
</script>
<template>
<div>{{ text }}</div>
</template>
⚙️ Config
| Name | Default | Description |
|---|---|---|
prefix | 'use' | String to prepend before each es-toolkit function (empty string to disable) |
exclude | [] | Array of es-toolkit functions to exclude from auto imports |
alias | [] | Array of array pairs to rename specific es-toolkit functions (prefix is still added) |
prefixSkip | ['is'] | Functions that starts with this keywords will be skipped by prefix (false to disable) |
💡 Config example
export default defineNuxtConfig({
modules: ["@bubblesortt/nuxt-es-toolkit"],
esToolkit: {
prefix: "use",
prefixSkip: ["is"],
exclude: ["map", "find"],
alias: [
["sum", "total"], // => useTotal
["max", "maximum"], // => useMaximum
["isDate", "isExactlyDate"], // => isExactlyDate
],
},
});
🧠 TypeScript & DX
- Auto-generated
.d.tslets your IDE know about added composables instantly (after firstnuxt devrun). - Works with both server & client usage transparently.
- Safe to use in strict TS setups.
🚀 Performance
- Zero additional runtime code: everything is resolved at compile time.
- Tree-shaking remains effective (only referenced functions are bundled) as long as
es-toolkitprovides proper ESM exports without side effects. - No dynamic imports or proxies.
🔗 Related
🤝 Contribution
Local development
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release