feat(nuxt,vue): Introduce Nuxt SDK (#4541)

Co-authored-by: Lennart <[email protected]>

.changeset/cuddly-tools-live.md

@@ -0,0 +1,6 @@
+---
+"@clerk/nuxt": patch
+"@clerk/vue": patch
+---
+
+Introduce an experimental version of Clerk SDK for [Nuxt](https://nuxt.com)

.github/workflows/ci.yml

@@ -118,7 +118,7 @@ jobs:
         run: |
           if [ "${{ matrix.node-version }}" == "18" ]; then
             echo "Running tests on Node 18 only for packages with LTS support."
-            pnpm turbo test $TURBO_ARGS --filter="@clerk/astro" --filter="@clerk/backend" --filter="@clerk/express" --filter="@clerk/nextjs" --filter="@clerk/clerk-react" --filter="@clerk/clerk-sdk-node" --filter="@clerk/shared" --filter="@clerk/remix" --filter="@clerk/tanstack-start" --filter="@clerk/elements" --filter="@clerk/vue"
+            pnpm turbo test $TURBO_ARGS --filter="@clerk/astro" --filter="@clerk/backend" --filter="@clerk/express" --filter="@clerk/nextjs" --filter="@clerk/clerk-react" --filter="@clerk/clerk-sdk-node" --filter="@clerk/shared" --filter="@clerk/remix" --filter="@clerk/tanstack-start" --filter="@clerk/elements" --filter="@clerk/vue" --filter="@clerk/nuxt"
           else
             echo "Running tests for all packages on Node 20."
             pnpm turbo test $TURBO_ARGS

packages/nuxt/.eslintrc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ['@clerk/custom/browser', '@clerk/custom/typescript'],
+};

packages/nuxt/.gitignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules
+
+# Logs
+*.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
+dist
+
+# Nuxt
+.nuxt
+.output
+.data
+.vercel_build_output
+.build-*
+.netlify
+
+# Env
+.env
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

packages/nuxt/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Clerk, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/nuxt/README.md

@@ -0,0 +1,125 @@
+<p align="center">
+  <a href="https://clerk.com?utm_source=github&utm_medium=clerk_nuxt" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://images.clerk.com/static/logo-dark-mode-400x400.png">
+      <img src="https://images.clerk.com/static/logo-light-mode-400x400.png" height="64">
+    </picture>
+  </a>
+  <br />
+  <h1 align="center">@clerk/nuxt</h1>
+</p>
+
+<div align="center">
+
+[![Chat on Discord](https://img.shields.io/discord/856971667393609759.svg?logo=discord)](https://clerk.com/discord)
+[![Clerk documentation](https://img.shields.io/badge/documentation-clerk-green.svg)](https://clerk.com/docs?utm_source=github&utm_medium=clerk_nuxt)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/ClerkDev?style=social)](https://twitter.com/intent/follow?screen_name=ClerkDev)
+
+[Changelog](https://github.com/clerk/javascript/blob/main/packages/nuxt/CHANGELOG.md)
+·
+[Report a Bug](https://github.com/clerk/javascript/issues/new?assignees=&labels=needs-triage&projects=&template=BUG_REPORT.yml)
+·
+[Request a Feature](https://feedback.clerk.com/roadmap)
+·
+[Get help](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_nuxt)
+
+</div>
+
+[Clerk](https://clerk.com/?utm_source=github&utm_medium=clerk_nuxt) is the easiest way to add authentication and user management to your Vue application. Add sign up, sign in, and profile management to your application in minutes.
+
+### Prerequisites
+
+- Nuxt 3 or later
+- Node.js `>=18.17.0` or later
+- An existing Clerk application. [Create your account for free](https://dashboard.clerk.com/sign-up?utm_source=github&utm_medium=clerk_nuxt).
+
+### Installation
+
+Add `@clerk/nuxt` as a dependency
+
+```bash
+npm install @clerk/nuxt
+```
+
+### Build
+
+To build the package locally with the TypeScript compiler, run:
+
+```bash
+npm run build
+```
+
+## Usage
+
+Make sure the following environment variables are set in a `.env` file in your Nuxt project:
+
+```
+NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=[publishable-key]
+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 };
+});
+```
+
+## Support
+
+You can get in touch with us in any of the following ways:
+
+- Join our official community [Discord server](https://clerk.com/discord)
+- On [our support page](https://clerk.com/contact/support?utm_source=github&utm_medium=clerk_nuxt)
+
+## Contributing
+
+We're open to all community contributions! If you'd like to contribute in any way, please read [our contribution guidelines](https://github.com/clerk/javascript/blob/main/docs/CONTRIBUTING.md) and [code of conduct](https://github.com/clerk/javascript/blob/main/docs/CODE_OF_CONDUCT.md).
+
+## Security
+
+`@clerk/nuxt` follows good practices of security, but 100% security cannot be assured.
+
+`@clerk/nuxt` is provided **"as is"** without any **warranty**. Use at your own risk.
+
+_For more information and to report security issues, please refer to our [security documentation](https://github.com/clerk/javascript/blob/main/docs/SECURITY.md)._
+
+## License
+
+This project is licensed under the **MIT license**.
+
+See [LICENSE](https://github.com/clerk/javascript/blob/main/packages/vue/LICENSE) for more information.

packages/nuxt/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@clerk/nuxt",
+  "version": "0.0.0",
+  "description": "Clerk SDK for Nuxt",
+  "keywords": [
+    "clerk",
+    "typescript",
+    "vue",
+    "nuxt",
+    "auth",
+    "authentication",
+    "passwordless",
+    "session",
+    "jwt"
+  ],
+  "homepage": "https://clerk.com/",
+  "bugs": {
+    "url": "https://github.com/clerk/javascript/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/clerk/javascript.git",
+    "directory": "packages/nuxt"
+  },
+  "license": "MIT",
+  "author": "Clerk",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.js"
+    },
+    "./server": {
+      "types": "./dist/runtime/server/index.d.ts",
+      "import": "./dist/runtime/server/index.js"
+    }
+  },
+  "main": "./dist/module.js",
+  "types": "./dist/module.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src/",
+    "lint:attw": "attw --pack . --ignore-rules no-resolution cjs-resolves-to-esm",
+    "lint:publint": "publint",
+    "publish:local": "pnpm dlx yalc push --replace --sig"
+  },
+  "dependencies": {
+    "@clerk/backend": "1.16.4",
+    "@clerk/shared": "2.14.0",
+    "@clerk/types": "4.34.0",
+    "@clerk/vue": "0.0.4",
+    "@nuxt/kit": "^3.14.159",
+    "@nuxt/schema": "^3.14.159",
+    "h3": "^1.13.0"
+  },
+  "devDependencies": {
+    "nuxt": "^3.14.159",
+    "typescript": "*"
+  },
+  "engines": {
+    "node": ">=18.17.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/nuxt/src/global.d.ts

@@ -0,0 +1,2 @@
+declare const PACKAGE_NAME: string;
+declare const PACKAGE_VERSION: string;