Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue-FA 3 with Vue 3 global #422

Open
CodelineRed opened this issue Dec 17, 2022 · 2 comments
Open

Vue-FA 3 with Vue 3 global #422

CodelineRed opened this issue Dec 17, 2022 · 2 comments

Comments

@CodelineRed
Copy link

CodelineRed commented Dec 17, 2022

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
Copy link
Member

jasonlundien commented Jul 14, 2023

@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
Copy link
Author

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 ✌

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants