Vue 3 support #230

Uninen · 2020-05-24T22:56:52Z

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 · 2020-07-18T00:38:41Z

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 · 2020-07-18T16:00:38Z

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 · 2020-07-27T22:59:55Z

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 · 2020-07-27T23:04:00Z

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

pedzed · 2020-07-27T23:06:43Z

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 · 2020-07-31T19:17:44Z

@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 · 2020-08-17T19:43:35Z

No answer, no ETA...

midzdotdev · 2020-09-01T10:41:29Z

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 · 2020-09-01T10:49:32Z

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

Make a file @/lib/FontAwesomeIcon.vue with the code above
Make a file @/plugins/font-awesome.ts which configures the library, etc.
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 · 2020-09-01T19:00:38Z

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 · 2020-09-05T02:07:23Z

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 · 2020-09-08T07:54:19Z

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

halilyuce · 2020-09-22T13:25:00Z

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 :)

Livijn · 2020-09-26T14:58:24Z

The posted solution doesn't seem to work for duotone icons: Error: <path> attribute d: Expected path command, "…56.55 64 486 64z,M615.55 59.81c-…".

dipasqualew · 2020-10-06T17:03:02Z

The current package breaks Vue HMR

Rakedd · 2020-10-26T20:12:46Z

Fixed thanks to @halilyuce with the first command, the repository indicate to enter this command to load Vue-3 fontawesome
npm i --save @fortawesome/vue-fontawesome@3
However the right version command is the following :
npm i --save @fortawesome/vue-fontawesome@3.0.0-1

We are able to use fontawesome icons in vue3 using a custom component published as an early-release at FortAwesome/vue-fontawesome#230

jvcmarcenes · 2020-12-22T01:14:11Z

@halilyuce solution didn't work for me. I'm getting a TypeError: cannot read propery 'icon' of undefined at the FontAwesomeIcon.vue component.
it refers to the line const width = computed(() => definition.value.icon[0])

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

finIconDefinition is returning undefined, and when I looked at the definition in the @fortawesome/fontawesome-svg-core/index.d.ts it isn't defined, only it's type.

Eliaquim · 2020-12-31T17:10:25Z

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

My mistake was having the 'fa', FontAwesomeIcon in the use() instead of in the .component().

JStephens83 · 2021-01-07T16:44:54Z

I followed all the steps but I'm getting an error message : Cannot find module:"@/libs/FontAwesomeIcon.vue" or its corresponding type declaration.
When I try to run my project I get the message : This dependency was not found: * @/plugins/font-awesome in ./src/main.js
I'm then invited to run npm install --save @/plugins/font-awesome but getting a second error message telling me the token "@" is not recognized.
I'm new to Vue (3), using Vue CLI, so I'm sure I'm doing something wrong or forgot something but can't figure out what...

Thanks for the help!

JoshuaHull · 2021-01-11T05:57:08Z

@jvcmarcenes In case you haven't solved your problem yet: I had the same issue. font-awesome.ts imports FontAwesomeIcon.vue from "@/libs/FontAwesomeIcon.vue" and main.ts imports FontAwesomeIcon from "@/plugins/font-awesome" - but my project didn't have @libs or @plugins setup. Once I changed the imports to their relative file paths, it all worked smoothly.

@JStephens83 you may be having a variant of the same issue,

jvcmarcenes · 2021-01-12T16:39:35Z

@JoshuaHull My imports were correct. My error was that in the FontAwesomeIcon.vue, the default for the 'type' props was set to 'fab', and I hand't installed the solid icons, only the regulars, so I changed the default to 'far' and now it works

JStephens83 · 2021-01-17T10:16:25Z

@JoshuaHull Unfortunately the issue does not come from here but really from the "@" which is not recognized, Still looking for what I did wrong.
Wether I created the "libs" and "plugins" at the wrong place or forgot to install a specific dependency, I don't know yet.

JStephens83 · 2021-01-17T16:25:05Z

@JoshuaHull when you say "my project didn't have @libs or @plugins setup." what do you mean exactly ?
I tried using aliases in a vue.config.js file and I also tried using relative paths, but I still get the issue.

JStephens83 · 2021-01-17T21:37:16Z

I've done so many tinkering (adding a tsconfig.json and a vue.config.js files and many other things) that I don't really know what fixed it but in the end it's now working.
HOWEVER my "font-awesome.ts" file still has an inline error on the following import:
import FontAwesomeIcon from "../libs/FontAwesomeIcon.vue";
The error message is :
Cannot find module '../libs/FontAwesomeIcon.vue' or its corresponding type declarations.
Which is weird....

khari998 · 2021-01-21T00:08:15Z

I've done so many tinkering (adding a tsconfig.json and a vue.config.js files and many other things) that I don't really know what fixed it but in the end it's now working.
HOWEVER my "font-awesome.ts" file still has an inline error on the following import:
import FontAwesomeIcon from "../libs/FontAwesomeIcon.vue";
The error message is :
Cannot find module '../libs/FontAwesomeIcon.vue' or its corresponding type declarations.
Which is weird....

And you made the libs folder with the FontAwesomeIcone.vue code?

JStephens83 · 2021-01-21T00:24:42Z

I've done so many tinkering (adding a tsconfig.json and a vue.config.js files and many other things) that I don't really know what fixed it but in the end it's now working.
HOWEVER my "font-awesome.ts" file still has an inline error on the following import:
import FontAwesomeIcon from "../libs/FontAwesomeIcon.vue";
The error message is :
Cannot find module '../libs/FontAwesomeIcon.vue' or its corresponding type declarations.
Which is weird....

And you made the libs folder with the FontAwesomeIcone.vue code?

Yes I manually created the folder and added FontAwesomeIcon.vue in it

khari998 · 2021-01-21T00:36:22Z

@JStephens83 This is what I have and it's working for me. I changed my folder name from libs to lib but that shouldn't matter. I had to restart my server once they were created.

font-awesome.ts

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas, faTimes } from "@fortawesome/free-solid-svg-icons";
import { far, faWindowClose } from "@fortawesome/free-regular-svg-icons";
import FontAwesomeIcon from "../lib/FontAwesomeIcon.vue";
import {
  faFacebookF,
  faLinkedinIn,
  faTwitter,
  faInstagram
} from "@fortawesome/free-brands-svg-icons";

library.add(
  fas,
  far,
  faWindowClose,
  faFacebookF,
  faLinkedinIn,
  faTwitter,
  faInstagram,
  faTimes,
  faWindowClose
);

export { FontAwesomeIcon };

FontAwesome.vue

<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>

project structure :

src/
-- plugins/
---- font-awesome.ts
-- lib/
---- FontAwesomeIcon.vue

MrBrax · 2021-01-21T00:57:13Z

in the newest prerelease install there seems to be a vue component included already, works great

JStephens83 · 2021-01-21T16:39:20Z

@kamaslau Yes I have the exact same organization and content.
It's working fine, my only issue now is that VSCode shows an inline error on import FontAwesomeIcon from "../lib/FontAwesomeIcon.vue"; and I don't know why.
Thanks for sharing!

MrBrax · 2021-01-22T15:22:44Z

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-brands-svg-icons
yarn add @fortawesome/free-regular-svg-icons

import { faGithub } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faPlay } from '@fortawesome/free-solid-svg-icons'
library.add(faGithub, faPlay);

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

<fa icon="github"></fa>

JStephens83 · 2021-01-22T22:21:51Z

@MrBrax
Thanks, it seems that :
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
in font-awesome.ts, fixed my inline error issue and everything now works cleanly!

Luigidefra · 2021-02-17T15:18:50Z

in the newest prerelease install there seems to be a vue component included already, works great

How can i set icon's prefix on this vue component?
And how can i use fa-layers?

Ding-Fan · 2021-02-23T13:48:22Z

@MrBrax and the library

import { library } from "@fortawesome/fontawesome-svg-core";

and explicit styles https://github.com/FortAwesome/vue-fontawesome#using-solid-icons

sistematico · 2021-02-24T23:53:36Z

<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>

Awesome!! Thank you.

tylerclark · 2021-02-25T04:45:10Z

Anybody know how to get this working with the pro version?

christhofer · 2021-02-25T06:05:08Z

@tylerclark have you tried https://github.com/FortAwesome/vue-fontawesome#installation?

tylerclark · 2021-02-25T06:10:34Z

@tylerclark have you tried https://github.com/FortAwesome/vue-fontawesome#installation?

Yes. Doesn't work for me.

SalathielGenese · 2021-08-16T04:38:41Z

I had the same issue with:

package.json

    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/vue-fontawesome": "^2.0.2",

Relying on a previous project where it worked, I upgraded @fortawesome/vue-fontawesome to ^3.0.0-4, which fixed the issue for me.

eMeRiKa13 · 2021-10-05T20:31:56Z

Hi,

Did someone make it works with the version 6 in beta?

package.json

"@fortawesome/fontawesome-svg-core": "^1.3.0-beta2",
"@fortawesome/pro-solid-svg-icons": "^6.0.0-beta2",

I have an error with npm i --save @fortawesome/vue-fontawesome@latest like mentioned in the v6 docs or npm i --save @fortawesome/vue-fontawesome@prerelease indicated here in github

Could not resolve dependency:
npm ERR! peer @fortawesome/fontawesome-svg-core@">= 1.2.0 < 1.3" from @fortawesome/vue-fontawesome@2.0.2

jasonlundien · 2022-11-03T19:54:50Z

Hey there everyone. I am going through and cleaning up our Vue issues and found this.

We officially support Vue 2 and Vue 3 now. If you need more info on how to install or use you can checkout out our docs here.

rigma mentioned this issue Aug 20, 2020

Vue 3 support #246

Closed

christhofer mentioned this issue Sep 24, 2020

Vue 3 install command #257

Closed

JStruk added a commit to JStruk/portfolio that referenced this issue Nov 2, 2020

bring in vue3-compatible fontawesome component

a3fdb02

We are able to use fontawesome icons in vue3 using a custom component published as an early-release at FortAwesome/vue-fontawesome#230

r-toki mentioned this issue Dec 27, 2020

composition-api を用いて todo-app を作ってみる r-toki/todo-app-vue3#1

Merged

tobiasdiez mentioned this issue Jul 7, 2021

Upgrade to Vue 3 JabRef/JabRefOnline#7

Closed

14 tasks

jasonlundien closed this as completed Nov 3, 2022

Vue 3 support #230

Vue 3 support #230

Comments

Uninen commented May 24, 2020

redxtech commented Jul 18, 2020

callumacrae commented Jul 18, 2020

pedzed commented Jul 27, 2020

Uninen commented Jul 27, 2020

pedzed commented Jul 27, 2020

redxtech commented Jul 31, 2020

eduardoturconi commented Aug 17, 2020

midzdotdev commented Sep 1, 2020

midzdotdev commented Sep 1, 2020

robmadole commented Sep 1, 2020

rajsinghUSA commented Sep 5, 2020

mon-compte-github commented Sep 8, 2020

halilyuce commented Sep 22, 2020 • edited

Livijn commented Sep 26, 2020

dipasqualew commented Oct 6, 2020

Rakedd commented Oct 26, 2020 • edited

jvcmarcenes commented Dec 22, 2020

Eliaquim commented Dec 31, 2020

JStephens83 commented Jan 7, 2021

JoshuaHull commented Jan 11, 2021

jvcmarcenes commented Jan 12, 2021

JStephens83 commented Jan 17, 2021

JStephens83 commented Jan 17, 2021

JStephens83 commented Jan 17, 2021

khari998 commented Jan 21, 2021

JStephens83 commented Jan 21, 2021

khari998 commented Jan 21, 2021 • edited

MrBrax commented Jan 21, 2021

JStephens83 commented Jan 21, 2021

MrBrax commented Jan 22, 2021

JStephens83 commented Jan 22, 2021

Luigidefra commented Feb 17, 2021 • edited

Ding-Fan commented Feb 23, 2021

sistematico commented Feb 24, 2021

tylerclark commented Feb 25, 2021

christhofer commented Feb 25, 2021

tylerclark commented Feb 25, 2021

SalathielGenese commented Aug 16, 2021

eMeRiKa13 commented Oct 5, 2021 • edited

jasonlundien commented Nov 3, 2022 • edited

halilyuce commented Sep 22, 2020 •

edited

Rakedd commented Oct 26, 2020 •

edited

khari998 commented Jan 21, 2021 •

edited

Luigidefra commented Feb 17, 2021 •

edited

eMeRiKa13 commented Oct 5, 2021 •

edited

jasonlundien commented Nov 3, 2022 •

edited