Tips for implementing FontAwesome in Nuxt3

I'm facing some issues trying to implement FontAwesome in my NuxtJS project, and for some unknown reasons, it's not working as expected.

Let's take a look at my 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"
  }
}

Next, let's examine my 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']
        }
    }
})

Now onto the content of pages/index.vue:

<template>
  <div>
    Hello
  </div>
</template>

Although I haven't used any icons in this example, when I try to run my app using npm run dev, I encounter the following error:

ℹ Vite client warmed up in 440ms                                                                                                                                  12:52:57
ℹ Vite server warmed up in 113ms                                                                                                                                  12:52:57
...
[h3] [unhandled] H3Error: Cannot read properties of undefined (reading 'component')
    at createError ...

This error is quite puzzling to me, especially since I couldn't find any similar cases online. As a newcomer to NuxtJS and Vue, this issue is giving me some trouble.

I've been following the documentation provided by @nuxtjs/fontawesome, and based on that, it seems like everything is set up correctly. Hopefully, this is just a minor oversight on my part.

Edit

In addition to the error, the text "Hello" on my page is being displayed as plain text within a black background, and it's not rendering properly.

{
  "statusCode": 404,
  "statusMessage": "Not Found",
  "stack": []
}
javascriptvue.jsnuxt.jsfont-awesome

Answer №1

Here are the steps to configure this

yarn add @fortawesome/fontawesome-svg-core @fortawesome/vue-fontawesome@latest-3

Create a new file called /plugins/fontawesome.js and add the following code:

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'

// Disable automatic addition of CSS by Nuxt
config.autoAddCss = false

// You can include your icons in this plugin. Refer to other examples for adding styles or individual icons.
library.add(fas)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {})
})

In your nuxt.config.ts file

export default defineNuxtConfig({
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ]
})

Now you can use it in your project like this

<template>
  <div>
    <font-awesome-icon icon="fa-solid fa-user-secret" />
  </div>
</template>

For more information, visit: https://fontawesome.com/docs/web/use-with/vue/use-with#nuxt

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The seamless union of Vuestic with Typescript

Seeking advice on integrating Typescript into a Vuestic project as a newcomer to Vue and Vuestic. How can I achieve this successfully? Successfully set up a new project using Vuestic CLI with the following commands: vuestic testproj npm install & ...

typescriptvue.jsvuesticvuestic-admin

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

javascriptjquerycss

Automatically format text fields to display time in hh:mm format from right to left as you type

Is there a way to automatically format hh:mm as the user types in a text field? The default format is 00:00, and I would like it to fill the minutes part when the first two characters are entered, followed by filling the hour part with the third and four ...

javascriptjquery

Exploring the World of React JS by Diving into Backend Data

Let's consider an application that consists of three pages: "HomePage" "PrivatePage" "UserManagementPage" In addition, there is a file called "BackendCommunication.js" responsible for handling communication with the backend. "Homepage.js" import Re ...

javascriptnode.jsreactjs

Why does the header still show content-type as text/plain even after being set to application/json?

When using fetch() to send JSON data, my code looks like this: var data = { name: this.state.name, password: this.state.password } fetch('http://localhost:3001/register/paitent', { method: 'POST&a ...

javascriptjsonreactjshttpexpress

Execute the strace command using the child_process module in Node.js

Having received no answers and being unsatisfied with the previous approach, I am now attempting a different method to monitor the output of a program that is currently running. Inspired by a thread on Unix Stack Exchange, the goal is simply to retrieve th ...

javascriptnode.jslinuxloggingchild-process

Vue v-for is not displaying any items

This is my initial foray into Vue.Js. I am facing difficulties in displaying my nested object with the v-for directive. Whenever I use {{element.fist_name}} within the v-for, it just shows an empty list. Feel free to check out my code on jsfiddle. https: ...

arraysvue.jsv-for

Using jQuery, extract the input value and verify its accuracy. If correct, display the number of accurately predicted results

I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...

javascriptjqueryhtml

Flask - Refreshing Forms Dynamically

In an effort to enhance the responsiveness of my app, I am looking for a way to prevent the page from reloading every time a POST request is sent. My current setup includes a dynamically generated form with input fields designed like this: <div class=&q ...

javascriptpythonhtmlflask

Activate/Deactivate toggle using Vue.js

new Vue({ el: '#app', data: { terms: false, fullname: false, mobile: false, area: false, city: false, }, computed: { isDisabled: function(){ return !this.terms && !this.fullname && !this.mob ...

javascriptvue.js

Pass multiple variables as input to a function, then query a JSON array to retrieve multiple array values as the output

My JavaScript function contains a JSON array, where it takes an input and searches for the corresponding key/value pair to return the desired value. I am attempting to input a string of variables like this: 1,2,3,4,5 Into this function: function getF(f ...

javascriptjqueryarraysjsonfor-loop

Using jQuery and Perl to create a dynamic progress bar that is based on the current state of a "pipeline file" and utilizes AJAX

I'm looking to create a small pipeline that enables users to select a file and run multiple scripts using it as an input. Some of these scripts may take several minutes to complete (time depends on the file's size), so I want to display a progres ...

javascriptjqueryajaxperlprogress-bar

By default, make the initial element of the list the selected option in an AngularJS select input

I'm running into an issue with setting the first element in my ng-repeat list within a select input. Here is the code snippet causing the problem: <div> <span >OF</span> <select ng-model="eclatementCourante.ordreFabricationId" n ...

javascriptangularjs

Troubleshooting and Fixing AJAX Calls

When working with Asynchronous JavaScript, it is common to encounter issues where we are unsure of the posted request and received response. Is there a simple method for debugging AJAX requests? ...

javascriptajaxdebugging

What is the best way to import a JSON file in VueJs without the need for compilation?

I am facing an issue while developing a VueJs application. I have a JSON file containing an array of objects, and when displaying based on search criteria, it results in generating a very large app.js file, causing the application to boot slowly. Currentl ...

vue.jswebpack

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

javascriptphpcsshtmlbootstrap-4

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

javascriptcssvue.jsinternet-explorer-11

What is the reasoning behind AngularJS 2 HTTP Post only allowing string data as input?

Can someone explain to me why the HTTP Post method in AngularJS 2 (2.0.0-beta.13) only accepts string data as body, unlike in AngularJS 1 where it can accept a JavaScript object? AngularJS-1: $http.post(someUrl,someObject) AngularJS-2: http.post(someUr ...

javascriptangularjsangularhttp-post

Combining strings in a JavaScript object

Can someone help me with concatenating strings within an object in JavaScript? I am parsing through an XML file to create a list of links in HTML. Each time I iterate through the loop, I want to add a new <li> element containing the link. How can I ...

javascriptstring

"Null" is the value assigned to a JavaScript variable

I am encountering an issue on line 30 with the $.each(data.menu, function (). The console is indicating that "data is null". Can someone clarify what's happening? Thank you! function getFoodMenuData () { var url = 'http://localhost:88 ...

javascriptjquery