Nuxt
Vue Clerk offers a Nuxt module that simplifies the integration of Clerk into your Nuxt application.
1. Install vue-clerk
and @clerk/backend
@clerk/backend
is used to interact with Clerk's Backend API and to add authentication utilities to your API routes.
npm install vue-clerk @clerk/backend
yarn add vue-clerk @clerk/backend
pnpm add vue-clerk @clerk/backend
2. Install module
In your nuxt.config.ts
file, add the vue-clerk/nuxt
module to the modules
array, and it will auto-import all components and composables for you.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['vue-clerk/nuxt'],
clerk: {
appearance: {},
}
})
3. Set your environment variables
Create a .env
file in the root of your project and add your Clerk environment variables:
NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
NUXT_CLERK_SECRET_KEY=
Full list of environment variables can be found here. Just replace NEXT
with NUXT
.
4. Add route middleware to protect routes
You can use the clerk:auth
middleware to protect pages while doing client side routing. You can also pass specific permission and role.
<script setup>
definePageMeta({
middleware: 'clerk:auth',
auth: {
navigateUnauthenticatedTo: '/sign-in',
// permission: 'org:invoices:create',
// role: 'org:billing'
// condition: (has) => has('org:invoices:create')
}
})
</script>
<template>
<h1>Authenticated only</h1>
</template>
For guest only pages, you can use the clerk:guest
middleware.
<script setup>
definePageMeta({ middleware: 'clerk:guest', auth: { navigateAuthenticatedTo: '/profile' } })
// navigateAuthenticatedTo will default to:
// 1. `navigateAuthenticatedTo` if set
// 1. NUXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL env variable if set
// 2. NUXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL if set and (1.) is not set
</script>
<template>
<h1>Guest only</h1>
</template>
5. Protect your API endpoints
To protect your routes, use the getAuth()
function in your event handlers. This function retrieves the authentication state from the event object returning an Auth
object that includes the userId
, allowing you to determine if the user is authenticated..
import { clerkClient, getAuth } from 'vue-clerk/server'
export default eventHandler((event) => {
const { userId } = getAuth(event)
if (!userId) {
setResponseStatus(event, 401)
return
}
return clerkClient(event).users.getUser(userId)
})
A complete example can be found here.