@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-toolkit
functions - 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.ts
for 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-toolkit
as 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
modules
section 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.ts
lets your IDE know about added composables instantly (after firstnuxt dev
run). - 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-toolkit
provides 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