Skip to content

lucide-vue-next auto-imports for Nuxt 3 for the best DX with Lucide Icons.

Notifications You must be signed in to change notification settings

TortitasT/lucide-nuxt

Repository files navigation

lucide-nuxt

npm version npm downloads License Nuxt

lucide-vue-next auto-imports for Nuxt 3 for the best DX with Lucide Icons.

Features

  • 📝 Copy and paste from the lucide website without worrying about the import.
  • 💌 Easy to setup, just one command!

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add lucide-nuxt

That's it! You can now use lucide-nuxt in your Nuxt app ✨

Usage

Search for an icon on https://lucide.dev/icons and click on copy Vue.

instructions

Paste into your template.

<template>
  <HandHeart />
</template>

Configuration

You can change the prefix via the following code. In the example y use Lucide as the custom prefix.

export default defineNuxtConfig({
  modules: ["lucide-nuxt"],
  lucide: {
    prefix: "Lucide",
  },
});
<template>
  <LucideCamera />
</template>

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