Auth0 and Vue3 Quickstart?

Help
1

Please include the following information in your post:

Hey all.
I’m trying to get the SPA Vue quickstart working with Vue3.

I’m having issues with the app throwing a
warning "export ‘default’ (imported as ‘Vue’) was not found in ‘vue’
that stops the app from loading.

I think it’s related to the change is now .use is now tied to the app instance and not the Vue global.

Anyone have a good link to some sample code showing how to get The SPA sdk working with the full Vue3 (not just the composition api).

3 Likes
2

Hey there!

Unfortunately I don’t have much experience with Vue but maybe @holly will be able to help here as she creates most of Vue content for our blog:

or maybe you’ll find something that will help you in her blog articles!

1 Like
3

Thanks I’ll keep looking around.

1 Like
4

I’ve found this Vue3 version of Auth0 plugin from medium article: https://medium.com/@iamkether/provide-inject-async-plugins-with-vue3-e424525af6ae · GitHub

It didn’t work for me but maybe you’ll have more luck.

5

Thanks for sharing that @lstyles!

6

Thanks for the post.
Yea I’m not having any luck with that code sample either.

I may just have to stub out my project and work on integrating auth0 later as I can’t keep spending cycles on this.

7

I know the feeling. I’m blocked by this (having made the same decision as you before) so I’m going to try to figure it out. I’ll let you know if I get something working.

8

@huntsfromshadow @lstyles Yeah I actually just noticed this week that it doesnt work with Vue 3. I still haven’t had a chance to dig into how plugins changed with Vue 3, but I’ll try to spend some time on it next week and update here if I can get it working!

1 Like
9

I’ve got something working. No idea if that’s the right way to do it, but it does appear to meet my requirements.

4 Likes
10

Thanks for sharing that with the rest of community!

11

@lstyles

Thanks! That helped me get this working. Really appreciate it.

12

Thanks for sharing, very much appreciated. Ended up implementing it pretty much the same way few days ago. Still waiting for some a Auth0 recommended implementation though.

13

We’ll let you know once it’s there!

14

Also tried this and worked great. I was able to access the login page → sign in on universal login → redirect to the callback function. But my problem now is that when you create using the createAuth0Client API to populate the “client”, it doesn’t include the methods like “handleRedirectCallback” thereby, doesn’t change the appState parameter.

15

Worked for me too. For anyone who plans to use this be carefulw with the auth_config.json file: the original one from quickstart uses camelCase, while the one used here uses underscores. Thus you should pass client_id not clientId and redirect_uri not redirectUri.

2 Likes
16

Perfect and thanks for sharing it with the rest of community!

17

@holly Any update on when the official quick guide can be updated for it to work with Vue 3?

I had a look at what @lstyles has shared and I’m struggling with a few things, so I’d actually like to complete our test of Auth0 with an official Auth0 quick guide.

2 Likes
18

Hey there @SvenHjerson!

Unfortunately Holly is out of office at the moment but let me reach out to the team and find out more about it!

19

That would be much appreciated … ideally using TypeScript. I tried to migrate the curren Quick Start guide from Vue 2 to Vue 3 with TypeScript but there are a lot of errors I have no idea how to address.

20

Sure! I’ll get back to you as soon as I know something regarding that!