The vue-clerk documentation pages act a bit weird:

1. If I start on the home page then click on What is Vue Clerk?, both pages display nicely.

2. If I then reload What is Vue Clerk?, two things happen: (1) the main content for this page disappears and (2) the left 25% of the page is hidden behind the navigation component. See screenshot 1.

3. When I next use the navigation mention to navigation go to any other documentation page, the main content for each page does appear correctly, but the left 25% of each page is still hidden behind the navigation component. See screenshot 2.

4. If I then use the navigation menu to go back to the What is Vue Clerk? page, the main content reappears, but the 25% issue remains.

I see exactly the same issues using Firefox, Chrome, or Safari. I'm working on a MacBook Pro running Venutra 13.6.7.

Screenshot 1

Screenshot 2

Would it be possible to have the ClerkProvider component so the experimental localization prop can be used?

Or is there any other way to set it?

See here for reference: https://clerk.com/docs/components/customization/localization

Thanks and all the best!

Hi, is it possible to somehow use the composables outside of vue components / setup functions? Like in other composables / guards etc.? I'm getting a Error: Clerk provider not found when for example trying to get a token to use it in my apollo composable as a bearer token.

Seems like in this context the clerk instance isn't provided under the VUE_CLERK key because vue's provide/inject mechanism doesn't work there. Any workarounds on this? Some other libraries facing this issue have a method to provide the client outside of vue components for this usecase.

For example Vue Apollo has a provideApolloClient method: https://v4.apollo.vuejs.org/guide-composable/setup.html#usage-outside-of-setup

Thanks!

So I was testing vue-clerk in nuxt coz I wanna update the docs to add Nuxt installation guide, but somehow I got this error

Clerk provider not found

Facts:

• Env is properly loaded
• No visible installation error

Here's my setup:

// nuxt plugin 
// vue-clerk.client.js

import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
import { clerkPlugin } from 'vue-clerk';

export default defineNuxtPlugin({
	setup (nuxtApp) {
		const runtimeConfig = useRuntimeConfig();
		const clerkPublishableKey = runtimeConfig.public.clerkPublishableKey;
		
		console.log(clerkPublishableKey); // has value
		
		nuxtApp.vueApp.use(clerkPlugin, {
	      	publishableKey: clerkPublishableKey,
	    });
	},
});

// .env

CLERK_PUBLISHABLE_KEY=pk_test_c3dl...Rlax4 # reducted

// nuxt.config.js

...

runtimeConfig: {
 	public: {
    	clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
  	}, 
},

plugins: [
	'~/plugins/vue-clerk.client.js',
]

...

Screenshot

I would like to implement custom pages in the user profile using Clerk's Vue components, similar to the functionality provided in the React library. Currently, there is documentation and support for this feature in React but not for Vue.

https://clerk.com/docs/components/customization/user-profile

Example Usage:

<UserButton :showName="true" v-if="isSignedIn">
  <UserButton.UserProfilePage url="custom-page" label="Custom Page" :labelIcon="CustomIcon">
    <CustomView />
  </UserButton.UserProfilePage>
</UserButton>

Have you ever seen this issue

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#/factor-one' is not a valid selector.

See like there is an issue with the hash routing an nuxt.

However it still logs in , just posts and error in the console and gets reported via sentry.

Issue
I've integrated vue-clerk into my Vue 3 project to enable email login with OTP. However, when attempting to log in using the email for OTP, the redirection to the "/sign-in/factor-one" page is not being recognized within my Vue router config. As a result, the page goes blank, and the intended component is not displayed.

Solution Attempted
I attempted to address the problem by creating children routes, namely "factor-one","factor-two" and "verify" under the "/sign-in" route. While this resolved the issue of displaying the component that handles OTP entry and allows user access to the application, it introduced a new problem. The OTP email is being sent twice, with the first redirection triggering one and the subsequent component load triggering another.

I would like to know if anyone else has encountered a similar issue and if there are any known solutions or workarounds.

References:
https://clerk.com/blog/remix-delightful-developer-experiences
https://clerk.com/docs/custom-flows/overview

A feature request would be to enable access to ClerkProvider.

It seems using ClerkProvider is the only way to set themes or to customize styling for clerk elements.

Steps to reproduce:

1. Signup using Google
2. Cancel the intent (click the back arrow in the browser)
3. Redirected to 404 page

The page seems to be broken as it loads to the top of the original Signup page.

I just noticed that my app bundle size increased a lot after I installed vue-clerk. I can see that it's caused by @clerk/clerk-js package and not directly by vue-clerk. I saw some commits about experimenting with headless version of clerk but it was reverted after. I would like to ask you what is the state or if you resolved the issue with bundle size somehow different?
Because otherwise this is excellent package and it help me a lot, but this is really a dealbreaker.

Hi! Why there is no Nuxt 3 support?

Description:
I've encountered an issue where the redirect functionality doesn't seem to work when using the SignedIn and SignedOut components. Instead it just displays blank white page.

Steps to Reproduce:

• Implement SignedIn and SignedOut components in the application.
• Attempt to trigger a redirect.

Observations:
The redirect does not occur as expected.

Additional Information:
I have tried going through releases and it broke after version 0.3.0

I am struggling to get the composables to work with Nuxt.

I have tried three approaches:

1. Following the example from nuxt-clerk-template here: https://github.com/wobsoriano/nuxt-clerk-template/blob/main/plugins/clerk.client.ts
2. Trying the nuxt-clerk module here: https://github.com/RodrigoProjects/nuxt-clerk (found via this issue: #12)
3. Going the more vanilla route and following the example of how to integrate a vue plugin with nuxt in conjunction with the vue-clerk docs on using the plugin

I was able to render the auth component and actually login ... but trying to use any composables (ex useUser()) result in the same issue:

• In the dev server logs: WARN [Vue warn]: injection "VUE_CLERK" not found.
• The following error in the nuxt error log: This composable can only be used when the Vue Clerk plugin is installed. Learn more: https://vue-clerk.vercel.app/plugin

Here are the two methods attempted in plugins/clerk.client.ts:

Method A:

import { clerkPlugin } from 'vue-clerk/plugin'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(clerkPlugin, {
    publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY
  })

  console.log({clerkPlugin, nuxtApp})
  console.log(`Clerk plugin loaded ${import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}`)
})

Method B:

import { Clerk, provideClerkToVueApp } from 'vue-clerk/plugin'

export default defineNuxtPlugin(async (nuxtApp) => {
  const isClerkLoaded = ref(false)

  const clerk = new Clerk(import.meta.env.VITE_CLERK_PUBLISHABLE_KEY)
  console.log(`Clerk plugin loaded ${import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}`)

  // Instead of using the `vue-clerk` plugin, we can use this internal function to create a Clerk instance.
  provideClerkToVueApp(nuxtApp.vueApp, clerk, {
    isClerkLoaded,
    shouldLoadClerk: false,
    clerkOptions: {}, // Optional since we run `clerk.load` manually
  })

  // This will make sure that the clerk library is loaded in the client first before moving on to the next middleware.
  await clerk.load({
    routerPush: (to) => {
      return navigateTo(to)
    },
    routerReplace: (to) => {
      return navigateTo(to, { replace: true })
    },
  })

  isClerkLoaded.value = true

  return {
    provide: {
      clerk
    },
  }
})

Any insights would be greatly appreciated, thank you.

Upgrading from 0.1.7 to 0.3.7 breaks local development: The clerk client on locahost keeps issuing gets and posts to clerk servers at a high pace until eventually we get a 429 back.

Failed to load resource: the server responded with a status of 429 ()

Hello,
I've been trying to integrate vue-clerk with my Astro project but received the following error below. The Astro project has SSR enabled via the Cloudflare adapter and is running the Vue integration as well.

[astro-island] Error hydrating /src/pages/admin/Signin.vue TypeError: mod.default is not a function

Repo:
https://github.com/serdar/astro-vue-clerk-demo

Stackblitz:
https://stackblitz.com/~/github.com/serdar/astro-vue-clerk-demo

Thanks

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• fix(deps): update dependency @clerk/shared to v2.5.0
• fix(deps): update dependency @clerk/types to v4.13.0

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

What are my options with Vue2.x?

The only thing I did since it was working is bumped nuxt. Currently it is 3.12.4 and there is no full name next to the avatar button (ofc :show-name="true" is there).

Hi, I have the following component.

<template>
  <div>
    Projects
    <div v-if="isSignedIn">
      <div v-for="project in data" :key="project.project.id">
        {{ project.project.name }} create by {{ project.user.email }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUser } from "vue-clerk";
const { isSignedIn, user } = await useUser();
console.log(isSignedIn.value, user.value);

const { data } = await useFetch("/api/database/projects/usersProjects", {
  query: { userId: user?.value?.id },
});
</script>

When hit refresh in the browser, the user value is undefined and so my useFetch call fails. If I click navigate to another component and then click navigate back to this component, the user variable has a value and the useFetch call works correctly.

I assume vue-clerk is contacting clerk to get an auth token when the page renders hence the values being undefined at that point.

How can I work around this issue.

Hey, I am building a chat application in PWA.
I have a situation that user may check the message in offline environment.

When I switch the network off, the clerkjs couldn't initialize properly.

I came out a feature that user can set a fallback option, when he/she try to get access to the application with previous clerkjs data.

This feature may may use localStorage or IndexedDB to save the state in browser, and keep watching the network status.
Once the network is online, updating the state immediately.

          I think OrganizationsList is not imported. https://github.com/wobsoriano/vue-clerk/blob/main/src/index.ts

updated the package but import is not available. Thank you.

Originally posted by @Tigran-Harutyunyan in #16 (comment)
Hi Robert. Please don`t forget the import issue of OrganizationList. It is unavailable.

when watching the ref inside the useOrganization composable, or the valie.id directly, the ord switcher will cause the watcher to fire off several times. It seems as if the org id gets set correctly -> set as null -> set correctly very quickly:

const { organization, isLoaded } = useOrganization();
watch(organization, (newValue, oldValue) => {
  console.log(
    "newValue",
    newValue,
    "oldValue",
    oldValue,
    "isLoaded",
    isLoaded.value
  );
});

isLoaded goes to false as the org changes back to null

i might be doing something wong, but after looking at other implementations i can't figure out what that may be.

The issue is that when trying to read values on page load or onMounted() clerk will be undefined:

<script setup lang="ts">
import { useAuth } from 'vue-clerk';

const { isSignedIn } = useAuth();

console.log(isSignedIn.value); // undefined
</script>

if this is the normal behavior how are you supposed to implement routegards then?

It seems I have reactivity issues. Excuse me if it is not intended by design.

Have a container component with "OrganizationSwitcher" component inside. It switches the organizations perfectly well, but it does not provide any events on changes.

In another component I just want to listen to current organization switch changes.

In Component 2:

const { organization } = useClerk();

this "organization" is not reactive.

I don`t know how to listen to changes. Computed props or deep watches are not triggering.
DOM element listening sound stupid. only SetInterval allows to get the up to date info.

const clerk = useClerk();

setInterval(() => {
   if (clerk?.organization) {
   ...do whatever with update
  }
}, 1000);

Maybe I don't understand it well.

Thanks for package and efforts.

It doesnt seem like there is currently a way to switch orgs, as I would expect some kind of useOrganizationList() to match https://clerk.com/docs/references/javascript/organization/members

maybe there is a word around you can advise on?

When upgrading to latest all of my code watching these references is no longer seeing any changes in clerk.

In my pinia store I have a
clerk.addListener((emission) => {
log.debug(emission | user: ${emission.user?.id});
});

and it is correctly firing an event when the cached login authenticates. but on the SignIn form

const { isLoaded, isSignedIn } = useAuth();

isLoaded remains false and isSignedIn is undefined. They never change.
The only difference in my code is the upgrade to 0.4.0 .
This is a plain Vue application.

I also upgraded my nuxtjs website with this version and it seems to be working as expected.

I also added
clerk.addOnLoaded(()=> {
log.debug(addOnLoaded);
})

and this is firing the callback as expected

Thank you for this contribution to the JS / Vue community!

I'm observing some strange behavior and wondering if it might be an issue. It could be that it's working properly and I just don't understand the intended function.

It seems like the first time I load vue-clerk / useClerk after warming up my Nuxt dev server, it functions as expected -- on the client side, clerk.loaded is true and clerk.user is defined. However, with every subsequent page load, clerk.loaded will be false and clerk.user will be undefined. Is this expected?

I'm seeing this behavior in the https://github.com/wobsoriano/nuxt-clerk-template repo. My only changes are to add my keys to .env and to add some logs to console in the middleware/auth.ts:

  // On client, check if clerk is loaded and log to console
  if (process.client) {
    if (clerk.loaded)
      console.log('Clerk loaded!');
    else
      console.log('Clerk not loaded!');
    console.log('Clerk user:', clerk.user)
  }

Thanks for this library I love that I can now use Clerk in Nuxt.

My only issue at the moment is that I am only able to access the Clerk user on the front end with useUser.

When I use a useFetch to pull data from the backend, I need to be able to access user direct from Clerk so I can verify the user before sending data back to the front end.

With the following code, I get the error This composable can only be used when the Vue Clerk plugin is installed

import { useUser } from 'vue-clerk'
export default defineEventHandler(async (event) => {
  const user = useUser()
   console.log("clerk user", user)
})

Update: I notice from another issue that is now closed a user was told that vue-clerk only works on the client. If this is the case how do we secure a backend in nuxt. I can not trust the front end to send a userId to the backend, that could be faked by a malicious actor.

I am assuming I am missing something here that other people have already solved, but how do I get secure access to the clerk user on the backend?