From 912d735488878e9ef97de9d0da608f26efa93a04 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Mon, 13 Jan 2025 13:00:16 -0800
Subject: [PATCH 1/2] chore(vue,nuxt): Add quickstart links to README

---
 packages/nuxt/README.md | 64 +++--------------------------------------
 packages/vue/README.md  | 56 ++----------------------------------
 2 files changed, 7 insertions(+), 113 deletions(-)

diff --git a/packages/nuxt/README.md b/packages/nuxt/README.md
index 467faa14aaf..eb395c094fc 100644
--- a/packages/nuxt/README.md
+++ b/packages/nuxt/README.md
@@ -35,69 +35,13 @@
 
 ### Installation
 
-Add `@clerk/nuxt` as a dependency
+The fastest way to get started with Clerk is by following the [Nuxt Quickstart](https://clerk.com/docs/quickstarts/nuxt?utm_source=github&utm_medium=clerk_nuxt).
 
-```bash
-npm install @clerk/nuxt
-```
-
-### Build
-
-To build the package locally with the TypeScript compiler, run:
-
-```bash
-npm run build
-```
+You'll learn how to install `@clerk/nuxt`, set up your environment keys, add the Clerk module, and use Clerk's prebuilt components.
 
 ## Usage
 
-Make sure the following environment variables are set in a `.env` file in your Nuxt project:
-
-```
-NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=[publishable-key]
-NUXT_CLERK_SECRET_KEY=[secret-key]
-```
-
-Then, add `@clerk/nuxt` to the `modules` section of `nuxt.config.ts`:
-
-```js
-export default defineNuxtConfig({
-  modules: ['@clerk/nuxt'],
-});
-```
-
-You can now start using Clerk's components. Here's a basic example showing a header component:
-
-```vue
-<template>
-  <header>
-    <h1>My App</h1>
-    <SignedIn>
-      <UserButton />
-    </SignedIn>
-    <SignedOut>
-      <SignInButton mode="modal" />
-    </SignedOut>
-  </header>
-</template>
-```
-
-To protect an API route, you can access the `event.context.auth` object and check the value of `userId` to determine if the user is authenticated:
-
-```ts
-export default eventHandler(event => {
-  const { userId } = event.context.auth;
-
-  if (!userId) {
-    throw createError({
-      statusCode: 401,
-      message: 'Unauthorized',
-    });
-  }
-
-  return { userId };
-});
-```
+For further information, guides, and examples visit the [Nuxt reference documentation](https://clerk.com/docs/references/nuxt/overview?utm_source=github&utm_medium=clerk_nuxt).
 
 ## Support
 
@@ -122,4 +66,4 @@ _For more information and to report security issues, please refer to our [securi
 
 This project is licensed under the **MIT license**.
 
-See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/vue/LICENSE) for more information.
+See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/nuxt/LICENSE) for more information.
diff --git a/packages/vue/README.md b/packages/vue/README.md
index 0c8c26a6117..6f29ec5d833 100644
--- a/packages/vue/README.md
+++ b/packages/vue/README.md
@@ -35,63 +35,13 @@
 
 ### Installation
 
-Add `@clerk/vue` as a dependency
+The fastest way to get started with Clerk is by following the [Vue Quickstart](https://clerk.com/docs/quickstarts/vue?utm_source=github&utm_medium=clerk_vue).
 
-```bash
-npm install @clerk/vue
-```
-
-### Build
-
-To build the package locally with the TypeScript compiler, run:
-
-```bash
-npm run build
-```
+You'll learn how to create a new Vue application, install `@clerk/vue`, set up your environment keys, add `clerkPlugin`, and use Clerk's prebuilt components.
 
 ## Usage
 
-Make sure the following environment variables are set in a `.env.local` file in your Vite project:
-
-```
-VITE_CLERK_PUBLISHABLE_KEY=[publishable-key]
-```
-
-Then, install the Clerk plugin in your main Vue application:
-
-```js
-import { createApp } from 'vue';
-import App from './App.vue';
-import { clerkPlugin } from '@clerk/vue';
-
-const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
-
-const app = createApp(App);
-app.use(clerkPlugin, {
-  publishableKey: PUBLISHABLE_KEY,
-});
-app.mount('#app');
-```
-
-You can now start using Clerk's components. Here's a basic example showing a header component:
-
-```vue
-<script setup>
-import { SignedIn, SignedOut, UserButton } from '@clerk/vue';
-</script>
-
-<template>
-  <header>
-    <h1>My App</h1>
-    <SignedIn>
-      <UserButton />
-    </SignedIn>
-    <SignedOut>
-      <a href="/sign-in">Sign in</a>
-    </SignedOut>
-  </header>
-</template>
-```
+For further information, guides, and examples visit the [Vue reference documentation](https://clerk.com/docs/references/vue/overview?utm_source=github&utm_medium=clerk_vue).
 
 ## Support
 

From 6552812c19db3c99c34dab8f3f0c0b7f9ae3d950 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Mon, 13 Jan 2025 13:08:45 -0800
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/healthy-bats-rhyme.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/healthy-bats-rhyme.md

diff --git a/.changeset/healthy-bats-rhyme.md b/.changeset/healthy-bats-rhyme.md
new file mode 100644
index 00000000000..c4b92d17aec
--- /dev/null
+++ b/.changeset/healthy-bats-rhyme.md
@@ -0,0 +1,6 @@
+---
+"@clerk/nuxt": patch
+"@clerk/vue": patch
+---
+
+Add quickstart links to Vue and Nuxt SDK READMEs