-
Notifications
You must be signed in to change notification settings - Fork 500
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'rob/eco-224-vue-sdk-references' into rob/eco-224-vue-cl…
…ient-helpers
- Loading branch information
Showing
4 changed files
with
196 additions
and
1 deletion.
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
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 |
|---|---|---|
| @@ -0,0 +1,182 @@ | ||
| --- | ||
| title: Vue Quickstart | ||
| description: Add authentication and user management to your Vue app with Clerk. | ||
| --- | ||
|
|
||
| <TutorialHero | ||
| framework="vue" | ||
| exampleRepo={[ | ||
| { | ||
| title: "Vue Quickstart Repo", | ||
| link: "https://github.com/clerk/clerk-vue-quickstart" | ||
|
|
||
| } | ||
| ]} | ||
| beforeYouStart={[ | ||
| { | ||
| title: "Set up a Clerk application", | ||
| link: "/docs/quickstarts/setup-clerk", | ||
| icon: "clerk", | ||
| } | ||
| ]} | ||
| > | ||
| - Create a new Vue app using Vite | ||
| - Install `@clerk/vue` | ||
| - Set your Clerk API keys | ||
| - Add `clerkPlugin` | ||
| - Create a header with Clerk components | ||
| </TutorialHero> | ||
|
|
||
| Clerk's [Vue SDK](/docs/references/vue/overview) provides prebuilt components and composables to make it easy to integrate authentication and user management in your Vue app. This guide assumes that you're using [Vue 3](https://vuejs.org/) with [TypeScript](https://www.typescriptlang.org/). | ||
|
|
||
| <Steps> | ||
| ### Create a Vue app using Vite | ||
|
|
||
| Run the following commands to create a new Vue app using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project): | ||
|
|
||
| <CodeBlockTabs options={["npm", "yarn", "pnpm"]}> | ||
| ```bash {{ filename: 'terminal' }} | ||
| npm create vite@latest clerk-vue -- --template vue-ts | ||
| cd clerk-vue | ||
| npm install | ||
| npm run dev | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| yarn create vite clerk-vue --template vue-ts | ||
| cd clerk-vue | ||
| yarn install | ||
| yarn dev | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| pnpm create vite clerk-vue --template vue-ts | ||
| cd clerk-vue | ||
| pnpm install | ||
| pnpm dev | ||
| ``` | ||
| </CodeBlockTabs> | ||
|
|
||
| ### Install `@clerk/vue` | ||
|
|
||
| Clerk's [Vue SDK](/docs/references/vue/overview) gives you access to prebuilt components, 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/vue | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| yarn add @clerk/vue | ||
| ``` | ||
|
|
||
| ```bash {{ filename: 'terminal' }} | ||
| pnpm add @clerk/vue | ||
| ``` | ||
| </CodeBlockTabs> | ||
|
|
||
| ### Set your Clerk API keys | ||
|
|
||
| <SignedIn> | ||
| Add your Clerk Publishable Key to your `.env.local` file. This key can always be retrieved from the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page in the 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 Key. | ||
| 1. Paste your key into your `.env.local` file. | ||
|
|
||
| The final result should resemble the following: | ||
| </SignedOut> | ||
|
|
||
| ```env {{ filename: '.env.local' }} | ||
| VITE_CLERK_PUBLISHABLE_KEY={{pub_key}} | ||
| ``` | ||
|
|
||
| ### Import the Clerk Publishable Key | ||
|
|
||
| In your `main.ts` file, import your Clerk Publishable Key. You can add an `if` statement to check that the key is imported properly. This prevents the app from running without the Publishable Key and catches TypeScript errors. | ||
|
|
||
| ```tsx {{ filename: 'src/main.ts', mark: [5, [7, 9]] }} | ||
| import { createApp } from 'vue' | ||
| import './style.css' | ||
| import App from './App.vue' | ||
|
|
||
| const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY | ||
|
|
||
| if (!PUBLISHABLE_KEY) { | ||
| throw new Error('Add your Clerk Publishable Key to the .env.local file') | ||
| } | ||
|
|
||
| createApp(App).mount('#app') | ||
| ``` | ||
|
|
||
| ### Add `clerkPlugin` to your app | ||
|
|
||
| `clerkPlugin` provides active session and user context to Clerk's components and composables. It's required to pass your Publishable Key as an option. | ||
|
|
||
| ```ts {{ filename: 'src/main.ts', mark: [4, [12, 14]] }} | ||
| import { createApp } from 'vue' | ||
| import './style.css' | ||
| import App from './App.vue' | ||
| import { clerkPlugin } from '@clerk/vue' | ||
|
|
||
| const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY | ||
|
|
||
| if (!PUBLISHABLE_KEY) { | ||
| throw new Error('Add your Clerk Publishable Key to the .env.local file') | ||
| } | ||
|
|
||
| const app = createApp(App) | ||
| app.use(clerkPlugin, { publishableKey: PUBLISHABLE_KEY }) | ||
| app.mount('#app') | ||
| ``` | ||
|
|
||
| ### Create a header with Clerk components | ||
|
|
||
| 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. | ||
|
|
||
| ```vue {{ filename: 'src/App.vue', mark: [2, [6, 13]] }} | ||
| <script setup lang="ts"> | ||
| import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/vue' | ||
| </script> | ||
| <template> | ||
| <header> | ||
| <SignedOut> | ||
| <SignInButton /> | ||
| </SignedOut> | ||
| <SignedIn> | ||
| <UserButton /> | ||
| </SignedIn> | ||
| </header> | ||
| </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:5173`](http://localhost:5173). Sign up to create your first user. | ||
| </Steps> |