cipami/nuxt-lodash

Lodash module for Nuxt

Lodash for Nuxt

💡 About

Lodash auto-import module for Nuxt.

📦 Install

1. Install nuxt-lodash as development dependency:

npm i nuxt-lodash -D

2. Add it to the modules section of your nuxt.config:

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

🚀 Example

Use any Lodash methods in your Nuxt application, they will be auto-imported!

<script setup>
  const text = useToUpper("it works!");
</script>

<template>
  <div>{{ text }}</div>
</template>

🔨 Config

Name	Default	Description
prefix	'use'	String to prepend before each Lodash function (false to disable)
prefixSkip	'is'	Functions that starts with this keywords will be skipped by prefix (false to disable)
upperAfterPrefix	true	If true it will automatically uppercase first letter after prefix (false to disable)
exclude	[]	Array of Lodash functions to exclude from auto-imports
alias	[]	Array of array pairs to rename specific Lodash functions (prefix is still added)

💻 Example - Config

export default defineNuxtConfig({
  modules: ["nuxt-lodash"],
  lodash: {
    prefix: "_",
    prefixSkip: ["string"],
    upperAfterPrefix: false,
    exclude: ["map"],
    alias: [
      ["camelCase", "stringToCamelCase"], // => stringToCamelCase
      ["kebabCase", "stringToKebab"], // => stringToKebab
      ["isDate", "isLodashDate"], // => _isLodashDate
    ],
  },
});

📄 License

MIT License © 2021-2022 - Michal Čípa

nuxt-lodash's Issues

Incompatibility

Seems that this package needs to be updated as mentioned in the latest nuxt RC.9 release:
https://github.com/nuxt/framework/releases/tag/v3.0.0-rc.9

`prefixSkip` option injects 'is' by default

Hi.

I think module should not provide array defaults, because it leads to cases where you cannot disable it completely.
For now for example i cannot alias check-functions (isFinite, isBuffer e.t.c) as _isFinite even if i set prefixSkip: [].

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error: expecting end of expression or separator near ":dis

Nuxt renamed useMeta to useHead and somehow this clashes

Nuxt renamed useMeta to useHead and somehow this clashes.

const useMeta: typeof import('../../node_modules/nuxt3/dist/head/runtime')['useMeta'] // deprecated
...
const useHead: typeof import('lodash-es')['head']

Temp fix

For now i added exclude: ['head'],
which results in

  const useHead: typeof import('../../node_modules/nuxt3/dist/head/runtime')['useHead']
  const useMeta: typeof import('../../node_modules/nuxt3/dist/head/runtime')['useMeta']

Added a comment in the breaking changes section

Can't get types since nuxt 3.7.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-smg1ei?file=composables%2Ftest.ts

useAdd type is any.

Using inside script

Can this be used inside the script tag at all?

something like this.useOrderBy(...)

Named export 'debounce' not found in production

Hello,
I am trying to use the debounce function on a watch method and that's the code used.

watch(() => filterPayout.value, useDebounce(() => fetch(), 500), { deep: true })

The project works fine locally but once i build the project for production this error appears

the project was built using Nuxt 3.0.0 on a CPanel Linux env.

lodash dependency version update required

Since v4.0.0, _isEqual is not consistent over object properties order
lodash/lodash#1758

This library is using "lodash-es": "^4.17.21"
https://github.com/cipami/nuxt-lodash/blob/master/package.json#L42

Fail with Nuxt 3.12

Failed to resolve dependency: aos, present in 'optimizeDeps.include'

Uncaught SyntaxError: The requested module 'http://localhost:6060/_nuxt/node_modules/.pnpm/[email protected]/node_modules/lodash.throttle/index.js?v=cf0afada' doesn't provide an export named: 'default'

RC11

Could you upgrade deps to rc11?

Maybe you would like to team up? ;)

Hey,

Really nice work on the module. I believe we share common ideas in terms of creating nuxt 3 modules. I have recently created an organization where we are building useful Nuxt 3 modules so I thought that maybe you would like to join us and build modules together?

Github https://github.com/nuxt-modules
Discord https://discord.gg/ktA3rKrG
NPM https://www.npmjs.com/org/nuxt-modules

Let me know what you think about it :)

Not available on the server side?

On the server side, whenever I use nuxt-lodash (exmaple useUniq) it says it's not defined (even tho it;s installed and the the IDE picks it up fine).

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update all non-major dependencies (@nuxt/kit, @types/lodash-es, nuxt, pnpm, pnpm/action-setup)
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update devdependency conventional-changelog-conventionalcommits to v8
• chore(deps): update devdependency semantic-release to v24
• chore(deps): update pnpm to v9
• chore(deps): update pnpm/action-setup action to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/release.yml

• actions/checkout v3
• actions/setup-node v3
• pnpm/action-setup v2.4.0

npm

package.json

• @nuxt/kit ^3.8.0
• @types/lodash-es ^4.17.10
• lodash-es ^4.17.21
• @semantic-release/git ^10.0.1
• conventional-changelog-conventionalcommits ^5.0.0
• nuxt ^3.8.0
• semantic-release ^20.1.3
• pnpm 8.9.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Many imports in dev

Version: 2.5.0
Nuxt: 3.6.0
Hi! I found closed issue about many imports in dev mode #47
And it's still present in last version

Module improvements

Hi! This is a nice module idea! It would be nice if you can recreate from new recommended template to leverage the right tooling and kit dependency.

You can read more here: https://v3.nuxtjs.org/docs/advanced/modules

error when using chain syntax in static site (ssr: false)

Hi there,

Just wondering does this plug-in support chain syntax? e.g. useChain(myArray).find({id: 2}).get("val").value()

I am facing a very strange issue, the code running fine when in Dev mode but not in production. Once SPA site generated, it doesn't like chain syntax. The error pops up as below:
TypeError: (intermediate value)(intermediate value)(intermediate value)(...).find is not a function

Nuxt3 example code - example.vue

<template>
  <div>
    <p>{{ useChain(myArray).find({id: 2}).get("val").value() }}</p>
    <p>{{ filtered }}</p>
  </div>
</template>

<script setup lang="ts">
const myArray = ref([{id:1, val:"test1"},{id:2, val:"test2"}]),
      filtered = computed( () => useChain(myArray.value).find({id: 1}).get("val").value() );

</script>

Hopefully, someone can guide me to solve this issue, maybe a config problem??

Cheers

Uppercased prefixed functions

With current options it's impossible to easely prefix all functions like that: _map, _pick etc.
Could we implement this as uppercase option with true as default for example?

question about optimizeDeps.exclude

I want to know why exclude optimizeDeps lodash-es in vite:extend

This cause so many dynamic import in dev, like this:

Just a question, thank you.

EError

Hi,

I have this issue with Nuxt3
"nuxt-lodash": "^2.4.1",
"nuxt": "3.0.0",

When page loaded

lodash: {
		prefix: "_",
		prefixSkip: ["string"],
		upperAfterPrefix: false,
		exclude: ["map"],
		alias: [
		  ["camelCase", "stringToCamelCase"], // => stringToCamelCase
		  ["kebabCase", "stringToKebab"], // => stringToKebab
		  ["isDate", "isLodashDate"], // => _isLodashDate
		],
	  },
	modules: [
		'@nuxtjs/apollo',
		'@nuxtjs/tailwindcss',
		'nuxt-lodash',
		'@nuxtjs/i18n',
		[ ....

Thanks :)

Can't auto import in server dir ?

Typo in module.ts

New to contributing, I think this is the correct way to suggest a change but apologies if not.

In "src/module.ts" there are a few typos, it doesn't affect functionality but could cause a future hiccup.

Current (Line 3):

import exculdeDefaults from './exclude'

Suggested (Line 3):

import excludeDefaults from './exclude'

Current (Line 61):
const exludes = [...options.exclude, ...exculdeDefaults]

Suggested (Line 61):
const excludes = [...options.exclude, ...excludeDefaults]

Current (Line 65):
if (!exludes.includes(name)) {

Suggested (Line 65):
if (!excludes.includes(name)) {