Skip to content

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

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 3 commits into from
Jan 13, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
912d735
chore(vue,nuxt): Add quickstart links to README
wobsoriano Jan 13, 2025
6552812
chore: add changeset
wobsoriano Jan 13, 2025
2084994
Merge branch 'main' into rob/update-vue-and-nuxt-readme
wobsoriano Jan 13, 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/healthy-bats-rhyme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@clerk/nuxt": patch
"@clerk/vue": patch
---

Add quickstart links to Vue and Nuxt SDK READMEs
64 changes: 4 additions & 60 deletions packages/nuxt/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.
56 changes: 3 additions & 53 deletions packages/vue/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Loading