auth0-vue package is using '@vue/runtime-core' which breaks augmentation of type ComponentCustomProperties in vue apps.

[frgr91]

Checklist

• The issue can be reproduced in the auth0-vue sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

In newer vue versions the global properties augmentation has changed from using '@vue/runtime-core' to 'vue'.

The incorrect global property augmentation:

declare module '@vue/runtime-core'{
  interface ComponentCustomProperties{
     // your global property type
  }
}

The correct global propery augmentation:

declare module 'vue' {
  interface ComponentCustomProperties{
     // your global property type
  }
}

It is described in the vue documentation here: https://vuejs.org/guide/typescript/options-api#augmenting-global-properties

Any package using the augmentation of '@vue/runtime-core' will break and override other packages.

The solution:

Change the module-declaration from '@vue/runtime-core' to 'vue'.

Reproduction

1. Create a vue-project with typescript support and install the auth0-vue package.
2. create a new 'global-types.d.ts' file with the following content:

declare module 'vue' {
  export interface ComponentCustomProperties {
    /**
     * A custom property.
     */
    $myCustomProperty:'Hi there'
  }
}

3. Include the 'global-types.d.ts' file in your ts-config.
4. Try to use the $myCustomProperty property directly in a template-block in any vue files. (the property should not show up and the editor should give you a type-error).

<template>
   <div>{{$myCustomProperty}}</div>
</template>
<script lang="ts" setup>
</script>

6. Change from '@vue/runtime-core' to 'vue' in the auth0-vue package: Navigate to node_module/@auth0/auth0-vue/dist/typings/index.d.ts
7. Go back to the vue-file and see that the property is correctly typed and no type-errors should be shown. Additionally, other properties like $router, $route etc should also work.

Note: you must also add the property to your vue-instance in order for it to work when compiled:
app.config.globalProperties.$myCustomProperty = 'Hi there'.

Additional context

If any other packages is using '@vue/runtime-core' to augment global property typings it will break the global property augmentation resulting in type-errors.

auth0-vue version

2.3.3

Vue version

3.5.11

Which browsers have you tested in?

Chrome

[yannic-wtfoxtrot]

For documentation: This should be fixed with #419

[frgr91]

I see that this was merged into main, but will there be a new version on npm for this package to fix the issues in my repos? I don't quite understand the process of how this package is maintained and by who so sorry in advance if I'm missing something obvious.

[andreasgangso]

@tusharpandey13 can we get an npm release?

@frgr91 you can point to the latest github repo commit in your package.json while you wait.

"@auth0/auth0-vue": "github:auth0/auth0-vue#8443323"

[frgr91]

@tusharpandey13 can we get an npm release?

@frgr91 you can point to the latest github repo commit in your package.json while you wait.

"@auth0/auth0-vue": "github:auth0/auth0-vue#8443323"

Thanks for the reply, I didn't get this to work in my pnpm monorepo/pipeline. It's not a big issue though, but hopefully this will be published on npm soon enough :)

[danielsetreus]

Any news on getting this deployed to NPM as well? I'd rather not use a github commit as dependency

[setaman]

I'll join the thread here. Just created a fresh Vue project and the whole development pipeline is now blocked due to the issue, we need auth0-vue. The npm release is eagerly awaited