如何将FontAwesome与Nuxt3结合使用？
提问于 2022-07-31 03:00:49
我试图将FontAwesome与NuxtJS结合使用，但由于未知的原因，它无法工作。
这是我的package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview"
},
"devDependencies": {
"nuxt": "3.0.0-rc.6",
"sass": "^1.54.0",
"sass-loader": "^13.0.2"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.2",
"@fortawesome/free-regular-svg-icons": "^6.1.2",
"@fortawesome/free-brands-svg-icons": "^6.1.2",
"@fortawesome/free-solid-svg-icons": "^6.1.2",
"@fortawesome/vue-fontawesome": "^3.0.1",
"@nuxtjs/fontawesome": "^1.1.2"
}
}这是我的nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
buildModules: ['@nuxtjs/fontawesome'],
fontawesome: {
icons: {
solid: ['faHome']
}
}
})现在pages/index.vue
<template>
<div>
Hello
</div>
</template>如您所见，在本例中我甚至没有使用任何图标，但是我的应用程序无法启动，原因是终端(运行npm run dev时)出现了以下错误。
ℹ Vite client warmed up in 440ms 12:52:57
ℹ Vite server warmed up in 113ms 12:52:57
✔ Vite server built in 812ms 12:52:58
✔ Nitro built in 178 ms
[h3] [unhandled] H3Error: Cannot read properties of undefined (reading 'component')
at createError (file:///Users/thomasgysemans/Documents/GitHub/vue-portfolio/node_modules/h3/dist/index.mjs:191:15)
at Server.nodeHandler (file:///Users/thomasgysemans/Documents/GitHub/vue-portfolio/node_modules/h3/dist/index.mjs:381:21) {
statusCode: 500,
fatal: false,
unhandled: true,
statusMessage: 'Internal Server Error'
}我不明白这个错误，似乎只有我一个人有这个错误。而且，我是NuxtJS和Vue的新手。
我在跟踪@nuxtjs/fontawesome的文档，如果我理解得很好，我没有做错什么.好吧，我希望我犯了一个简单的错误，这个错误将被解决。我非常想使用FontAwesome，它应该可以工作，因为FontAwesome本身提供了一个关于如何使用Vue图标的文档(但与NuxtJS无关)。
编辑
另外，该应用程序以纯文本的形式显示在黑色背景下，但它没有显示我美丽的“你好”。
{
"statusCode": 404,
"statusMessage": "Not Found",
"stack": []
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-08-02 04:44:08
下面是如何设置这个
yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest-3
在一个新的/plugins/fontawesome.js文件中，放置以下内容
import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false
// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas)
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})nuxt.config.ts内部
export default defineNuxtConfig({
css: [
'@fortawesome/fontawesome-svg-core/styles.css'
]
})你现在应该可以像这样使用它了
<template>
<div>
<font-awesome-icon icon="fa-solid fa-user-secret" />
</div>
</template>更多信息可在这里获得：https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73182702
复制相关文章
无法将类型“System.Collections.Generic.IEnumerable<EmailSystem.Model.TemplateInfo>”隐式转换为“System.Collection
MVC 无法将类型“System.Collections.Generic.List<AnonymousType#1>”隐式转换为“System.Collections.Generic.IList<Mv
腾讯云开发者
