-
Notifications
You must be signed in to change notification settings - Fork 481
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(nuxt): Add Nuxt SDK docs (#1728)
Co-authored-by: Brad Cornes <[email protected]> Co-authored-by: victoria <[email protected]> Co-authored-by: Alexis Aguilar <[email protected]>
- Loading branch information
4 people
authored
Dec 19, 2024
1 parent
2569e26
commit 2aefa83
Showing
11 changed files
with
539 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| The `useAuth()` composable provides access to the current authentication state and methods to manage the active session. You can use this composable to protect [pages](/docs/references/nuxt/protect-pages). | ||
|
|
||
| In the following example, the `isLoaded` property checks if Clerk has finished initializing and the `userId` property checks if the user is signed in. | ||
|
|
||
| ```vue {{ filename: 'pages/protected-page.vue' }} | ||
| <script setup> | ||
| const { userId, isLoaded } = useAuth() | ||
| </script> | ||
| <template> | ||
| <div v-if="!isLoaded">Loading...</div> | ||
| <div v-else-if="!userId">Sign in to access this page</div> | ||
| <div v-else>Hello, {{ userId }}!</div> | ||
| </template> | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -139,7 +139,8 @@ | |
| "user-dotted-circle", | ||
| "vue", | ||
| "x", | ||
| "expo" | ||
| "expo", | ||
| "nuxt" | ||
| ] | ||
| } | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,162 @@ | ||
| --- | ||
| title: Nuxt Quickstart | ||
| description: Add authentication and user management to your Nuxt app with Clerk. | ||
| --- | ||
|
|
||
| <TutorialHero | ||
| framework="vue" | ||
| exampleRepo={[ | ||
| { | ||
| title: "Nuxt Quickstart Repo", | ||
| link: "https://github.com/clerk/clerk-nuxt-quickstart", | ||
| icon: "clerk" | ||
| } | ||
| ]} | ||
| beforeYouStart={[ | ||
| { | ||
| title: "Set up a Clerk application", | ||
| link: "/docs/quickstarts/setup-clerk", | ||
| icon: "clerk", | ||
| }, | ||
| { | ||
| title: "Create a Nuxt application", | ||
| link: "https://nuxt.com/docs/getting-started/installation", | ||
| icon: "nuxt" | ||
| } | ||
| ]} | ||
| > | ||
| - Install `@clerk/nuxt` | ||
| - Set your Clerk API keys | ||
| - Configure `nuxt.config.ts` | ||
| - Create a header with Clerk components | ||
| - Protect your API routes | ||
| </TutorialHero> | ||
|
|
||
| <Steps> | ||
| ## Install `@clerk/nuxt` | ||
|
|
||
| Clerk's [Nuxt SDK](/docs/references/nuxt/overview) gives you access to prebuilt components, Vue composables, and helpers to make user authentication easier. | ||
|
|
||
| Run the following command to install the SDK: | ||
|
|
||
| <CodeBlockTabs options={["npm", "yarn", "pnpm" ]}> | ||
| ```bash {{ filename: 'terminal' }} | ||
| npm install @clerk/nuxt | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| yarn add @clerk/nuxt | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| pnpm add @clerk/nuxt | ||
| ``` | ||
| </CodeBlockTabs> | ||
|
|
||
| ## Set your Clerk API keys | ||
|
|
||
| <SignedIn> | ||
| Add the following keys to your `.env` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in your Clerk Dashboard. | ||
| </SignedIn> | ||
|
|
||
| <SignedOut> | ||
| 1. In the Clerk Dashboard, navigate to the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page. | ||
| 1. In the **Quick Copy** section, copy your Clerk publishable and secret key. | ||
| 1. Paste your key into your `.env` file. | ||
|
|
||
| The final result should resemble the following: | ||
| </SignedOut> | ||
|
|
||
| ```env {{ filename: '.env' }} | ||
| NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY={{pub_key}} | ||
| NUXT_CLERK_SECRET_KEY={{secret}} | ||
| ``` | ||
|
|
||
| ## Configure `nuxt.config.ts` | ||
|
|
||
| To enable Clerk in your Nuxt app, add `@clerk/nuxt` to your modules array in `nuxt.config.ts`. This automatically configures Clerk's middleware and plugins and imports Clerk's components. | ||
|
|
||
| ```ts {{ filename: 'nuxt.config.ts', mark: [2] }} | ||
| export default defineNuxtConfig({ | ||
| modules: ['@clerk/nuxt'], | ||
| }) | ||
| ``` | ||
|
|
||
| ## Create a header with Clerk components | ||
|
|
||
| Nuxt 3 automatically imports and makes all components in the `components/` directory globally available without requiring explicit imports. See the [Nuxt docs](https://nuxt.com/docs/guide/concepts/auto-imports) for details. | ||
|
|
||
| You can control which content signed-in and signed-out users can see with Clerk's [prebuilt control components](/docs/components/overview#what-are-control-components). | ||
|
|
||
| The following example creates a header using the following components: | ||
|
|
||
| - [`<SignedIn>`](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. | ||
| - [`<SignedOut>`](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. | ||
| - [`<UserButton />`](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. | ||
| - [`<SignInButton />`](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal. In this example, since no props or [environment variables](/docs/deployments/clerk-environment-variables) are set for the sign-in URL, this component links to the [Account Portal sign-in page](/docs/customization/account-portal/overview#sign-in). | ||
|
|
||
| ```vue {{ filename: 'app.vue', mark: [2, [6, 13]] }} | ||
| <script setup lang="ts"> | ||
| // Components are automatically imported | ||
| </script> | ||
| <template> | ||
| <header> | ||
| <SignedOut> | ||
| <SignInButton /> | ||
| </SignedOut> | ||
| <SignedIn> | ||
| <UserButton /> | ||
| </SignedIn> | ||
| </header> | ||
| <main> | ||
| <NuxtPage /> | ||
| </main> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Create your first user | ||
|
|
||
| Run your project with the following command: | ||
|
|
||
| <CodeBlockTabs options={["npm", "yarn", "pnpm"]}> | ||
| ```bash {{ filename: 'terminal' }} | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| yarn dev | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| pnpm dev | ||
| ``` | ||
| </CodeBlockTabs> | ||
|
|
||
| Visit your app's homepage at [`http://localhost:3000`](http://localhost:3000). Sign up to create your first user. | ||
| </Steps> | ||
|
|
||
| ## More resources | ||
|
|
||
| Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides. | ||
|
|
||
| <Cards> | ||
| - [Protect API routes using `clerkMiddleware()`](/docs/references/nuxt/clerk-middleware) | ||
| - Learn how to protect specific API routes from unauthenticated users. | ||
|
|
||
| --- | ||
|
|
||
| - [Read session and user data](/docs/references/nuxt/read-session-data) | ||
| - Learn how to use Clerk's composables and helpers to access the active session and user data in your Nuxt app. | ||
|
|
||
| --- | ||
|
|
||
| - [Client-side helpers](/docs/references/nuxt/overview#client-side-helpers) | ||
| - Learn more about Nuxt client-side helpers and how to use them. | ||
|
|
||
| --- | ||
|
|
||
| - [Clerk + Nuxt Quickstart Repo](https://github.com/clerk/clerk-nuxt-quickstart) | ||
| - The official companion repo for Clerk's Nuxt Quickstart. | ||
| </Cards> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.