FontAwesome not working with Vue3/TS over undefined props

user_776686 0
Viewed 2386

Vue 3 + TypeScript. Trying to get fontawesome to work.

The following code results in errors in devtools (while the cli is clean) - seems like props are undefined, so I tried various types of binding as well: :icon="['fa', 'redo']" - to no avail.

True that I am also getting a TS2307 over the vue-fontawesome import, even though the package is installed and the index.d.ts with correct member export export const FontAwesomeIcon is there. (v. 2.0.2)

Any clue on what is going wrong?

main.ts

// font-awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; // <-- TS2307 squiggles
import { faRedo } from '@fortawesome/free-solid-svg-icons';

library.add(faRedo);

// bootstrap
createApp(App)
    .use(store)
    .use(router)
    .component('font-awesome-icon', FontAwesomeIcon)
    .mount('#app');

reload.vue (custom component)

<template>
  <span @click="doReload">
    Reload
    <font-awesome-icon icon="redo" />
  </span>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Reload',
  setup(props, context) {
    const doReload = () => {
      context.emit('reload');
    };

    return {
      doReload,
    };
  },
});
</script>

enter image description here

enter image description here

font-awesome vuejs3 vue.js
1 Answers

I'm actually not sure it's the only reason here, but: 2.0.2 version of vue-fontawesome actually has Vue 2 is its peer dependency, and you mentioned Vue 3 is used in your project. Quoting their doc:

Using Vue 2.x

$ npm i --save @fortawesome/vue-fontawesome@latest

Using Vue 3.x

$ npm i --save @fortawesome/vue-fontawesome@prerelease

The latter installs version 3.0.0-3, not 2.0.2.

user_12290230
Related