How do I add FontAwesome to Vue/Express/hypernova-vue app

Question

The app I'm working on is a Rails app using hypernova-vue to allow Vue3 micro frontend apps/components to be used throughout the site. I've built a small, private npm library of components used by the Vue component micro frontends.

Unfortunately, through much debugging and narrowing down, it looks like including FontAwesome icons in the npm component library breaks the main application (Rails with jQuery).

hypernova-vue creates an application like this:

createApplication() {
    const app = express();
    app.use(
      '/components/path/',
      express.static(path.join(process.cwd(), 'dist')),
    );

    return app;
},

The client JS for hypernova-vue is:

import { renderVue } from [private fork of the main project];
import MyComponent from './components/MyComponent.vue';

renderVue('My/Component', MyComponent);

And in the Rails app I add render_vue_component('My/Component') code wherever I want to include Vue components.

FontAwesome wants to be added to an app created with Vue's createApp function and its instructions are:

import { createApp } from 'vue'
import App from './App.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

library.add(faUserSecret)

createApp(App)
.component('font-awesome-icon', FontAwesomeIcon)
.mount('#app')

Since I don't have a specific createApp(App) I don't know if I can, where I would, or how to add the component('font-awesome-icon', FontAwesomeIcon) to my existing components.

Answer 1

you just have to find the CDN link for font-awesome library and include it in the head of the index.html file. you can get the CDN links in cdn.js site

the specific link also for the font-awesome library is: this i hope it will helps.