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

frgr91 commented 1 month ago

Checklist

[X] The issue can be reproduced in the auth0-vue sample app (or N/A).
[X] I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
[X] I have looked into the API documentation and have not found a suitable solution or answer.
[X] I have searched the issues and have not found a suitable solution or answer.
[X] I have searched the Auth0 Community forums and have not found a suitable solution or answer.
[X] 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

Create a vue-project with typescript support and install the auth0-vue package.
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).
```vue
<template>
<div>{{$myCustomProperty}}</div>
</template>
<script lang="ts" setup>
</script>
```
1. Change from '@vue/runtime-core' to 'vue' in the auth0-vue package: Navigate to node_module/@auth0/auth0-vue/dist/typings/index.d.ts
2. 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 commented 1 month ago

For documentation: This should be fixed with #419

frgr91 commented 3 weeks ago

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 commented 3 weeks ago

@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 commented 3 weeks ago

@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 :)

auth0 / auth0-vue