---
title: "@xid-kit/vue"
description: "@xid-kit/core 기반의 Vue 3 플러그인, composable, 헤드리스 컴포넌트."
locale: "ko"
---

> Documentation Index
> Fetch the locale documentation index at: https://xid.dev/ko/llms.txt
> Use this file to discover all available pages before exploring further.

# @xid-kit/vue

## 상태

패키지 상태: **현재 패키지**. Vue 3 플러그인, composable, 헤드리스 컴포넌트가 구현되었습니다. 프로덕션 인프라에서의 실제 IdP 왕복 테스트는 아직 수동 검증 대기 중입니다.

## 플러그인 설정

`main.ts`에 `XidPlugin`을 한 번 등록하세요. `XidClient` 싱글턴을 생성하고 `XID_INJECTION_KEY`를 통해 제공하며 `client.load()`를 호출하여 세션 상태를 초기화합니다.

```ts
// main.ts
import { createApp } from 'vue'
import { XidPlugin } from '@xid-kit/vue'
import App from './App.vue'

const app = createApp(App)
app.use(XidPlugin, { apiUrl: 'https://your-tenant.xid.dev' })
app.mount('#app')
```

## 컴포저블

```ts
import { useAuth, useUser, useOrganization, useSession } from '@xid-kit/vue'

const auth = useAuth()
// auth.isLoaded / auth.isSignedIn / auth.userId
// auth.getToken()  -> Promise<Result<string, XidError>>
// auth.signOut()   -> Promise<Result<null, XidError>>

const userRef = useUser()
// userRef.value.isLoaded && userRef.value.isSignedIn -> userRef.value.user.id

const orgRef = useOrganization()
// orgRef.value.organization / orgRef.value.membership / orgRef.value.setActive()

const sessionRef = useSession()
// sessionRef.value.session / sessionRef.value.getToken()
```

## 컴포넌트

```vue
<template>
  <SignInButton sign-in-url="/sign-in" redirect-url="/dashboard">Log in</SignInButton>
  <SignOutButton redirect-url="/">Log out</SignOutButton>

  <Protect role="org:admin">
<AdminPanel />
<template #fallback><p>Access denied.</p></template>
  </Protect>

  <Protect permission="org:member:read">
<MemberList />
  </Protect>
</template>

<script setup lang="ts">
import { SignInButton, SignOutButton, Protect } from '@xid-kit/vue'
</script>
```

## 내보내진 API

| 내보내기 | 종류 | 목적 |
| --- | --- | --- |
| `XidPlugin` | Vue 플러그인 | app.use 진입점; XidClient를 등록하고 client.load()를 호출합니다 |
| `createXidClient` | function | 독립형 XidClient 인스턴스를 반환하는 팩토리 |
| `useXidClient` | 컴포저블 | 주입된 XidClient를 반환합니다. 플러그인이 등록되지 않은 경우 예외를 발생시킵니다 |
| `XID_INJECTION_KEY` | InjectionKey | XidClient 싱글턴을 제공하고 주입하는 데 사용되는 심볼 |
| `useXid` | 컴포저블 | 전체 상태 ref와 모든 클라이언트 액션(UseXidReturn) |
| `useAuth` | 컴포저블 | isLoaded, isSignedIn, userId, getToken, signOut |
| `useUser` | 컴포저블 | isLoaded / isSignedIn / user에 대한 판별 유니온을 감싸는 Ref |
| `useOrganization` | 컴포저블 | 활성 조직, membership, setActive 액션 |
| `useSession` | 컴포저블 | 활성 세션과 getToken 액션 |
| `SignInButton` | 컴포넌트 | 클릭 시 로그인 URL로 리디렉션하는 헤드리스 버튼 |
| `SignOutButton` | 컴포넌트 | 클릭 시 client.signOut()을 호출하는 헤드리스 버튼 |
| `Protect` | 컴포넌트 | 기본 및 폴백 슬롯이 있는 슬롯 기반 역할 및 권한 게이트 |

Source: https://xid.dev/ko/sdks/vue/index.mdx