feat(vue,nuxt): Add Vue and Nuxt SDK docs (#1710)

Co-authored-by: victoria <[email protected]> Co-authored-by: Alexis Aguilar <[email protected]> Co-authored-by: Brad Cornes <[email protected]>
clerk · Dec 20, 2024 · 0c43cde · 0c43cde
1 parent e3bbf77
commit 0c43cde
Show file tree

Hide file tree

Showing 24 changed files with 1,543 additions and 14 deletions.
diff --git a/docs/_partials/vue-nuxt/composables.mdx b/docs/_partials/vue-nuxt/composables.mdx
@@ -0,0 +1,8 @@
+- [`useUser()`](/docs/references/vue/use-user)
+- [`useClerk()`](/docs/references/vue/use-clerk)
+- [`useAuth()`](/docs/references/vue/use-auth)
+- [`useSignIn()`](/docs/references/vue/use-sign-in)
+- [`useSignUp()`](/docs/references/vue/use-sign-up)
+- [`useSession()`](/docs/references/vue/use-session)
+- [`useSessionList()`](/docs/references/vue/use-session-list)
+- [`useOrganization()`](/docs/references/vue/use-organization)
diff --git a/docs/_partials/vue-nuxt/use-auth.mdx b/docs/_partials/vue-nuxt/use-auth.mdx
@@ -0,0 +1,15 @@
+The `useAuth()` composable provides access to the current user's 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>
+```
diff --git a/docs/index.mdx b/docs/index.mdx
@@ -84,6 +84,18 @@ 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.
   - {<svg viewBox="0 0 32 32"><path fill="#F44250" d="M25.6 15.568a3.196 3.196 0 0 1-3.2 3.19 3.193 3.193 0 0 0-3.2 3.189 3.196 3.196 0 0 1-3.2 3.19 3.193 3.193 0 0 1-2.263-.935 3.172 3.172 0 0 1-.937-2.255 3.193 3.193 0 0 1 3.2-3.19 3.196 3.196 0 0 0 3.2-3.189 3.194 3.194 0 0 0-3.2-3.19 3.193 3.193 0 0 1-3.2-3.189A3.193 3.193 0 0 1 16 6c1.767.001 3.2 1.429 3.2 3.19a3.193 3.193 0 0 0 3.2 3.19c1.768 0 3.2 1.427 3.2 3.19Z"/><path style={{ fill: 'var(--light, #121212) var(--dark, #fff)' }} d="M12.8 15.568a3.195 3.195 0 0 0-3.2-3.19 3.195 3.195 0 0 0-3.2 3.19 3.195 3.195 0 0 0 3.2 3.19c1.767 0 3.2-1.428 3.2-3.19ZM6.4 21.947a3.195 3.195 0 0 0-3.2-3.19 3.195 3.195 0 0 0-3.2 3.19 3.195 3.195 0 0 0 3.2 3.19c1.767 0 3.2-1.429 3.2-3.19ZM32 21.947a3.195 3.195 0 0 0-3.2-3.19 3.195 3.195 0 0 0-3.2 3.19 3.195 3.195 0 0 0 3.2 3.19c1.767 0 3.2-1.429 3.2-3.19Z"/></svg>}
+
+  ---
+
+  - [Nuxt](/docs/quickstarts/nuxt)
+  - Easily add secure, beautiful, and fast authentication to Nuxt with Clerk.
+  - {<svg viewBox="0 0 300 300"><path fill="#00DC82" d="M168 250h111c3.542 0 6.932-1.244 10-3 3.068-1.756 6.23-3.959 8-7 1.77-3.041 3.002-6.49 3-10.001-.002-3.511-1.227-6.959-3-9.998L222 91c-1.77-3.04-3.933-5.245-7-7s-7.458-3-11-3-6.933 1.245-10 3-5.23 3.96-7 7l-19 33-38-64.002c-1.772-3.04-3.932-6.243-7-7.998s-6.458-2-10-2-6.932.245-10 2c-3.068 1.755-6.228 4.958-8 7.998L2 220c-1.773 3.039-1.998 6.487-2 9.998-.002 3.511.23 6.96 2 10.001 1.77 3.04 4.932 5.244 8 7 3.068 1.756 6.458 3 10 3h70c27.737 0 47.925-12.442 62-36l34-59 18-31 55 94h-73l-18 32Zm-79-32H40l73-126 37 63-24.509 42.725C116.144 213.01 105.488 218 89 218Z"/></svg>}
+
+  ---
+
+  - [Vue](/docs/quickstarts/vue)
+  - Get started installing and initializing Clerk in a new Vue + Vite app.
+  - {<svg viewBox="0 0 196.32 170.02"><path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z"/><path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z"/></svg>}
 </Cards>
 
 ## Explore by backend framework

diff --git a/docs/manifest.json b/docs/manifest.json
@@ -51,6 +51,11 @@
                     "tag": "(Beta)",
                     "href": "/docs/quickstarts/tanstack-start",
                     "icon": "tanstack"
+                  },
+                  {
+                    "title": "Nuxt",
+                    "href": "/docs/quickstarts/nuxt",
+                    "icon": "nuxt"
                   }
                 ]
               ]
@@ -81,7 +86,8 @@
                   {
                     "title": "Chrome Extension",
                     "href": "/docs/quickstarts/chrome-extension"
-                  }
+                  },
+                  { "title": "Vue", "href": "/docs/quickstarts/vue", "icon": "vue" }
                 ]
               ]
             },
@@ -710,10 +716,6 @@
                           "title": "Organization workspaces",
                           "href": "/docs/organizations/organization-workspaces"
                         },
-                        {
-                          "title": "Use organization slugs in URLs",
-                          "href": "/docs/organizations/org-slugs-in-urls"
-                        },
                         {
                           "title": "Create organizations on behalf of users",
                           "href": "/docs/organizations/create-orgs-for-users"
@@ -1829,7 +1831,7 @@
                     ]
                   },
                   {
-                    "title": "General References",
+                    "title": "General references",
                     "items": [
                       [
                         {
@@ -1915,7 +1917,7 @@
                     "href": "/docs/references/react/overview"
                   },
                   {
-                    "title": "Client-side Helpers",
+                    "title": "Client-side helpers",
                     "items": [
                       [
                         {
@@ -2470,7 +2472,7 @@
                     ]
                   },
                   {
-                    "title": "General References",
+                    "title": "General references",
                     "items": [
                       [
                         {
@@ -2631,7 +2633,7 @@
                     ]
                   },
                   {
-                    "title": "General Reference",
+                    "title": "General references",
                     "items": [
                       [
                         {
@@ -2653,7 +2655,7 @@
                     ]
                   },
                   {
-                    "title": "Client-side Helpers",
+                    "title": "Client-side helpers",
                     "items": [
                       [
                         {
@@ -2702,6 +2704,113 @@
                 ]
               ]
             },
+            {
+              "title": "Nuxt",
+              "collapse": true,
+              "icon": "nuxt",
+              "items": [
+                [
+                  { "title": "Overview", "href": "/docs/references/nuxt/overview" },
+                  {
+                    "title": "Guides",
+                    "items": [
+                      [
+                        {
+                          "title": "Read session and user data",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/read-session-data"
+                        },
+                        {
+                          "title": "Protect pages",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/protect-pages"
+                        }
+                      ]
+                    ]
+                  },
+                  {
+                    "title": "General references",
+                    "items": [
+                      [
+                        {
+                          "title": "`clerkMiddleware()`",
+                          "wrap": false,
+                          "href": "/docs/references/nuxt/clerk-middleware"
+                        }
+                      ]
+                    ]
+                  }
+                ]
+              ]
+            },
+            {
+              "title": "Vue",
+              "collapse": true,
+              "icon": "vue",
+              "items": [
+                [
+                  { "title": "Overview", "href": "/docs/references/vue/overview" },
+                  {
+                    "title": "Guides",
+                    "items": [
+                      [
+                        {
+                          "title": "Migrating from community SDK",
+                          "href": "/docs/references/vue/migrating-from-vue-community-sdk"
+                        }
+                      ]
+                    ]
+                  },
+                  {
+                    "title": "Client-side helpers",
+                    "items": [
+                      [
+                        {
+                          "title": "`useUser()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-user"
+                        },
+                        {
+                          "title": "`useClerk()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-clerk"
+                        },
+                        {
+                          "title": "`useAuth()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-auth"
+                        },
+                        {
+                          "title": "`useSignIn()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-sign-in"
+                        },
+                        {
+                          "title": "`useSignUp`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-sign-up"
+                        },
+                        {
+                          "title": "`useSession()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-session"
+                        },
+                        {
+                          "title": "`useSessionList()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-session-list"
+                        },
+                        {
+                          "title": "`useOrganization()`",
+                          "wrap": false,
+                          "href": "/docs/references/vue/use-organization"
+                        }
+                      ]
+                    ]
+                  }
+                ]
+              ]
+            },
             {
               "title": "Ruby / Rails",
               "collapse": true,

diff --git a/docs/manifest.schema.json b/docs/manifest.schema.json
@@ -139,7 +139,8 @@
         "user-dotted-circle",
         "vue",
         "x",
-        "expo"
+        "expo",
+        "nuxt"
       ]
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -139,7 +139,8 @@ @@
             "user-dotted-circle",
             "vue",
             "x",
-            "expo"
+            "expo",
+            "nuxt"
           ]
         }
       }
@@ Expand Down @@