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#8443323ee6d213d5aee9d33d1254e249c3006415",

EDIT: edited to use the full hash, as per #426 (comment)

[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

[usrbinsam]

It looks like the release failed - https://github.com/auth0/auth0-vue/actions/runs/12114834286, because this workflow file tries to use another workflow file that does not exist (but there is an action with the same name).

auth0-vue/.github/workflows/npm-release.yml

Lines 34 to 35 in 1bc5834

	- id: get_version
	uses: ./get-version

Looks like #344 broke the automated release process.

[bonniegrubbs]

For anyone looking for a workaround in a Nuxt 3 project. This worked for us.

[frgr91]

ugh, this is a real pain in the ass. I've tried contacting contributors of this package to try to resolve this issue but I'm getting nothing in return. Anyone got any ideas on what to do?

[thopiddock]

ugh, this is a real pain in the ass. I've tried contacting contributors of this package to try to resolve this issue but I'm getting nothing in return. Anyone got any ideas on what to do?

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

@frgr91 @andreasgangso Use the full 40 character hash:

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

[andreasgangso]

@poovamraj @desusai7 @tusharpandey13 @eugeniop
What's going on here okta? This npm package hasnt seen an update released to npm in over a year!

[gyaneshgouraw-okta]

Hello everyone,
Apologies for the delayed response! We’ve just released a new version of @auth0/auth0-vue — v2.4.0 — which includes a fix for this issue. You can find more details on the fix in the related #419.
Please update to the latest version and let us know if you encounter any further issues.

Thanks for your patience!