FortAwesome / vue-fontawesome

Font Awesome Vue component
https://fontawesome.com
MIT License
2.38k stars 132 forks source link

Vue-FA 3 with Vue 3 global #422

Open CodelineRed opened 1 year ago

CodelineRed commented 1 year ago

Describe the bug Hello! I'm currently upgrading my Vue Skeleton from Vue 2 to Vue 3 and I could solve every third party challenge, except 1. I'm using Vue 3 in its global variant. See here In line 1: var Vue = .... Now I open your project. See here In line 385: var FontAwesomeIcon = vue.defineComponent({ I had to change every vue. to Vue. and FA works Could you implement something like this? var $vue = typeof Vue === 'object' ? Vue : vue; var FontAwesomeIcon = $vue.defineComponent({

My Packages: "@fortawesome/fontawesome-free": "^6.2.1", "@fortawesome/fontawesome-svg-core": "^6.2.1", "@fortawesome/free-brands-svg-icons": "^6.2.1", "@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/vue-fontawesome": "^3.0.2", "vue": "^3.2.45",

This is my current solution Searching for *.h(), *.watch(), *.computed() and *.defineComponent() and replace it with Vue*.

jasonlundien commented 1 year ago

@CodelineRed ---

I just created vue 2 project and then added Font Awesome Icons.
I then upgraded the project to Vue 3 based upon the Vue Migration docs. I added a global component and started using it, but not getting any errors -- all seems to be working fine for me. Here is my "simple" vue 2 to vue 3 project repo if would like to see what I did.

Saying that, do you have a repo you can share... or can you share your main.js file contents (perhaps I have misunderstood what you have done) ?

CodelineRed commented 9 months ago

Hello @jasonlundien, the repo is already linked in my first post. CodelineRed/vue-skeleton

I'm using Vue with Gulp. The source file for Vue is: node_modules/vue/dist/vue.global.prod.js (in my code / source code)

As I mentioned in my first post: Vue Global is written with big "V" (Vue.*), but your code has a small "v" (vue.*) and this is not compatible.

To solve this I wrote jsRequireSAR().

Have a nice day ✌