From ab67e77b2960515c7b52bf3aa949e044d301d8a3 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 14 Nov 2024 13:11:44 -0800 Subject: [PATCH 01/13] docs(vue): Add quickstart links --- docs/manifest.json | 3 +- docs/quickstarts/vue.mdx | 215 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+), 1 deletion(-) create mode 100644 docs/quickstarts/vue.mdx diff --git a/docs/manifest.json b/docs/manifest.json index e702e9ae58..4acf51e2b1 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -51,7 +51,8 @@ "tag": "(Beta)", "href": "/docs/quickstarts/tanstack-start", "icon": "tanstack" - } + }, + { "title": "Astro", "tag": "(Beta)", "href": "/docs/quickstarts/vue", "icon": "vue" } ] ] }, diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx new file mode 100644 index 0000000000..192867e4f7 --- /dev/null +++ b/docs/quickstarts/vue.mdx @@ -0,0 +1,215 @@ +--- +title: Vue Quickstart +description: Add authentication and user management to your Vue app with Clerk. +--- + + + - Create a new Vue app using Vite + - Install `@clerk/vue` + - Set your Clerk API keys + - Add `` + - Create a header with Clerk components for users to sign in and out + + + + ### Create a React app using Vite + + Run the following commands to create a new React app using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project): + + + ```bash {{ filename: 'terminal' }} + npm create vite@latest clerk-react -- --template react-ts + cd clerk-react + npm install + npm run dev + ``` + + ```bash {{ filename: 'terminal' }} + yarn create vite clerk-react --template react-ts + cd clerk-react + yarn install + yarn dev + ``` + + ```bash {{ filename: 'terminal' }} + pnpm create vite clerk-react --template react-ts + cd clerk-react + pnpm install + pnpm dev + ``` + + + ### Install `@clerk/clerk-react` + + Clerk's [React SDK](/docs/references/react/overview) gives you access to prebuilt components, hooks, and helpers to make user authentication easier. + + Run the following command to install the SDK: + + + ```bash {{ filename: 'terminal' }} + npm install @clerk/clerk-react + ``` + + ```bash {{ filename: 'terminal' }} + yarn add @clerk/clerk-react + ``` + + ```bash {{ filename: 'terminal' }} + pnpm add @clerk/clerk-react + ``` + + + ### Set your Clerk API keys + + + Add your Clerk publishable key to your `.env.local` file. It can always be retrieved from the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page of your Clerk Dashboard. + + + + 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: + + + ```env {{ filename: '.env.local' }} + VITE_CLERK_PUBLISHABLE_KEY={{pub_key}} + ``` + + ### Import the Clerk publishable key + + In your `main.tsx` file, import your Clerk publishable key. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the app without the publishable key, and will also prevent TypeScript errors. + + ```tsx {{ filename: 'src/main.tsx', mark: [[6, 7], [9, 11]] }} + import React from 'react' + import ReactDOM from 'react-dom/client' + import App from './App.tsx' + import './index.css' + + // Import your publishable key + 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') + } + + ReactDOM.createRoot(document.getElementById('root')!).render( + + + , + ) + ``` + + ### Add `` to your app + + The [``](/docs/components/clerk-provider) component wraps your app to provide active session and user context to Clerk's hooks and other components. You must pass your publishable key as a prop to the `` component. + + ```tsx {{ filename: 'src/main.tsx', mark: [5, 16, 18] }} + import React from 'react' + import ReactDOM from 'react-dom/client' + import App from './App.tsx' + import './index.css' + import { ClerkProvider } from '@clerk/clerk-react' + + // Import your publishable key + 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') + } + + ReactDOM.createRoot(document.getElementById('root')!).render( + + + + + , + ) + ``` + + ### Create a header with Clerk components + + You can control which content signed-in and signed-out users can see with the [prebuilt control components](/docs/components/overview#what-are-control-components). Create a header using the following components: + + - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. + - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. + - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. + - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal. + + ```tsx {{ filename: 'src/App.tsx', mark: [1, [6, 11]] }} + import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react' + + export default function App() { + return ( +
+ + + + + + +
+ ) + } + ``` + + ### Create your first user + + Run your project with the following command: + + + ```bash {{ filename: 'terminal' }} + npm run dev + ``` + + ```bash {{ filename: 'terminal' }} + yarn dev + ``` + + ```bash {{ filename: 'terminal' }} + pnpm dev + ``` + + + Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user. + + +## Next step: Add routing with React Router + +React has many options for handling routing, and you are free to choose the option that suits you best. If you would like to learn how to integrate React Router's latest Data API-based router (also known as Data Router), see [the dedicated guide.](/docs/references/react/add-react-router) + +## More resources + +Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides. + + + - [Prebuilt components](/docs/components/overview) + - Learn more about Clerk's suite of components that let you quickly add authentication to your app. + + --- + + - [Customization & localization](/docs/customization/overview) + - Learn how to customize and localize Clerk components. + + --- + + - [Client-side helpers (hooks)](/docs/references/react/use-user) + - Learn more about Clerk's client-side helpers and how to use them. + From 3e94220f50cd3e4935c06a7aa85fb0c7edc12206 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 14 Nov 2024 13:35:54 -0800 Subject: [PATCH 02/13] docs(vue): Add quickstart page --- docs/manifest.json | 6 +-- docs/quickstarts/vue.mdx | 108 +++++++++++++++++---------------------- 2 files changed, 49 insertions(+), 65 deletions(-) diff --git a/docs/manifest.json b/docs/manifest.json index 4acf51e2b1..e37219831b 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -51,8 +51,7 @@ "tag": "(Beta)", "href": "/docs/quickstarts/tanstack-start", "icon": "tanstack" - }, - { "title": "Astro", "tag": "(Beta)", "href": "/docs/quickstarts/vue", "icon": "vue" } + } ] ] }, @@ -82,7 +81,8 @@ { "title": "Chrome Extension", "href": "/docs/quickstarts/chrome-extension" - } + }, + { "title": "Vue", "tag": "(Beta)", "href": "/docs/quickstarts/vue", "icon": "vue" } ] ] }, diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 192867e4f7..7f71dc8402 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -4,7 +4,7 @@ description: Add authentication and user management to your Vue app with Clerk. --- ` + - Add `clerkPlugin` - Create a header with Clerk components for users to sign in and out - ### Create a React app using Vite + ### Create a Vue app using Vite - Run the following commands to create a new React app using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project): + Run the following commands to create a new Vue app using [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project): ```bash {{ filename: 'terminal' }} - npm create vite@latest clerk-react -- --template react-ts - cd clerk-react + npm create vite@latest clerk-vue -- --template vue-ts + cd clerk-vue npm install npm run dev ``` ```bash {{ filename: 'terminal' }} - yarn create vite clerk-react --template react-ts - cd clerk-react + yarn create vite clerk-vue --template vue-ts + cd clerk-vue yarn install yarn dev ``` ```bash {{ filename: 'terminal' }} - pnpm create vite clerk-react --template react-ts - cd clerk-react + pnpm create vite clerk-vue --template vue-ts + cd clerk-vue pnpm install pnpm dev ``` - ### Install `@clerk/clerk-react` + ### Install `@clerk/vue` - Clerk's [React SDK](/docs/references/react/overview) gives you access to prebuilt components, hooks, and helpers to make user authentication easier. + 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: ```bash {{ filename: 'terminal' }} - npm install @clerk/clerk-react + npm install @clerk/vue ``` ```bash {{ filename: 'terminal' }} - yarn add @clerk/clerk-react + yarn add @clerk/vue ``` ```bash {{ filename: 'terminal' }} - pnpm add @clerk/clerk-react + pnpm add @clerk/vue ``` @@ -95,53 +95,41 @@ description: Add authentication and user management to your Vue app with Clerk. ### Import the Clerk publishable key - In your `main.tsx` file, import your Clerk publishable key. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the app without the publishable key, and will also prevent TypeScript errors. + In your `main.ts` file, import your Clerk publishable key. You can add an `if` statement to check that it is imported and that it exists. This will prevent running the app without the publishable key, and will also prevent TypeScript errors. - ```tsx {{ filename: 'src/main.tsx', mark: [[6, 7], [9, 11]] }} - import React from 'react' - import ReactDOM from 'react-dom/client' - import App from './App.tsx' - import './index.css' + ```tsx {{ filename: 'src/main.ts', mark: [5, [7, 9]] }} + import { createApp } from 'vue' + import './style.css' + import App from './App.vue' - // Import your publishable key 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') } - ReactDOM.createRoot(document.getElementById('root')!).render( - - - , - ) + createApp(App).mount('#app') ``` - ### Add `` to your app + ### Add `clerkPlugin` to your app - The [``](/docs/components/clerk-provider) component wraps your app to provide active session and user context to Clerk's hooks and other components. You must pass your publishable key as a prop to the `` component. + The `clerkPlugin` provides active session and user context to Clerk's composables and components. You must pass your publishable key as an option when adding the plugin. - ```tsx {{ filename: 'src/main.tsx', mark: [5, 16, 18] }} - import React from 'react' - import ReactDOM from 'react-dom/client' - import App from './App.tsx' - import './index.css' - import { ClerkProvider } from '@clerk/clerk-react' + ```ts {{ filename: 'src/main.tsx', mark: [4, [12, 14]] }} + import { createApp } from 'vue' + import './style.css' + import App from './App.vue' + import { clerkPlugin } from '@clerk/vue' - // Import your publishable key 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') } - ReactDOM.createRoot(document.getElementById('root')!).render( - - - - - , - ) + const app = createApp(App) + app.use(clerkPlugin, { publishableKey: PUBLISHABLE_KEY }) + app.mount('#app') ``` ### Create a header with Clerk components @@ -153,21 +141,21 @@ description: Add authentication and user management to your Vue app with Clerk. - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. - [``](/docs/components/unstyled/sign-in-button): An unstyled component that links to the sign-in page or displays the sign-in modal. - ```tsx {{ filename: 'src/App.tsx', mark: [1, [6, 11]] }} - import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react' - - export default function App() { - return ( -
- - - - - - -
- ) - } + ```vue {{ filename: 'src/App.vue', mark: [2, [7, 12]] }} + + + ``` ### Create your first user @@ -191,10 +179,6 @@ description: Add authentication and user management to your Vue app with Clerk. Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user. -## Next step: Add routing with React Router - -React has many options for handling routing, and you are free to choose the option that suits you best. If you would like to learn how to integrate React Router's latest Data API-based router (also known as Data Router), see [the dedicated guide.](/docs/references/react/add-react-router) - ## More resources Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides. From 404aee8d90c5e44e8f99b9bd90ebb6de1e432ba6 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 14 Nov 2024 13:36:28 -0800 Subject: [PATCH 03/13] docs(vue): Fix extension --- docs/quickstarts/vue.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 7f71dc8402..2a2fc596e8 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -115,7 +115,7 @@ description: Add authentication and user management to your Vue app with Clerk. The `clerkPlugin` provides active session and user context to Clerk's composables and components. You must pass your publishable key as an option when adding the plugin. - ```ts {{ filename: 'src/main.tsx', mark: [4, [12, 14]] }} + ```ts {{ filename: 'src/main.ts', mark: [4, [12, 14]] }} import { createApp } from 'vue' import './style.css' import App from './App.vue' From 2c4f941d0de9033d6f6ea298641abc5888546c9d Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 14 Nov 2024 13:55:57 -0800 Subject: [PATCH 04/13] docs(vue): Replace hooks with composables --- docs/manifest.json | 2 +- docs/quickstarts/vue.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/manifest.json b/docs/manifest.json index e37219831b..6d2cb7453f 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -82,7 +82,7 @@ "title": "Chrome Extension", "href": "/docs/quickstarts/chrome-extension" }, - { "title": "Vue", "tag": "(Beta)", "href": "/docs/quickstarts/vue", "icon": "vue" } + { "title": "Vue", "href": "/docs/quickstarts/vue", "icon": "vue" } ] ] }, diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 2a2fc596e8..563c7b0cef 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -194,6 +194,6 @@ Learn more about Clerk components, how to customize them, and how to use Clerk's --- - - [Client-side helpers (hooks)](/docs/references/react/use-user) + - [Client-side helpers (composables)](/docs/references/react/use-user) - Learn more about Clerk's client-side helpers and how to use them. From 5ef7be5c5d0e4d52ff3e3b3e6034954686863fea Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 14 Nov 2024 13:58:53 -0800 Subject: [PATCH 05/13] docs(vue): Remove dead link --- docs/quickstarts/vue.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 563c7b0cef..54b181468d 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -57,7 +57,7 @@ description: Add authentication and user management to your Vue app with Clerk. ### 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. + Clerk's Vue SDK gives you access to prebuilt components, composables, and helpers to make user authentication easier. Run the following command to install the SDK: From 9942d8a3359ef6f6a524bc10c0e60741a201c2d1 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 14 Nov 2024 14:01:32 -0800 Subject: [PATCH 06/13] docs(vue): Make it clear what clerkPlugin is --- docs/quickstarts/vue.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 54b181468d..1566cf36a9 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -113,7 +113,7 @@ description: Add authentication and user management to your Vue app with Clerk. ### Add `clerkPlugin` to your app - The `clerkPlugin` provides active session and user context to Clerk's composables and components. You must pass your publishable key as an option when adding the plugin. + The `clerkPlugin` Vue plugin provides active session and user context to Clerk's composables and components. You must pass your publishable key as an option when adding the plugin. ```ts {{ filename: 'src/main.ts', mark: [4, [12, 14]] }} import { createApp } from 'vue' From 209ad4143ccc6af078c1b41060bbf271a51686ae Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Wed, 20 Nov 2024 13:41:59 -0800 Subject: [PATCH 07/13] docs(vue): add homepage entrypoint --- docs/index.mdx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/index.mdx b/docs/index.mdx index 554829ae3a..bb5a6d1720 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -84,6 +84,11 @@ Find all the guides and resources you need to develop with Clerk. - [React Router (Beta)](/docs/quickstarts/react-router) - Easily add secure, edge- and SSR-friendly authentication to React Router with Clerk. - {} + --- + + - [Vue](/docs/quickstarts/vue) + - Get started installing and initializing Clerk in a new Vue Vite App. + - {} ## Explore by backend framework From ab5cb8693c78d1face73856b2077b2f631694071 Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 21 Nov 2024 10:27:42 -0800 Subject: [PATCH 08/13] docs(vue): Add Vue svgs --- docs/quickstarts/overview.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/quickstarts/overview.mdx b/docs/quickstarts/overview.mdx index 498b62fe6f..aa4161991a 100644 --- a/docs/quickstarts/overview.mdx +++ b/docs/quickstarts/overview.mdx @@ -65,6 +65,12 @@ description: See the getting started guides and tutorials. - [Chrome Extension](/docs/quickstarts/chrome-extension) - Use the Chome Extension SDK to authenticate users in your Chrome extension. - {} + + --- + + - [Vue](/docs/quickstarts/vue) + - Easily add secure, beautiful, and fast authentication to your Vue application with Clerk. + - {} ## Backend From 2723ce12a14516255e5a6a847e9092d5d517a2da Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Thu, 21 Nov 2024 10:40:44 -0800 Subject: [PATCH 09/13] docs(vue): Reword new Vite Vue app --- docs/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/index.mdx b/docs/index.mdx index bb5a6d1720..a35b23841e 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -87,7 +87,7 @@ Find all the guides and resources you need to develop with Clerk. --- - [Vue](/docs/quickstarts/vue) - - Get started installing and initializing Clerk in a new Vue Vite App. + - Get started installing and initializing Clerk in a new Vite Vue App. - {} From 2aa145e8653e476e604fc52a91a48b7d363414e7 Mon Sep 17 00:00:00 2001 From: vi Date: Thu, 12 Dec 2024 14:04:09 -0500 Subject: [PATCH 10/13] update --- docs/quickstarts/vue.mdx | 42 ++++++++++++++-------------------------- 1 file changed, 15 insertions(+), 27 deletions(-) diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 1566cf36a9..883de84c82 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -17,6 +17,11 @@ description: Add authentication and user management to your Vue app with Clerk. title: "Set up a Clerk application", link: "/docs/quickstarts/setup-clerk", icon: "clerk", + }, + { + title: "Create a Vue app using Vite", + link: "https://vitejs.dev/guide/#scaffolding-your-first-vite-project", + icon: "vite", } ]} > @@ -24,9 +29,11 @@ description: Add authentication and user management to your Vue app with Clerk. - Install `@clerk/vue` - Set your Clerk API keys - Add `clerkPlugin` - - Create a header with Clerk components for users to sign in and out + - Create a header with Clerk components +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/). + ### Create a Vue app using Vite @@ -78,12 +85,12 @@ description: Add authentication and user management to your Vue app with Clerk. ### Set your Clerk API keys - Add your Clerk publishable key to your `.env.local` file. It can always be retrieved from the [**API Keys**](https://dashboard.clerk.com/last-active?path=api-keys) page of your Clerk Dashboard. + 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. 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. 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: @@ -93,9 +100,9 @@ description: Add authentication and user management to your Vue app with Clerk. VITE_CLERK_PUBLISHABLE_KEY={{pub_key}} ``` - ### Import the Clerk publishable 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 it is imported and that it exists. This will prevent running the app without the publishable key, and will also prevent TypeScript errors. + 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' @@ -105,7 +112,7 @@ description: Add authentication and user management to your Vue app with Clerk. 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') + throw new Error('Add your Clerk Publishable Key to the .env.local file') } createApp(App).mount('#app') @@ -113,7 +120,7 @@ description: Add authentication and user management to your Vue app with Clerk. ### Add `clerkPlugin` to your app - The `clerkPlugin` Vue plugin provides active session and user context to Clerk's composables and components. You must pass your publishable key as an option when adding the plugin. + The `clerkPlugin` Vue plugin provides active session and user context to Clerk's components and composables. When adding the plugin, pass your Publishable Key as an option. ```ts {{ filename: 'src/main.ts', mark: [4, [12, 14]] }} import { createApp } from 'vue' @@ -124,7 +131,7 @@ description: Add authentication and user management to your Vue app with Clerk. 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') + throw new Error('Add your Clerk Publishable Key to the .env.local file') } const app = createApp(App) @@ -178,22 +185,3 @@ description: Add authentication and user management to your Vue app with Clerk. Visit your app's homepage at [`http://localhost:5173`](http://localhost:5173). Sign up to create your first user. - -## More resources - -Learn more about Clerk components, how to customize them, and how to use Clerk's client-side helpers using the following guides. - - - - [Prebuilt components](/docs/components/overview) - - Learn more about Clerk's suite of components that let you quickly add authentication to your app. - - --- - - - [Customization & localization](/docs/customization/overview) - - Learn how to customize and localize Clerk components. - - --- - - - [Client-side helpers (composables)](/docs/references/react/use-user) - - Learn more about Clerk's client-side helpers and how to use them. - From 82455cada1d3889b047d4389d70e9d1bdad83cd6 Mon Sep 17 00:00:00 2001 From: vi Date: Thu, 12 Dec 2024 14:09:09 -0500 Subject: [PATCH 11/13] remove link since the ref is in another pr --- docs/quickstarts/vue.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 883de84c82..95a07c07b5 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -32,7 +32,7 @@ description: Add authentication and user management to your Vue app with Clerk. - Create a header with Clerk components -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/). +Clerk's Vue SDK 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/). ### Create a Vue app using Vite From 67af3594dfbdea461d24cb5d4776ae8142cf1b6e Mon Sep 17 00:00:00 2001 From: wobsoriano Date: Fri, 13 Dec 2024 08:45:09 -0800 Subject: [PATCH 12/13] run format --- docs/index.mdx | 3 ++- docs/quickstarts/overview.mdx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index a35b23841e..7081a76ea8 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -84,8 +84,9 @@ Find all the guides and resources you need to develop with Clerk. - [React Router (Beta)](/docs/quickstarts/react-router) - Easily add secure, edge- and SSR-friendly authentication to React Router with Clerk. - {} + --- - + - [Vue](/docs/quickstarts/vue) - Get started installing and initializing Clerk in a new Vite Vue App. - {} diff --git a/docs/quickstarts/overview.mdx b/docs/quickstarts/overview.mdx index aa4161991a..a1c1dce056 100644 --- a/docs/quickstarts/overview.mdx +++ b/docs/quickstarts/overview.mdx @@ -67,7 +67,7 @@ description: See the getting started guides and tutorials. - {} --- - + - [Vue](/docs/quickstarts/vue) - Easily add secure, beautiful, and fast authentication to your Vue application with Clerk. - {} From 7002add6d831b69519d96f3a844eb1f210dcd7ad Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Fri, 13 Dec 2024 12:13:49 -0500 Subject: [PATCH 13/13] code review --- docs/index.mdx | 2 +- docs/quickstarts/vue.mdx | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/docs/index.mdx b/docs/index.mdx index 7081a76ea8..8684adb8c7 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -88,7 +88,7 @@ Find all the guides and resources you need to develop with Clerk. --- - [Vue](/docs/quickstarts/vue) - - Get started installing and initializing Clerk in a new Vite Vue App. + - Get started installing and initializing Clerk in a new Vue + Vite app. - {} diff --git a/docs/quickstarts/vue.mdx b/docs/quickstarts/vue.mdx index 95a07c07b5..62619796c0 100644 --- a/docs/quickstarts/vue.mdx +++ b/docs/quickstarts/vue.mdx @@ -17,11 +17,6 @@ description: Add authentication and user management to your Vue app with Clerk. title: "Set up a Clerk application", link: "/docs/quickstarts/setup-clerk", icon: "clerk", - }, - { - title: "Create a Vue app using Vite", - link: "https://vitejs.dev/guide/#scaffolding-your-first-vite-project", - icon: "vite", } ]} > @@ -32,7 +27,7 @@ description: Add authentication and user management to your Vue app with Clerk. - Create a header with Clerk components -Clerk's Vue SDK 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/). +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/). ### Create a Vue app using Vite @@ -64,7 +59,7 @@ Clerk's Vue SDK provides prebuilt components and composables to make it easy to ### Install `@clerk/vue` - Clerk's Vue SDK gives you access to prebuilt components, composables, and helpers to make user authentication easier. + 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: @@ -120,7 +115,7 @@ Clerk's Vue SDK provides prebuilt components and composables to make it easy to ### Add `clerkPlugin` to your app - The `clerkPlugin` Vue plugin provides active session and user context to Clerk's components and composables. When adding the plugin, pass your Publishable Key as an option. + `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' @@ -141,14 +136,14 @@ Clerk's Vue SDK provides prebuilt components and composables to make it easy to ### Create a header with Clerk components - You can control which content signed-in and signed-out users can see with the [prebuilt control components](/docs/components/overview#what-are-control-components). Create a header using the following 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: - [``](/docs/components/control/signed-in): Children of this component can only be seen while **signed in**. - [``](/docs/components/control/signed-out): Children of this component can only be seen while **signed out**. - [``](/docs/components/user/user-button): Shows the signed-in user's avatar. Selecting it opens a dropdown menu with account management options. - [``](/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, [7, 12]] }} + ```vue {{ filename: 'src/App.vue', mark: [2, [6, 13]] }}