Back to Docs
SDK

Vue 3 SDK (@authme/vue)

Vue 3 integration with composables, router guards, and Nuxt 3 support. Built for the Composition API.

Key Features

useAuth composable (Composition API)
Vue Router navigation guard
AuthProvider component
OAuth 2.0 + PKCE
Automatic token refresh
Role-based access control
Nuxt 3 compatible
TypeScript support

Requirements

  • Vue 3.3+
  • TypeScript 5+ (recommended)
  • Node.js 18+

Installation

npm install @authme/vue

Plugin Setup

Register the AuthMe plugin in your Vue app.

// main.ts
import { createApp } from 'vue';
import { AuthmePlugin } from '@authme/vue';
import App from './App.vue';

const app = createApp(App);

app.use(AuthmePlugin, {
  serverUrl: 'https://auth.example.com',
  realm: 'my-realm',
  clientId: 'my-vue-app',
  redirectUri: window.location.origin + '/callback',
  refreshStrategy: 'rotation',
});

app.mount('#app');

useAuth Composable

The primary composable for authentication in your components.

<script setup lang="ts">
import { useAuth } from '@authme/vue';

const {
  isAuthenticated,
  isLoading,
  user,
  accessToken,
  login,
  logout,
  hasRole,
} = useAuth();
</script>

<template>
  <div v-if="isLoading">Loading...</div>
  <div v-else-if="isAuthenticated">
    <p>Welcome, {{ user?.name }}!</p>
    <p>Email: {{ user?.email }}</p>
    <p v-if="hasRole('admin')">You are an admin</p>
    <button @click="logout()">Logout</button>
  </div>
  <div v-else>
    <button @click="login()">Sign In</button>
  </div>
</template>

Router Guard

Protect routes with the built-in navigation guard.

// router.ts
import { createRouter, createWebHistory } from 'vue-router';
import { authGuard } from '@authme/vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    {
      path: '/dashboard',
      component: () => import('./views/Dashboard.vue'),
      beforeEnter: authGuard(),
    },
    {
      path: '/admin',
      component: () => import('./views/Admin.vue'),
      beforeEnter: authGuard({ roles: ['admin'] }),
    },
    {
      path: '/callback',
      component: () => import('./views/Callback.vue'),
    },
  ],
});

Callback Handler

Handle the OAuth callback after login redirect.

<!-- views/Callback.vue -->
<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAuth } from '@authme/vue';

const router = useRouter();
const { handleCallback } = useAuth();

onMounted(async () => {
  await handleCallback();
  router.push('/dashboard');
});
</script>

<template>
  <div>Signing in...</div>
</template>

API Requests with Token

Use the access token for authenticated API calls.

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useAuth } from '@authme/vue';

const { accessToken } = useAuth();
const profile = ref(null);

onMounted(async () => {
  const res = await fetch('/api/profile', {
    headers: {
      Authorization: 'Bearer ' + accessToken.value,
    },
  });
  profile.value = await res.json();
});
</script>

AuthProvider Component

Optionally wrap your app with AuthProvider for scoped auth context.

<!-- App.vue -->
<script setup lang="ts">
import { AuthProvider } from '@authme/vue';
</script>

<template>
  <AuthProvider>
    <RouterView />
  </AuthProvider>
</template>

Nuxt 3 Integration

For Nuxt 3, use the plugin in a Nuxt plugin file.

// plugins/authme.client.ts
import { AuthmePlugin } from '@authme/vue';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(AuthmePlugin, {
    serverUrl: 'https://auth.example.com',
    realm: 'my-realm',
    clientId: 'my-nuxt-app',
    redirectUri: window.location.origin + '/callback',
  });
});

// middleware/auth.ts
export default defineNuxtRouteMiddleware(async (to) => {
  const { isAuthenticated, login } = useAuth();
  if (!isAuthenticated.value) {
    await login();
  }
});