@selemondev/nuxt-es-tool-kit
v1.0.4
Published
State of the art JavaScript utility library for Nuxt ✨
Downloads
54
Readme
Demo
Play with it on Stackblitz
Quick Setup
- Install the module in your Nuxt application with one command:
npx nuxi@latest module add @selemondev/nuxt-es-tool-kit
That's it! You can now use nuxt-es-tool-kit
in your Nuxt application ✨.
Configuration
The nuxt-es-tool-kit
module allows you to add prefixes, aliases and utilities.
All the modules are supported except the compat
module as it clashes with the other modules. The so called compat
module has APIs that are supported natively by JavaScript.
Below is how you can configure and use them in your Nuxt 3 project:
export default defineNuxtConfig({
modules: ['nuxt-es-tool-kit'],
devtools: { enabled: true },
esToolkit: {
prefix: 'use',
alias: [],
utilities: ['promise', 'math', 'predicate', 'string', 'util', 'object', 'function', 'array'],
},
})
When using the head
utility, you might encounter a warning in your console that states: Duplicated imports "useHead", the one from "@unhead/vue" has been ignored and es-toolkit-array is used
. This warning occurs because nuxt-es-tool-kit
array module exports a utility known as head
and when used together with the use
prefix it clashes with the useHead
utility provided by @unhead/vue
.
To resolve this issue you can do either of the following:
- Configure an alias for the
head
utility as shown below:
esToolkit: {
...
...
alias: [
['head', 'headArr'],
],
},
- Use a different prefix other than
use
.
then in your component:
Example 1 with alias
+ prefix
+ utilities
:
esToolkit: {
prefix: 'use',
utilities: ['array'],
alias: [
['flatten', 'flattenArr'],
['head', 'headArr'],
],
},
<script setup lang="ts">
const array = [1, [2, 3], [4, [5, 6]]]
const result = useFlattenArr(array, 2)
</script>
<template>
<div>
{{ result }}
</div>
</template>
Example 2 with prefix
+ utilities
only:
export default defineNuxtConfig({
modules: ['nuxt-es-tool-kit'],
devtools: { enabled: true },
esToolkit: {
prefix: 'use',
utilities: ['string'],
},
})
then in your component:
<script setup lang="ts">
const result = useKebabCase('some whitespace')
</script>
<template>
<div>
{{ result }}
</div>
</template>
Example 3 with utilities
only:
export default defineNuxtConfig({
modules: ['nuxt-es-tool-kit'],
devtools: { enabled: true },
esToolkit: {
utilities: ['predicate'],
},
})
<script setup lang="ts">
const result = /abc/
</script>
<template>
<div>
{{ isRegExp(result) }}
</div>
</template>
Types
Below are the types of the esToolkit
config:
| Prop | Type | Description | Default |
| ------------------ | ------- | -------------------------------------------------------- | --------- |
| prefix | string | Keyword placed infront of the utilities and helpers. | '' |
| alias | [string, string][] | A unique name assigned to a utility to avoid naming conflicts with other third-party packages and libraries. | [] |
| utilities | Utilities[] | The utilities supported by es-toolkit
| []
Contribution
# 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
Happy hacking ✨.