Skip to content

chore(vue,nuxt): Add default SDK Metadata and fix integration tests #5839

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 5, 2025
Merged

chore(vue,nuxt): Add default SDK Metadata and fix integration tests #5839

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
718b17c
chore(integration): Add E2E_CLERK_VERSION in vue and nuxt integration…
wobsoriano May 5, 2025
c9d6766
Merge branch 'main' into rob/use-e2e-clerk-version-vue
wobsoriano May 5, 2025
d1e17d8
chore: add sdk metadata
wobsoriano May 5, 2025
e69f5db
chore: add changeset
wobsoriano May 5, 2025
741bd06
chore: update sdk metadata in nuxt
wobsoriano May 5, 2025
8750bc5
chore: use local packages in tests
wobsoriano May 5, 2025
6f9d36e
Merge branch 'main' into rob/use-e2e-clerk-version-vue
wobsoriano May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/cold-impalas-peel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@clerk/vue': patch
'@clerk/nuxt': patch
---

Set default SDK Metadata.
2 changes: 2 additions & 0 deletions integration/presets/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { nuxt } from './nuxt';
import { react } from './react';
import { reactRouter } from './react-router';
import { tanstack } from './tanstack';
import { vue } from './vue';

export const appConfigs = {
envs,
Expand All @@ -21,6 +22,7 @@ export const appConfigs = {
astro,
tanstack,
nuxt,
vue,
reactRouter,
secrets: {
instanceKeys,
Expand Down
3 changes: 2 additions & 1 deletion integration/presets/nuxt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { constants } from '../constants';
import { applicationConfig } from '../models/applicationConfig';
import { templates } from '../templates';
import { linkPackage } from './utils';
Expand All @@ -11,7 +12,7 @@ const nuxtNode = applicationConfig()
.addScript('dev', 'pnpm dev')
.addScript('build', 'pnpm build')
.addScript('serve', 'pnpm preview')
.addDependency('@clerk/nuxt', linkPackage('nuxt'));
.addDependency('@clerk/nuxt', constants.E2E_CLERK_VERSION || linkPackage('nuxt'));

export const nuxt = {
node: nuxtNode,
Expand Down
3 changes: 2 additions & 1 deletion integration/presets/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { constants } from '../constants';
import { applicationConfig } from '../models/applicationConfig';
import { templates } from '../templates';
import { linkPackage } from './utils';
Expand All @@ -10,7 +11,7 @@ const vite = applicationConfig()
.addScript('dev', 'pnpm dev')
.addScript('build', 'pnpm build')
.addScript('serve', 'pnpm preview')
.addDependency('@clerk/vue', linkPackage('vue'))
.addDependency('@clerk/vue', constants.E2E_CLERK_VERSION || linkPackage('vue'))
.addDependency('@clerk/localizations', linkPackage('localizations'));

export const vue = {
Expand Down
2 changes: 2 additions & 0 deletions integration/templates/vue-vite/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import router from './router';
const app = createApp(App);
app.use(clerkPlugin, {
publishableKey: import.meta.env.VITE_CLERK_PUBLISHABLE_KEY,
clerkJSUrl: import.meta.env.VITE_CLERK_JS_URL,
clerkJSVersion: import.meta.env.VITE_CLERK_JS_VERSION,
Comment on lines +10 to +11
Copy link
Member Author

@wobsoriano wobsoriano May 5, 2025

Choose a reason for hiding this comment

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

this is the actual fix

});
app.use(router);
app.mount('#app');
5 changes: 5 additions & 0 deletions packages/nuxt/src/runtime/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ export default defineNuxtPlugin(nuxtApp => {
const runtimeConfig = useRuntimeConfig();
nuxtApp.vueApp.use(clerkPlugin, {
...(runtimeConfig.public.clerk ?? {}),
sdkMetadata: {
name: PACKAGE_NAME,
version: PACKAGE_VERSION,
environment: process.env.NODE_ENV,
},
routerPush: (to: string) => navigateTo(to),
routerReplace: (to: string) => navigateTo(to, { replace: true }),
initialState: initialState.value,
Expand Down
15 changes: 13 additions & 2 deletions packages/vue/src/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ import { ClerkInjectionKey } from './keys';

export type PluginOptions = LoadClerkJsScriptOptions;

const SDK_METADATA = {
name: PACKAGE_NAME,
version: PACKAGE_VERSION,
environment: process.env.NODE_ENV,
};

/**
* Vue plugin for integrating Clerk.
*
Expand All @@ -28,9 +34,9 @@ export type PluginOptions = LoadClerkJsScriptOptions;
* ```
*/
export const clerkPlugin: Plugin<[PluginOptions]> = {
install(app, options) {
install(app, pluginOptions) {
// @ts-expect-error: Internal property for SSR frameworks like Nuxt
const { initialState } = options;
const { initialState } = pluginOptions;

const loaded = shallowRef(false);
const clerk = shallowRef<Clerk | null>(null);
Expand All @@ -42,6 +48,11 @@ export const clerkPlugin: Plugin<[PluginOptions]> = {
organization: undefined,
});

const options: LoadClerkJsScriptOptions = {
...pluginOptions,
sdkMetadata: pluginOptions.sdkMetadata || SDK_METADATA,
};

// We need this check for SSR apps like Nuxt as it will try to run this code on the server
// and loadClerkJsScript contains browser-specific code
if (inBrowser()) {
Expand Down