├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitignore ├── .npmrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bun.lockb ├── package.json ├── playground ├── app.vue ├── bun.lockb ├── nuxt.config.ts ├── package.json ├── server │ └── tsconfig.json └── tsconfig.json ├── pnpm-lock.yaml ├── src ├── module.ts ├── runtime │ └── plugin.ts └── types.ts ├── test ├── basic.test.ts └── fixtures │ └── basic │ ├── app.vue │ ├── nuxt.config.ts │ └── package.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": ["@nuxt/eslint-config"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .data 23 | .vercel_build_output 24 | .build-* 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | 4 | ## v0.0.9 5 | 6 | [compare changes](https://github.com/RodrigoProjects/nuxt-clerk/compare/v0.0.8...v0.0.9) 7 | 8 | ### 🚀 Enhancements 9 | 10 | - Decent README ([bf0956a](https://github.com/RodrigoProjects/nuxt-clerk/commit/bf0956a)) 11 | 12 | ### ❤️ Contributors 13 | 14 | - Rodrigo P 15 | 16 | ## v0.0.8 17 | 18 | [compare changes](https://github.com/RodrigoProjects/nuxt-clerk/compare/v0.0.7...v0.0.8) 19 | 20 | ## v0.0.7 21 | 22 | [compare changes](https://github.com/RodrigoProjects/nuxt-clerk/compare/v0.0.6...v0.0.7) 23 | 24 | ### 🩹 Fixes 25 | 26 | - Add dummy test ([5048089](https://github.com/RodrigoProjects/nuxt-clerk/commit/5048089)) 27 | 28 | ### ❤️ Contributors 29 | 30 | - Rodrigo P 31 | 32 | ## v0.0.6 33 | 34 | [compare changes](https://github.com/RodrigoProjects/nuxt-clerk/compare/v0.0.5...v0.0.6) 35 | 36 | ## v0.0.5 37 | 38 | [compare changes](https://github.com/RodrigoProjects/nuxt-clerk/compare/v0.0.4...v0.0.5) 39 | 40 | ## v0.0.4 41 | 42 | [compare changes](https://github.com/your-org/my-module/compare/v0.0.3...v0.0.4) 43 | 44 | ## v0.0.3 45 | 46 | [compare changes](https://github.com/your-org/my-module/compare/v0.0.2...v0.0.3) 47 | 48 | ## v0.0.2 49 | 50 | 51 | ### 🚀 Enhancements 52 | 53 | - Clerk module was born ([21181ff](https://github.com/your-org/my-module/commit/21181ff)) 54 | - Stable tsconfig and infer name and version from package.json ([ccdb1ba](https://github.com/your-org/my-module/commit/ccdb1ba)) 55 | - Bun lockfile ([d5322a8](https://github.com/your-org/my-module/commit/d5322a8)) 56 | - Initial release ([80efd2a](https://github.com/your-org/my-module/commit/80efd2a)) 57 | 58 | ### ❤️ Contributors 59 | 60 | - Rodrigo P 61 | 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Rodrigo Pimentel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | # nuxt-clerk 11 | 12 | [![npm version][npm-version-src]][npm-version-href] 13 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 14 | [![License][license-src]][license-href] 15 | [![Nuxt][nuxt-src]][nuxt-href] 16 | 17 | Clerk with Nuxt made quick! 18 | 19 | - [✨  Release Notes](/CHANGELOG.md) 20 | 21 | 22 | 23 | ## Features 24 | 25 | 26 | - Vue clerk 27 | - h3-clerk 28 | - tailwind 29 | 30 | ## Quick Setup 31 | 32 | 1. Add `nuxt-clerk` dependency to your project 33 | 34 | ```bash 35 | # Using pnpm 36 | pnpm add -D nuxt-clerk 37 | 38 | # Using yarn 39 | yarn add --dev nuxt-clerk 40 | 41 | # Using npm 42 | npm install --save-dev nuxt-clerk 43 | ``` 44 | 45 | 2. Add `nuxt-clerk` to the `modules` section of `nuxt.config.ts` 46 | 47 | ```js 48 | export default defineNuxtConfig({ 49 | modules: [ 50 | 'nuxt-clerk' 51 | ] 52 | }) 53 | ``` 54 | 55 | That's it! You can now use nuxt-clerk in your Nuxt app ✨ 56 | 57 | ## Development 58 | 59 | ```bash 60 | # Install dependencies 61 | npm install 62 | 63 | # Generate type stubs 64 | npm run dev:prepare 65 | 66 | # Develop with the playground 67 | npm run dev 68 | 69 | # Build the playground 70 | npm run dev:build 71 | 72 | # Run ESLint 73 | npm run lint 74 | 75 | # Run Vitest 76 | npm run test 77 | npm run test:watch 78 | 79 | # Release new version 80 | npm run release 81 | ``` 82 | 83 | 84 | [npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=18181B&colorB=28CF8D 85 | [npm-version-href]: https://npmjs.com/package/nuxt-clerk 86 | 87 | [npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D 88 | [npm-downloads-href]: https://npmjs.com/package/nuxt-clerk 89 | 90 | [license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=18181B&colorB=28CF8D 91 | [license-href]: https://npmjs.com/package/nuxt-clerk 92 | 93 | [nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js 94 | [nuxt-href]: https://nuxt.com 95 | -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoProjects/nuxt-clerk/5d0e6509b90a5340f8c5606cddec8009b4086507/bun.lockb -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-clerk", 3 | "version": "0.0.9", 4 | "description": "Clerk integration for nuxt made simple", 5 | "repository": { 6 | "type": "git", 7 | "url": "git+https://github.com/RodrigoProjects/nuxt-clerk.git" 8 | }, 9 | "publishConfig": { 10 | "access": "public" 11 | }, 12 | "license": "MIT", 13 | "type": "module", 14 | "exports": { 15 | ".": { 16 | "types": "./dist/types.d.ts", 17 | "import": "./dist/module.mjs", 18 | "require": "./dist/module.cjs" 19 | } 20 | }, 21 | "main": "./dist/module.cjs", 22 | "types": "./dist/types.d.ts", 23 | "files": [ 24 | "dist" 25 | ], 26 | "scripts": { 27 | "prepack": "nuxt-module-build build", 28 | "dev": "nuxi dev playground", 29 | "dev:build": "nuxi build playground", 30 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", 31 | "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags", 32 | "lint": "eslint .", 33 | "test": "vitest run", 34 | "test:watch": "vitest watch" 35 | }, 36 | "dependencies": { 37 | "@nuxt/kit": "^3.9.0", 38 | "@nuxtjs/tailwindcss": "^6.10.1", 39 | "h3-clerk": "^0.3.8", 40 | "vue-clerk": "^0.1.1" 41 | }, 42 | "devDependencies": { 43 | "@nuxt/devtools": "latest", 44 | "@nuxt/eslint-config": "^0.2.0", 45 | "@nuxt/module-builder": "^0.5.4", 46 | "@nuxt/schema": "^3.9.0", 47 | "@nuxt/test-utils": "^3.8.1", 48 | "@types/node": "^20.9.3", 49 | "changelogen": "^0.5.5", 50 | "eslint": "^8.54.0", 51 | "nuxt": "^3.9.0", 52 | "vitest": "^0.33.0" 53 | } 54 | } -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /playground/bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RodrigoProjects/nuxt-clerk/5d0e6509b90a5340f8c5606cddec8009b4086507/playground/bun.lockb -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module'], 3 | clerk: { 4 | vueClerk: { 5 | appearance: { 6 | variables: {colorPrimary: '#570DF8'}, 7 | } 8 | } 9 | }, 10 | devtools: {enabled: true}, 11 | runtimeConfig: { 12 | public: { 13 | clerkPublishableKey: '' 14 | } 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "my-module-playground", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate" 9 | }, 10 | "devDependencies": { 11 | "nuxt": "latest" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /playground/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { 2 | defineNuxtModule, 3 | addPlugin, 4 | createResolver, 5 | addTemplate, 6 | addImports, 7 | addComponent, 8 | installModule 9 | } from '@nuxt/kit' 10 | import {name, version} from '../package.json' 11 | import type {ModuleOptions} from './types' 12 | 13 | export default defineNuxtModule({ 14 | meta: { 15 | name, 16 | version, 17 | configKey: 'clerk', 18 | compatibility: { 19 | nuxt: '^3.0.0' 20 | } 21 | }, 22 | defaults: {}, 23 | async setup(options, nuxt) { 24 | const {resolve} = createResolver(import.meta.url) 25 | 26 | nuxt.options.build.transpile ||= [] 27 | nuxt.options.build.transpile.push('vue-clerk', '@clerk/clerk-js') 28 | 29 | addTemplate({ 30 | filename: 'nuxt-clerk.mjs', 31 | getContents: () => [ 32 | 'export default {', 33 | ` vueClerkConfig: ${options.vueClerk ? JSON.stringify(options.vueClerk) : 'null'}`, 34 | '}' 35 | ].join('\n') 36 | }) 37 | 38 | nuxt.options.alias['#nuxt-clerk'] = resolve(nuxt.options.buildDir, 'nuxt-clerk') 39 | 40 | // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack` 41 | addPlugin(resolve('./runtime/plugin')) 42 | 43 | addImports([ 44 | // Composables 45 | 'useAuth', 46 | 'useClerk', 47 | 'useSession', 48 | 'useSignIn', 49 | 'useSignUp', 50 | 'useUser' 51 | ].map(key => ({ 52 | name: key, 53 | from: '@vue-clerk' 54 | }))) 55 | 56 | const components = [ 57 | // UI Components 58 | 'SignIn', 59 | 'SignUp', 60 | 'SignInButton', 61 | 'SignOutButton', 62 | 'UserButton', 63 | 'UserProfile', 64 | // Control Components 65 | 'ClerkLoaded', 66 | 'ClerkLoading' 67 | ] 68 | 69 | components.forEach(key => addComponent({ 70 | name: key, 71 | export: key, 72 | filePath: 'vue-clerk' 73 | })) 74 | 75 | addImports([ 76 | 'withClerkAuth', 77 | 'withClerkMiddleware' 78 | ].map(key => ({ 79 | name: key, 80 | from: 'h3-clerk' 81 | }))) 82 | 83 | await installModule('@nuxtjs/tailwindcss', { 84 | exposeConfig: true, 85 | config: { 86 | darkMode: 'class', 87 | } 88 | } 89 | ) 90 | 91 | } 92 | }) 93 | 94 | declare module '@nuxt/schema' { 95 | interface NuxtConfig { 96 | ['clerk']?: Partial 97 | } 98 | 99 | interface NuxtOptions { 100 | ['clerk']?: ModuleOptions 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/runtime/plugin.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtPlugin } from '#app' 2 | import { clerkPlugin } from 'vue-clerk/plugin' 3 | import NuxtClerkModule from '#nuxt-clerk' 4 | 5 | export default defineNuxtPlugin(async (nuxtApp) => { 6 | const publishableKey = useRuntimeConfig().public.clerkPublishableKey as string; 7 | 8 | nuxtApp.vueApp.use(clerkPlugin, { 9 | publishableKey, 10 | options: NuxtClerkModule.vueClerkOptions, 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type ModuleOptions = { 2 | vueClerk?: Record 3 | } 4 | -------------------------------------------------------------------------------- /test/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { describe, it, expect } from 'vitest' 2 | import { fileURLToPath } from 'node:url' 3 | import { setup, $fetch } from '@nuxt/test-utils' 4 | 5 | describe('ssr', async () => { 6 | await setup({ 7 | rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)), 8 | }) 9 | 10 | it('renders the index page', async () => { 11 | // Make a better test 12 | expect(true).toBe(true) 13 | }) 14 | }) 15 | -------------------------------------------------------------------------------- /test/fixtures/basic/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | -------------------------------------------------------------------------------- /test/fixtures/basic/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import NuxtClerk from '../../../src/module' 2 | 3 | export default defineNuxtConfig({ 4 | modules: [ 5 | NuxtClerk 6 | ] 7 | }) 8 | -------------------------------------------------------------------------------- /test/fixtures/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "basic", 4 | "type": "module" 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./playground/.nuxt/tsconfig.json" 3 | } 4 | --------------------------------------------------------------------------------