Official SDK for Vue and Nuxt

We're excited to announce @clerk/vue and @clerk/nuxt, two new official SDKs that allow developers to add authentication and authorization into their Vue and Nuxt applications in a matter of minutes.

Both SDKs come fully equipped with Clerk's UI components, composables, and low-level utilities for your custom flows.

Use Clerk UI components

Clerk's pre-built UI components give you a beautiful, fully-functional user and organization management experience in minutes. Here's an example on how to use the <SignIn /> component in Vue.

<script setup>
import { SignIn } from '@clerk/vue'
</script>

<template>
  <SignIn />
</template>

Protect API routes

For Nuxt users, use the auth context to restrict unauthorized access to your API routes.

import { clerkClient } from '@clerk/nuxt/server'

export default eventHandler(async (event) => {
  const { userId } = event.context.auth

  if (!userId) {
    setResponseStatus(event, 401)
    return 'Unauthorized'
  }

  const user = await clerkClient(event).users.getUser(userId)

  return { user }
})

This is only a quick preview of all that @clerk/vue and @clerk/nuxt offer.

For more information on the available APIs and how to get started building Vue and Nuxt applications with Clerk, check out our Vue Quickstart guide and Nuxt Quickstart guide.

We extend our gratitude to all contributors of the previous community SDK for Vue⁠, which served as the foundation for these official releases.