You can integrate Font Awesome + Vue with other tools and frameworks. Here are some common integrations and how they work.
@fortawesome/fontawesome-svg-core and any icon packages you plan to use.
Then install the
Inside your Nuxt project add a
Now you can add the icons using the syntax below wherever you want them to appear in your project.
If you use PurgeCSS(opens new window) with Nuxt 2 - or use the Nuxt tailwindcss module which comes with PurgeCSS prebundled - you need to add fontawesome CSS classes to the whitelist, Otherwise, PurgeCSS will treat them as unused and remove them since the classes only get inserted on rendering.
Web Components with vue-web-component-wrapper
The Vue project provides a wrapper(opens new window) that will register your Vue components as Web Components(opens new window) .
This project and all Font Awesome SVG icons will work just fine in these components but we need to take an additional step to add the CSS correctly.
To take advantage of encapsulation that the Shadow DOM provides and to keep other areas of the DOM clean we need to add the Font Awesome CSS to the root of the Shadow DOM.
Here is an example that leverages the
mounted() lifecycle hook to insert the CSS.