I can't use the lucide icon in vue 3?
I'm using the Nuxt UI only for my vue project.
But following the installation guide, I can't get the icons to render:
import * as z from 'zod'
import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
import { authClient } from '/src/services/auth'
...
const providers = [{
label: 'Google',
icon: 'i-simple-icons-google',
onClick: () => {
toast.add({ title: 'Google', description: 'Login with Google' })
}
}, {
label: 'GitHub',
icon: 'i-simple-icons-github',
onClick: () => {
toast.add({ title: 'GitHub', description: 'Login with GitHub' })
}
}]
main.ts:
import './assets/main.css'
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
import Login from "./components/auth/Login.vue";
import Signup from "./components/auth/Signup.vue";
vite config:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui(),
],
})
2 Replies
Hi @Nausicaä. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources, I can see that you're encountering an issue with dynamic icon usage in Nuxt UI. The problem is related to how Tailwind CSS processes icon classes.
According to the Stack Overflow post about Nuxt v-bind not working with NuxtUI icons, Nuxt UI uses egoist/tailwindcss-icons which is based on the Tailwind engine. This engine only bundles static icons that are explicitly declared in your code. Dynamic icon names won't work because Tailwind needs to see the complete class names at build time to include them in the final CSS bundle.
Solution
You need to hardcode the icon class names statically in your code. Instead of using dynamic strings, declare them directly where they're used. Here's how you can adjust your approach:
Important Note: I should mention that the knowledge sources primarily discuss Nuxt 3 framework usage, not standalone Vue 3 projects. The
@nuxt/ui package is designed specifically for Nuxt applications. If you're using it in a plain Vue 3 project (as your setup suggests with main.ts and Vite config), you may encounter compatibility issues that aren't covered in the available documentation.
The knowledge sources don't contain specific information about using @nuxt/ui outside of a Nuxt context, so there may be additional configuration or limitations when using it in a standalone Vue 3 project.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@1333234770225664012> Kapa.ai is still learning and improving, please let me know how I did by reacting below.