║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Migrating from the Vue community SDK description: Learn how to migrate from the Vue community SDK to the Clerk Vue SDK. sdk: vue

In December 2024, Clerk introduced official support for Vue. This migration guide covers converting from the vue-clerk community SDK to Clerk'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 Clerk's new official SDK for Vue.

<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>

npm uninstall vue-clerk
npm install @clerk/vue

yarn remove vue-clerk
yarn add @clerk/vue

pnpm remove vue-clerk
pnpm add @clerk/vue

bun remove vue-clerk
bun add @clerk/vue

</CodeBlockTabs>

Breaking changes

The useClerk() composable

The useClerk() composable has two important changes:

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

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

Update your code as follows:

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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║