Vue 3 support

[Uninen]

Is your feature request related to a problem? Please describe.
Vue 3 is already in late beta and some of the deeper APIs are incompatible with Vue 2. It would be nice to have a Vue 3 compatible fontawesome component.

Describe the solution you'd like
Upgrade the component to use the new render APIs: vuejs/rfcs#28

[redxtech]

I was wanting to use some font awesome icons in a project using vite, which uses vue 3. Since this doesn't yet support vue 3, I have been unable to do so (so far).

Vue 3 support would be greatly appreciated, and will be necessary when vue 3 is fully released.

[callumacrae]

Vue 3 is now at release candidate stage, it would be good to have an update on this issue! From a quick look at the source it seems there is no quick workaround.

[pedzed]

I am getting this error:

TypeError: Cannot read property 'icon' of undefined

Not sure if it is related to Vue 3? I think it is, because it used to work with Vue 2.

I am using vue-fontawesome@0.1.10 and vue@3.0.0-rc.1 with TypeScript.

[Uninen]

vue-fontawesome doesn’t currently support Vue 3, hence this ticket.

[pedzed]

Very frustrating. I am not even sure whether I should downgrade Vue or wait for a fix for vue-fontawesome.

@robmadole is there any ETA?

[redxtech]

@pedzed I've just been manually downloading the svgs and including them by hand, but that's not an acceptable fix now that vue 3 is in it's RC stage. Hopefully we get something soon.

[eduardoturconi]

No answer, no ETA...

[midzdotdev]

Hi all! I've just created a component for Font Awesome which works with Vue 3. All you need to do is add this file as FontAwesomeIcon.vue inside a lib folder or something and import it as you would do with a normal Vue application.

Also, it's fully reactive, using Vue 3's new Composition API.

You still need to add your icons to the library

<template>
  <svg xmlns="http://www.w3.org/2000/svg" :class="$props.class" :viewBox="`0 0 ${width} ${height}`">
    <path fill="currentColor" :d="svgPath"/>
  </svg>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { findIconDefinition } from '@fortawesome/fontawesome-svg-core'

export default defineComponent({
  name: 'FontAwesomeIcon',

  props: {
    icon: {
      type: String,
      required: true
    },
    class: String
  },

  setup (props) {
    const definition = computed(() => findIconDefinition({
      prefix: 'fas',
      iconName: props.icon
    }))

    const width = computed(() => definition.value.icon[0])
    const height = computed(() => definition.value.icon[1])
    const svgPath = computed(() => definition.value.icon[4])

    return { width, height, svgPath }
  }
})
</script>

[midzdotdev]

Just to clarify how I'm using this thing (where @ is the root of the Vue project)

1. Make a file @/lib/FontAwesomeIcon.vue with the code above
2. Make a file @/plugins/font-awesome.ts which configures the library, etc.
3. Add this to your vue app in @/main.ts

// @/plugins/font-awesome.ts
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import FontAwesomeIcon from '@/lib/FontAwesomeIcon.vue'

library.add(fas)

export {
  FontAwesomeIcon
}

// My @/main.ts
import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import { FontAwesomeIcon } from '@/plugins/font-awesome'

createApp(App)
  .use(router)
  .component('fa', FontAwesomeIcon)
  .mount('#app')

In my case, as I've registered the component globally as fa, I'll be able to use <fa :icon="iconName" class="..."></fa> in a Vue component to show the icon.

[robmadole]

I've just release @fortawesome/vue-fontawesome@3.0.0-1 thanks to the work from #246 and @rigma.

All: please give this pre-release a try and let me know what you think.

[rajsinghUSA]

I've just release @fortawesome/vue-fontawesome@3.0.0-1 thanks to the work from #246 and @rigma.

All: please give this pre-release a try and let me know what you think.

The README.md says to install with $ npm i --save @fortawesome/vue-fontawesome@3. However, it doesn't work, as it outputs this error:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for @fortawesome/vue-fontawesome@3.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/raj/.npm/_logs/2020-09-04T02_35_55_060Z-debug.log

However, your instruction here to use the full version name does work: @fortawesome/vue-fontawesome@3.0.0-1

Thought you may want to update the README.md (unless I'm making a silly mistake??)

[mon-compte-github]

@james2mid Awesome ;-) Works great for displaying static icons (no support for sizing, transformations, ...). Thank you very much !

[halilyuce]

yeah @rajsinghUSA right, I got the same error and I fixed with this : npm i --save @fortawesome/vue-fontawesome@3.0.0-1
I'm using Vue 3 with TypeScript, if anyone looking for a how-to integrate font awesome to their project, you can follow these steps :) (I improved @james2mid solution a little bit and I want to I wanted to put it all together)

1-) Firstly run these npm commands in your project's main folder;

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/vue-fontawesome@3.0.0-1

2-) Then create 'FontAwesomeIcon.vue' file with this content below under /libs path (you can create a folder in the main path)

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :class="$props.class"
    :viewBox="`0 0 ${width} ${height}`"
  >
    <path fill="currentColor" :d="svgPath" />
  </svg>
</template>

<script>
import { defineComponent, computed } from "vue";
import { findIconDefinition } from "@fortawesome/fontawesome-svg-core";

export default defineComponent({
  name: "FontAwesomeIcon",

  props: {
    icon: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: "fas",
      required: false
    },
    class: String
  },

  setup(props) {
    const definition = computed(() =>
      findIconDefinition({
        prefix: props.type,
        iconName: props.icon
      })
    );

    const width = computed(() => definition.value.icon[0]);
    const height = computed(() => definition.value.icon[1]);
    const svgPath = computed(() => definition.value.icon[4]);

    return { width, height, svgPath };
  }
});
</script>

3-) Create 'font-awesome.ts' file with this content below under /plugins path (you can create a folder in the main path)

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { faInstagram, faTwitter } from "@fortawesome/free-brands-svg-icons";
import FontAwesomeIcon from "@/libs/FontAwesomeIcon.vue";

library.add(fas, faTwitter, faInstagram);

export { FontAwesomeIcon };

4-) Finally register FontAwesome as a global component in main.ts file;

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { FontAwesomeIcon } from "@/plugins/font-awesome";

createApp(App)
  .use(store)
  .use(router)
  .component("fa", FontAwesomeIcon)
  .mount("#app");

You can use like this:

Brand Logo Icon Example:

<fa icon="twitter" type="fab" class="classname"></fa>

Regular Icon Example:

<fa icon="align-right" class="classname"></fa>

I hope it helps everyone, especially for beginners like me :)