Improve Vue composition hooks api #496

Open
opened 2026-03-13 07:49:54 -05:00 by GiteaMirror · 9 comments
Owner

Originally created by @reslear on GitHub (Dec 30, 2024).

Originally assigned to: @himself65 on GitHub.

Is this suited for github?

  • Yes, this is suited for github

Compositional problem useSession return Ref, but better if return { data: Ref<>, error: Ref<>, ...}:

for js: session.value.data.session.expiresAt
for template: session.data.session.expiresAt

<script>
const session = useSession()

watchEffect(() => {
  if(session.value.data?.session) {
    console.log(session.value.data.session)
  }
})

</script>

<template>
  <ion-text>
    <pre>{{ session }}</pre>
    {{ session.data.session.expiresAt }}
  </ion-text>
</tempalte>

Resp example:

{
  "data": {
    "session": {
      "ipAddress": "",
      "userAgent": "Mozilla/5.0...",
      "expiresAt": "2025-01-06T12:53:19.866Z",
      "userId": "123",
      "token": "AJNW",
      "createdAt": "2024-12-30T12:53:19.866Z",
      "updatedAt": "2024-12-30T12:53:19.866Z",
      "platform": "web"
    },
    "user": {
      "id": "123",
      "name": "Test Test",
      "email": "test@test.com",
      "emailVerified": true,
      "image": "https://",
      "createdAt": "2024-12-28T02:13:58.846Z",
      "updatedAt": "2024-12-28T02:13:58.846Z"
    }
  },
  "error": null,
  "isPending": false,
  "isRefetching": false
}

Describe the solution you'd like

This solution already implemented but only for nuxt if use with useFetch:

const { data: session } = await authClient.useSession(useFetch); 

It would be cool to have the same functionality for pure vue:

<script>
const { data, error, isPending } = useSession()

watchEffect(() => {
  if(data.value) {
    console.log(data.value.session)
  }
})
</script>

<template>
  <ion-text>
    <pre>{{ data }}</pre>
    {{ data.session.expiresAt }}
  </ion-text>
</tempalte>

Describe alternatives you've considered

There is one way, but you need a third party lib:

https://vueuse.org/shared/toReactive/
const session = toReactive(useSession())

Additional context

Similar solution in https://tanstack.com/query/latest/docs/framework/vue/quick-start

Originally created by @reslear on GitHub (Dec 30, 2024). Originally assigned to: @himself65 on GitHub. ### Is this suited for github? - [X] Yes, this is suited for github ### Is your feature request related to a problem? Please describe. Compositional problem `useSession` return `Ref`, but better if return `{ data: Ref<>, error: Ref<>, ...}`: for js: `session.value.data.session.expiresAt` for template: `session.data.session.expiresAt` ```vue <script> const session = useSession() watchEffect(() => { if(session.value.data?.session) { console.log(session.value.data.session) } }) </script> <template> <ion-text> <pre>{{ session }}</pre> {{ session.data.session.expiresAt }} </ion-text> </tempalte> ``` Resp example: ```json { "data": { "session": { "ipAddress": "", "userAgent": "Mozilla/5.0...", "expiresAt": "2025-01-06T12:53:19.866Z", "userId": "123", "token": "AJNW", "createdAt": "2024-12-30T12:53:19.866Z", "updatedAt": "2024-12-30T12:53:19.866Z", "platform": "web" }, "user": { "id": "123", "name": "Test Test", "email": "test@test.com", "emailVerified": true, "image": "https://", "createdAt": "2024-12-28T02:13:58.846Z", "updatedAt": "2024-12-28T02:13:58.846Z" } }, "error": null, "isPending": false, "isRefetching": false } ``` ### Describe the solution you'd like This solution already implemented but only for nuxt if use with [`useFetch`](https://www.better-auth.com/docs/integrations/nuxt#ssr-usage): ```ts const { data: session } = await authClient.useSession(useFetch); ``` It would be cool to have the same functionality for pure vue: ```vue <script> const { data, error, isPending } = useSession() watchEffect(() => { if(data.value) { console.log(data.value.session) } }) </script> <template> <ion-text> <pre>{{ data }}</pre> {{ data.session.expiresAt }} </ion-text> </tempalte> ``` ### Describe alternatives you've considered There is one way, but you need a third party lib: https://vueuse.org/shared/toReactive/ `const session = toReactive(useSession())` ### Additional context Similar solution in https://tanstack.com/query/latest/docs/framework/vue/quick-start
GiteaMirror added the vue label 2026-03-13 07:49:54 -05:00
Author
Owner

@phederal commented on GitHub (Jan 20, 2025):

Real need!

@phederal commented on GitHub (Jan 20, 2025): Real need!
Author
Owner

@dosubot[bot] commented on GitHub (Jun 22, 2025):

Hi, @reslear. I'm Dosu, and I'm helping the better-auth team manage their backlog. I'm marking this issue as stale.

Issue Summary:

  • Proposal to enhance the Vue composition hooks API by modifying useSession.
  • Suggested change: return an object with data and error properties.
  • Aim: Align with Nuxt's useFetch for consistency and intuitiveness.
  • @phederal supported the proposal, highlighting its necessity.

Next Steps:

  • Is this issue still relevant to the latest version of the better-auth repository? If so, please comment to keep the discussion open.
  • If no further input is provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

@dosubot[bot] commented on GitHub (Jun 22, 2025): Hi, @reslear. I'm [Dosu](https://dosu.dev), and I'm helping the better-auth team manage their backlog. I'm marking this issue as stale. **Issue Summary:** - Proposal to enhance the Vue composition hooks API by modifying `useSession`. - Suggested change: return an object with `data` and `error` properties. - Aim: Align with Nuxt's `useFetch` for consistency and intuitiveness. - @phederal supported the proposal, highlighting its necessity. **Next Steps:** - Is this issue still relevant to the latest version of the better-auth repository? If so, please comment to keep the discussion open. - If no further input is provided, the issue will be automatically closed in 7 days. Thank you for your understanding and contribution!
Author
Owner

@phederal commented on GitHub (Jun 23, 2025):

Hi, @reslear. I'm Dosu, and I'm helping the better-auth team manage their backlog. I'm marking this issue as stale.

Issue Summary:

  • Proposal to enhance the Vue composition hooks API by modifying useSession.
  • Suggested change: return an object with data and error properties.
  • Aim: Align with Nuxt's useFetch for consistency and intuitiveness.
  • @phederal supported the proposal, highlighting its necessity.

Next Steps:

  • Is this issue still relevant to the latest version of the better-auth repository? If so, please comment to keep the discussion open.
  • If no further input is provided, the issue will be automatically closed in 7 days.

Thank you for your understanding and contribution!

This is relevant issue

@phederal commented on GitHub (Jun 23, 2025): > Hi, @reslear. I'm [Dosu](https://dosu.dev), and I'm helping the better-auth team manage their backlog. I'm marking this issue as stale. > > **Issue Summary:** > - Proposal to enhance the Vue composition hooks API by modifying `useSession`. > - Suggested change: return an object with `data` and `error` properties. > - Aim: Align with Nuxt's `useFetch` for consistency and intuitiveness. > - @phederal supported the proposal, highlighting its necessity. > > **Next Steps:** > - Is this issue still relevant to the latest version of the better-auth repository? If so, please comment to keep the discussion open. > - If no further input is provided, the issue will be automatically closed in 7 days. > > Thank you for your understanding and contribution! This is relevant issue
Author
Owner

@dosubot[bot] commented on GitHub (Sep 22, 2025):

Hi, @reslear. I'm Dosu, and I'm helping the better-auth team manage their backlog and am marking this issue as stale.

Issue Summary:

  • You proposed enhancing the Vue composition hook useSession to return an object with { data: Ref, error: Ref, ... } for improved reactivity and clarity.
  • This approach is inspired by Nuxt's useFetch and has been supported by phederal.
  • The issue was previously marked as stale but kept open after confirmation of its relevance.
  • No resolution or implementation has been made yet.

Next Steps:

  • Please confirm if this enhancement is still relevant to the latest version of better-auth by commenting on this issue.
  • If no response is received, I will automatically close the issue in 7 days.

Thank you for your understanding and contribution!

@dosubot[bot] commented on GitHub (Sep 22, 2025): Hi, @reslear. I'm [Dosu](https://dosu.dev), and I'm helping the better-auth team manage their backlog and am marking this issue as stale. **Issue Summary:** - You proposed enhancing the Vue composition hook `useSession` to return an object with `{ data: Ref, error: Ref, ... }` for improved reactivity and clarity. - This approach is inspired by Nuxt's `useFetch` and has been supported by phederal. - The issue was previously marked as stale but kept open after confirmation of its relevance. - No resolution or implementation has been made yet. **Next Steps:** - Please confirm if this enhancement is still relevant to the latest version of better-auth by commenting on this issue. - If no response is received, I will automatically close the issue in 7 days. Thank you for your understanding and contribution!
Author
Owner

@reslear commented on GitHub (Sep 22, 2025):

@dosubot This is relevant issue

@reslear commented on GitHub (Sep 22, 2025): @dosubot This is relevant issue
Author
Owner

@dosubot[bot] commented on GitHub (Dec 22, 2025):

Hi, @reslear. I'm Dosu, and I'm helping the better-auth team manage their backlog and am marking this issue as stale.

Issue Summary:

  • You requested that the Vue composition hook useSession return an object with { data: Ref, error: Ref, ... } instead of a single Ref, similar to Nuxt's useFetch.
  • This change aims to improve reactivity and code clarity.
  • The proposal has been supported by other community members and acknowledged by the maintainers.
  • The issue has been marked as stale twice but kept open after you confirmed it is still relevant.
  • No implementation or resolution has occurred yet.

Next Steps:

  • Please confirm if this issue is still relevant to the latest version of better-auth by commenting on this issue.
  • If I do not hear back within 7 days, I will automatically close the issue.

Thank you for your understanding and contribution!

@dosubot[bot] commented on GitHub (Dec 22, 2025): Hi, @reslear. I'm [Dosu](https://dosu.dev), and I'm helping the better-auth team manage their backlog and am marking this issue as stale. **Issue Summary:** - You requested that the Vue composition hook `useSession` return an object with `{ data: Ref, error: Ref, ... }` instead of a single Ref, similar to Nuxt's `useFetch`. - This change aims to improve reactivity and code clarity. - The proposal has been supported by other community members and acknowledged by the maintainers. - The issue has been marked as stale twice but kept open after you confirmed it is still relevant. - No implementation or resolution has occurred yet. **Next Steps:** - Please confirm if this issue is still relevant to the latest version of better-auth by commenting on this issue. - If I do not hear back within 7 days, I will automatically close the issue. Thank you for your understanding and contribution!
Author
Owner

@reslear commented on GitHub (Dec 29, 2025):

@dosubot This is relevant issue

@reslear commented on GitHub (Dec 29, 2025): @dosubot This is relevant issue
Author
Owner

@dosubot[bot] commented on GitHub (Dec 29, 2025):

Hi @reslear! I'm Dosu and I’m helping the better-auth team.

Confirmed—this issue is still relevant. The current Vue useSession hook returns a single Ref object with { data, error, isPending, isRefetching, refetch }, which is an improvement, but it doesn't yet support ergonomic destructuring into separate refs for pure Vue usage without Nuxt or third-party helpers like toReactive—so the original request remains open and important for developer experience in Vue apps. Recent PRs have improved the structure and documentation, but the out-of-the-box destructuring pattern is still not implemented for plain Vue users source.

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other

Chat with Dosu Open in Cursor Join Discord Share on X

@dosubot[bot] commented on GitHub (Dec 29, 2025): <!-- Greeting --> Hi @reslear! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the better-auth team. <!-- Answer --> Confirmed—this issue is still relevant. The current Vue `useSession` hook returns a single `Ref` object with `{ data, error, isPending, isRefetching, refetch }`, which is an improvement, but it doesn't yet support ergonomic destructuring into separate refs for pure Vue usage without Nuxt or third-party helpers like `toReactive`—so the original request remains open and important for developer experience in Vue apps. Recent PRs have improved the structure and documentation, but the out-of-the-box destructuring pattern is still not implemented for plain Vue users [source](https://github.com/better-auth/better-auth/blob/4d7d7d5a76b5e0e90d42238f00751584ec07afa7/packages/better-auth/src/client/vue/index.ts#L77-L112). <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/d8e7b1c7-d713-441e-a874-60001c3cbb51?feedback_type=other)</sup> [![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/cdda13d9-dd27-4d31-b09a-5d8bec92de21/ask?utm_source=github)&nbsp;[![Open in Cursor](https://dosu.dev/dosu-in-cursor.svg)](https://cursor.com/link/prompt?text=Confirmed%E2%80%94this%20issue%20is%20still%20relevant.%20The%20current%20Vue%20%60useSession%60%20hook%20returns%20a%20single%20%60Ref%60%20object%20with%20%60%7B%20data%2C%20error%2C%20isPending%2C%20isRefetching%2C%20refetch%20%7D%60%2C%20which%20is%20an%20improvement%2C%20but%20it%20doesn%27t%20yet%20support%20ergonomic%20destructuring%20into%20separate%20refs%20for%20pure%20Vue%20usage%20without%20Nuxt%20or%20third-party%20helpers%20like%20%60toReactive%60%E2%80%94so%20the%20original%20request%20remains%20open%20and%20important%20for%20developer%20experience%20in%20Vue%20apps.%20Recent%20PRs%20have%20improved%20the%20structure%20and%20documentation%2C%20but%20the%20out-of-the-box%20destructuring%20pattern%20is%20still%20not%20implemented%20for%20plain%20Vue%20users%20%5Bsource%5D%28https%3A//github.com/better-auth/better-auth/blob/4d7d7d5a76b5e0e90d42238f00751584ec07afa7/packages/better-auth/src/client/vue/index.ts%23L77-L112%29.)&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/better-auth/better-auth/issues/1070)
Author
Owner

@himself65 commented on GitHub (Jan 3, 2026):

I'm opening this because we do have a plan to have a dedicated client package for each web framework

@himself65 commented on GitHub (Jan 3, 2026): I'm opening this because we do have a plan to have a dedicated client package for each web framework
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#496