Skip to content

Conversation

@wobsoriano
Copy link
Member

@wobsoriano wobsoriano commented Feb 26, 2025

Description

This PR adds a utility function to dynamically update Clerk's options (appearance and localization) at runtime in Vue apps. Since Vue SDK doesn't have a <ClerkProvider> like component where props can be updated on the fly, this function provides a way to modify Clerk options after plugin initialization.

Usage:

<script setup>
import { updateClerkOptions } from '@clerk/vue'
import { dark } from '@clerk/themes'
import { frFR } from '@clerk/localizations'

function enableDarkTheme() {
  updateClerkOptions({
    appearance: {
      baseTheme: dark
    }
  })
}

function changeToFrench() {
  updateClerkOptions({
    localization: frFR
  })
}
</script>

<template>
    <button @click="enableDarkTheme">Enable Dark Theme</button>
    <button @click="changeToFrench">Change to French</button>
</template>

Resolves ECO-441

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

@changeset-bot
Copy link

changeset-bot bot commented Feb 26, 2025

🦋 Changeset detected

Latest commit: bd9f10f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@clerk/nuxt Minor
@clerk/vue Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Feb 26, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Feb 26, 2025 6:58pm

@wobsoriano
Copy link
Member Author

!snapshot

@clerk clerk deleted a comment from clerk-cookie Feb 26, 2025
@clerk-cookie
Copy link
Collaborator

Hey @wobsoriano - the snapshot version command generated the following package versions:

Package Version
@clerk/agent-toolkit 0.0.4-snapshot.v20250226023234
@clerk/astro 2.3.0-snapshot.v20250226023234
@clerk/backend 1.24.3-snapshot.v20250226023234
@clerk/chrome-extension 2.2.11-snapshot.v20250226023234
@clerk/clerk-js 5.54.0-snapshot.v20250226023234
@clerk/elements 0.23.0-snapshot.v20250226023234
@clerk/clerk-expo 2.8.0-snapshot.v20250226023234
@clerk/expo-passkeys 0.1.22-snapshot.v20250226023234
@clerk/express 1.3.50-snapshot.v20250226023234
@clerk/fastify 2.1.23-snapshot.v20250226023234
@clerk/localizations 3.10.8-snapshot.v20250226023234
@clerk/nextjs 6.12.1-snapshot.v20250226023234
@clerk/nuxt 1.2.1-snapshot.v20250226023234
@clerk/clerk-react 5.24.0-snapshot.v20250226023234
@clerk/react-router 1.1.1-snapshot.v20250226023234
@clerk/remix 4.5.1-snapshot.v20250226023234
@clerk/shared 3.0.0-snapshot.v20250226023234
@clerk/tanstack-start 0.11.0-snapshot.v20250226023234
@clerk/testing 1.4.24-snapshot.v20250226023234
@clerk/themes 2.2.20-snapshot.v20250226023234
@clerk/types 4.47.0-snapshot.v20250226023234
@clerk/ui 0.3.25-snapshot.v20250226023234
@clerk/vue 1.3.0-snapshot.v20250226023234

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/agent-toolkit

npm i @clerk/agent-toolkit@0.0.4-snapshot.v20250226023234 --save-exact

@clerk/astro

npm i @clerk/astro@2.3.0-snapshot.v20250226023234 --save-exact

@clerk/backend

npm i @clerk/backend@1.24.3-snapshot.v20250226023234 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@2.2.11-snapshot.v20250226023234 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.54.0-snapshot.v20250226023234 --save-exact

@clerk/elements

npm i @clerk/elements@0.23.0-snapshot.v20250226023234 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@2.8.0-snapshot.v20250226023234 --save-exact

@clerk/expo-passkeys

npm i @clerk/expo-passkeys@0.1.22-snapshot.v20250226023234 --save-exact

@clerk/express

npm i @clerk/express@1.3.50-snapshot.v20250226023234 --save-exact

@clerk/fastify

npm i @clerk/fastify@2.1.23-snapshot.v20250226023234 --save-exact

@clerk/localizations

npm i @clerk/localizations@3.10.8-snapshot.v20250226023234 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@6.12.1-snapshot.v20250226023234 --save-exact

@clerk/nuxt

npm i @clerk/nuxt@1.2.1-snapshot.v20250226023234 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.24.0-snapshot.v20250226023234 --save-exact

@clerk/react-router

npm i @clerk/react-router@1.1.1-snapshot.v20250226023234 --save-exact

@clerk/remix

npm i @clerk/remix@4.5.1-snapshot.v20250226023234 --save-exact

@clerk/shared

npm i @clerk/shared@3.0.0-snapshot.v20250226023234 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.11.0-snapshot.v20250226023234 --save-exact

@clerk/testing

npm i @clerk/testing@1.4.24-snapshot.v20250226023234 --save-exact

@clerk/themes

npm i @clerk/themes@2.2.20-snapshot.v20250226023234 --save-exact

@clerk/types

npm i @clerk/types@4.47.0-snapshot.v20250226023234 --save-exact

@clerk/ui

npm i @clerk/ui@0.3.25-snapshot.v20250226023234 --save-exact

@clerk/vue

npm i @clerk/vue@1.3.0-snapshot.v20250226023234 --save-exact

Comment on lines +107 to +110
{
name: 'updateClerkOptions',
from: resolver.resolve('./runtime/client'),
},
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will be auto-imported in Nuxt

@wobsoriano wobsoriano marked this pull request as ready for review February 26, 2025 17:31
@wobsoriano wobsoriano marked this pull request as draft February 26, 2025 17:47
@wobsoriano wobsoriano marked this pull request as ready for review February 26, 2025 18:19
@wobsoriano wobsoriano merged commit 54a3b5b into main Feb 26, 2025
28 of 29 checks passed
@wobsoriano wobsoriano deleted the rob/eco-441-expose-function-to-dynamically-update-clerk-options-in-vue branch February 26, 2025 20:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants