# 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.

filename: pages/sign-in.vue
```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.

filename: server/api/me.ts
```ts
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](https://clerk.com/docs/quickstarts/vue.md) and [Nuxt Quickstart guide](https://clerk.com/docs/quickstarts/nuxt.md).

We extend our gratitude to all contributors of the previous [community SDK for Vue](https://github.com/wobsoriano/vue-clerk), which served as the foundation for these official releases.