Getting Started with Vue 3: Composition API

[bachi.degli-innocent]

Learn about the new Composition API in Vue 3 and how it compares to the Options API

Brought to you by @holly

Read on

[James.Morrison]

We’re happy to help if you have any questions!

[wnatal]

Hi. I am trying to implement Auth0 with PopUp in Vue3, but the tutorial isn’t really compatible with the most recent (final) releases of Vue3. The problem ist, that in Vue3, I am not allowed to import Vue entirely. And instead of new Vue, I have to call createApp() (imported from Vue separately) and also Vue.prototype is not available anymore and it is replaced by app.config.globalProperties (where app is created by createApp()). The problem is that the call this.$auth.loginWithRedirect() gives me a “is not a function” error in Chrome and if I call console.log(this.$auth.loading) it gives me undefined as an output. I don’t know much about Vue2 and even less about Vue3, so I am really lost, how I am supposed to call something saved in app.config.globalProperties or if const app = createApp(...) works the same as app = new Vue(...). I hope you can help me.

I rewrote the code in the following way:

In main.js

const app = createApp(App);
app.use(Auth0Plugin, {
domain,
clientId,
onRedirectCallback: (appState) => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname,
);
},
});
app.config.productionTip = false;
app.use(router).mount(‘#app’);

in auth/index.js:

export const Auth0Plugin = {
install(app) {
app.config.globalProperties.$auth = useAuth0();
},
};

in the vue component:

methods: {
async login() {
await this.$auth.loginWithPopup();
},
},

[holly]

Hi @wnatal! The problem is that the way plugins are built in Vue 3 has changed, so our current Vue 2 plugin isn’t compatible unfortunately. I haven’t had a chance to dig into the new way of creating plugins yet, but I’m actually spending some time tomorrow to see if I can get the plugin working for Vue 3. I’ll let you know asap once I have a working demo!

[wnatal]

Thank you so much, I am looking forward to hear from you soon

[digbyk]

I was just having this exact problem, so looking forward to the reply too.

[wnatal]

Hi, is there already some progress? I am still struggling to integrate Auth0 in my Vue 3 application.

[konrad.sopala]

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

[kevin.luis]

Hi, @wnatal, mine was fixed when I created a shims-auth0.d.ts file in my src dir. Though I’m using typescript along with Vue3 but it might be similar to your case.

shims-auth0.d.ts
import { VueAuth } from ‘./auth/VueAuth’
declare module ‘vue/types/vue’ {
interface Vue {
$auth: VueAuth
}
}

this exposed the $auth for me.

[konrad.sopala]

Thanks for sharing that with the rest of community!

[JamesJapp]

I’m learning Vue 3 and wanted to try Auth0 … any chance of an update on how to use Auth0 with Vue 3?

[konrad.sopala]

@holly maybe you have more news on that if you guys have in plans releasing content on Vue 3. Thanks!