安装依赖
1
2
| npm i -D unplugin-vue-components
npm i lucide-vue-next
|
配置 nuxt.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import Components from 'unplugin-vue-components/vite'
export default defineNuxtConfig({
vite: {
plugins: [
Components({
resolvers: [
(name) => {
if (name.startsWith('Icon')) {
return {
name: name.slice(4),
from: 'lucide-vue-next'
}
}
}
]
})
]
}
})
|
使用
1
2
3
4
5
6
| <template>
<div>
<IconAlertCircle />
<IconActivity />
</div>
</template>
|
无需 import，Nuxt 自动处理。
Nuxt 特有坑
❌ 1. SSR hydration mismatch
如果你写：
1
| <IconHome v-if="process.client" />
|
会导致 SSR 和客户端渲染不一致，报 hydration mismatch 错误。
✅ 解决方法：使用 ClientOnly。
1
2
3
| <ClientOnly>
<IconHome />
</ClientOnly>
|
❌ 2. 类型提示缺失（TS）
1
2
3
| Components({
dts: true
})
|
会生成 components.d.ts，但默认不包含自动导入的组件。
❌ 3. 图标名大小写
1
2
| <Iconhome /> ❌
<IconHome /> ✅
|
💡 更“Nuxt 风格”的替代方案
如果你想更 Nuxt 原生一点，可以封装一层：
1
2
3
4
5
6
7
8
| <!-- components/Icon.vue -->
<script setup lang="ts">
defineProps<{ name: string }>()
</script>
<template>
<component :is="name" />
</template>
|
然后：
1
2
3
4
| <template>
<Icon name="IconHome" />
<Icon name="IconAlertCircle" />
</template>
|
👉 但这个方式：
