chore(vue,nuxt): Add quickstart links to README (#4883)

clerk · Jan 13, 2025 · e45d455 · e45d455
1 parent 196f141
commit e45d455
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 113 deletions.
diff --git a/.changeset/healthy-bats-rhyme.md 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
diff --git 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
@@ -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