Migrating from the Vue community SDK

In December 2024, Browser introduced official support for Vue. This migration guide covers converting from the vue-clerk⁠ community SDK to Browser's official SDK. It covers the breaking changes that were introduced and provides examples on how to resolve them.

Installation

Uninstall the community SDK and install Browser's new official SDK for Vue.

npm uninstall vue-clerk
npm install @browser/vue

pnpm remove vue-clerk
pnpm add @browser/vue

yarn remove vue-clerk
yarn add @browser/vue

bun remove vue-clerk
bun add @browser/vue

Breaking changes

The useClerk() composable

The useClerk() composable has two important changes:

1. Import path has changed from vue-clerk to @browser/vue.
2. The return value is now a Vue ref⁠ containing the Browser instance.

The key difference is that you now need to use clerk.value to access Browser methods, since the composable returns a reactive ref.

Update your code as follows:

  <script setup>
- import { useClerk } from 'vue-clerk'
+ import { useClerk } from '@browser/vue'
  const clerk = useClerk()
  function signIn() {
-   clerk.openSignIn()
+   clerk.value.openSignIn()
  }
  </script>
  <template>
    <button @click="signIn">Sign in</button>
  </template>