diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 007cf39..b289c45 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -26,6 +26,9 @@ jobs:
           - workingDirectory: ./examples/react-spa
             projectName: cerberauth-react-spa-oidc
             directory: ./dist
+          - workingDirectory: ./examples/vue-spa
+            projectName: cerberauth-vue-spa-oidc
+            directory: ./dist
           - workingDirectory: ./examples/angular-spa
             projectName: cerberauth-angular-spa-oidc
             directory: ./dist/angular-spa/browser
diff --git a/examples/nextjs-app/thumbnail.png b/examples/nextjs-app/thumbnail.png
new file mode 100644
index 0000000..b258de9
Binary files /dev/null and b/examples/nextjs-app/thumbnail.png differ
diff --git a/examples/vue-spa/.env b/examples/vue-spa/.env
new file mode 100644
index 0000000..54ff335
--- /dev/null
+++ b/examples/vue-spa/.env
@@ -0,0 +1,2 @@
+VITE_OIDC_ISSUER="https://testid.cerberauth.com"
+VITE_OIDC_CLIENT_ID=""
diff --git a/examples/vue-spa/Dockerfile b/examples/vue-spa/Dockerfile
new file mode 100644
index 0000000..7333d48
--- /dev/null
+++ b/examples/vue-spa/Dockerfile
@@ -0,0 +1,30 @@
+FROM node:lts as development
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN npm ci
+
+COPY . .
+
+ENV CI=true
+ENV PORT=3000
+
+CMD [ "npm", "start" ]
+
+FROM development as builder
+
+RUN npm run build
+
+FROM nginx:alpine
+
+# Copy config nginx
+COPY --from=builder /app/.nginx/nginx.conf /etc/nginx/conf.d/default.conf
+
+WORKDIR /usr/share/nginx/html
+
+# Remove default nginx static assets
+RUN rm -rf ./*
+
+# Copy static assets from builder stage
+COPY --from=builder /app/dist .
diff --git a/examples/vue-spa/package-lock.json b/examples/vue-spa/package-lock.json
index ff064ad..91eed4e 100644
--- a/examples/vue-spa/package-lock.json
+++ b/examples/vue-spa/package-lock.json
@@ -8,8 +8,8 @@
       "name": "vue-spa",
       "version": "0.0.0",
       "dependencies": {
+        "oauth4webapi": "^3.0.0",
         "vue": "^3.4.29",
-        "vue-auth3": "^1.0.10",
         "vue-router": "^4.3.3"
       },
       "devDependencies": {
@@ -2899,6 +2899,14 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
+    "node_modules/oauth4webapi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/oauth4webapi/-/oauth4webapi-3.0.0.tgz",
+      "integrity": "sha512-Rw9SxQYuQX9J41VgM4rVNGtm1ng0Qcd8ndv7JmhmwqQ3hHBokX+WjV379IJhKk7bVPHefgvrDgHoO/rB2dY7YA==",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3856,7 +3864,7 @@
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
       "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4001,11 +4009,6 @@
         }
       }
     },
-    "node_modules/vue-auth3": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/vue-auth3/-/vue-auth3-1.0.10.tgz",
-      "integrity": "sha512-tI3JhwiUIWtnMwKyzcKsqJkPAQjcEH8leCju5bu1orkmHgYIU0+sFiHrCc3nJsF9ILn19rb6JOeviAQjArtvLg=="
-    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
diff --git a/examples/vue-spa/package.json b/examples/vue-spa/package.json
index 4f18cd8..232f6e5 100644
--- a/examples/vue-spa/package.json
+++ b/examples/vue-spa/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
+    "pages:build": "vite build --mode production",
     "preview": "vite preview",
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
@@ -13,8 +14,8 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "oauth4webapi": "^3.0.0",
     "vue": "^3.4.29",
-    "vue-auth3": "^1.0.10",
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
diff --git a/examples/vue-spa/src/App.vue b/examples/vue-spa/src/App.vue
index a78fb6f..baeba78 100644
--- a/examples/vue-spa/src/App.vue
+++ b/examples/vue-spa/src/App.vue
@@ -1,5 +1,17 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
+import { useAuth } from '@/lib/auth'
+
+const { handleLoginRedirect } = useAuth()
+
+onMounted(async () => {
+  try {
+    await handleLoginRedirect()
+  } catch (error) {
+    console.error('OIDC callback error:', error)
+  }
+})
 </script>
 
 <template>
diff --git a/examples/vue-spa/src/components/.gitkeep b/examples/vue-spa/src/components/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/examples/vue-spa/src/components/Button.vue b/examples/vue-spa/src/components/Button.vue
deleted file mode 100644
index f9f187a..0000000
--- a/examples/vue-spa/src/components/Button.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <button
-    class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700">
-    <slot />
-  </button>
-</template>
diff --git a/examples/vue-spa/src/drivers/testid.ts b/examples/vue-spa/src/drivers/testid.ts
deleted file mode 100644
index 8a3489c..0000000
--- a/examples/vue-spa/src/drivers/testid.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineOAuth2Driver } from 'vue-auth3'
-
-export default defineOAuth2Driver({
-  url: 'https://testid.cerberauth.com/oauth2/auth',
-
-  params: {
-    client_id: '',
-    redirect_uri: 'login/testid',
-    response_type: 'code',
-    scope: 'openid profile email',
-    state: {},
-  },
-})
diff --git a/examples/vue-spa/src/lib/auth.ts b/examples/vue-spa/src/lib/auth.ts
new file mode 100644
index 0000000..6ae5c6e
--- /dev/null
+++ b/examples/vue-spa/src/lib/auth.ts
@@ -0,0 +1,49 @@
+import { reactive, computed } from 'vue'
+import {
+  login as oidcLogin,
+  handleLoginRedirect as oidcHandleLoginRedirect,
+  logout as oidcLogout,
+} from './oidc'
+
+interface AuthState {
+  isAuthenticated: boolean
+  user: null | { [key: string]: any }
+}
+
+const state = reactive<AuthState>({
+  isAuthenticated: false,
+  user: null,
+})
+
+export function useAuth() {
+  const login = () => {
+    oidcLogin()
+  }
+
+  const handleLoginRedirect = async () => {
+    const _user = await oidcHandleLoginRedirect()
+    if (!_user) {
+      return
+    }
+
+    state.isAuthenticated = true
+    state.user = _user
+  }
+
+  const logout = () => {
+    state.isAuthenticated = false
+    state.user = null
+    oidcLogout()
+  }
+
+  const isAuthenticated = computed(() => state.isAuthenticated)
+  const user = computed(() => state.user)
+
+  return {
+    login,
+    handleLoginRedirect,
+    logout,
+    isAuthenticated,
+    user,
+  }
+}
diff --git a/examples/vue-spa/src/lib/oidc.ts b/examples/vue-spa/src/lib/oidc.ts
new file mode 100644
index 0000000..c339c33
--- /dev/null
+++ b/examples/vue-spa/src/lib/oidc.ts
@@ -0,0 +1,156 @@
+import * as oauth from 'oauth4webapi'
+
+const webStorageKey = 'oidc:auth'
+let accessToken: string | undefined
+let idToken: string | undefined
+
+if (!import.meta.env.VITE_OIDC_ISSUER) {
+  throw new Error('OIDC_ISSUER is not set')
+}
+
+if (!import.meta.env.VITE_OIDC_CLIENT_ID) {
+  throw new Error('OIDC_CLIENT_ID is not set')
+}
+
+const issuer = import.meta.env.VITE_OIDC_ISSUER
+const clientId = import.meta.env.VITE_OIDC_CLIENT_ID
+
+const issuerUrl = new URL(issuer)
+
+const client: oauth.Client = {
+  client_id: clientId,
+  redirect_uris: [window.location.origin],
+}
+const clientAuth = oauth.None()
+
+let _as: oauth.AuthorizationServer | undefined
+const getAuthorizationServer = async (): Promise<oauth.AuthorizationServer> => {
+  if (_as) {
+    return _as
+  }
+
+  _as = await oauth.discoveryRequest(issuerUrl, { algorithm: 'oidc' })
+    .then((response) => oauth.processDiscoveryResponse(issuerUrl, response))
+  if (!_as) {
+    throw new Error('Invalid Authorization Server')
+  }
+
+  return _as
+}
+
+type LoginParams = {
+  scope?: string;
+  redirectUri?: string;
+}
+
+export const login = async (params?: LoginParams) => {
+  const as = await getAuthorizationServer()
+
+  const scope = params?.scope || 'openid email'
+  let redirectUri = params?.redirectUri
+  if (!redirectUri && Array.isArray(client.redirect_uris) && client.redirect_uris.length > 1) {
+    redirectUri = client.redirect_uris[0]?.toString()
+  }
+  redirectUri = redirectUri || window.location.origin
+
+  const code_challenge_method = 'S256'
+  /**
+   * The following MUST be generated for every redirect to the authorization_endpoint. You must store
+   * the code_verifier and nonce in the end-user session such that it can be recovered as the user
+   * gets redirected from the authorization server back to your application.
+   */
+  const codeVerifier = oauth.generateRandomCodeVerifier()
+  const codeChallenge = await oauth.calculatePKCECodeChallenge(codeVerifier)
+  let nonce: string | undefined
+
+  const authorizationUrl = new URL(as.authorization_endpoint!)
+  authorizationUrl.searchParams.set('client_id', client.client_id)
+  authorizationUrl.searchParams.set('redirect_uri', redirectUri)
+  authorizationUrl.searchParams.set('response_type', 'code')
+  authorizationUrl.searchParams.set('scope', scope)
+  authorizationUrl.searchParams.set('code_challenge', codeChallenge)
+  authorizationUrl.searchParams.set('code_challenge_method', code_challenge_method)
+
+  let state: string | undefined
+  state = oauth.generateRandomState()
+  authorizationUrl.searchParams.set('state', state)
+
+  /**
+   * We cannot be sure the AS supports PKCE so we're going to use nonce too. Use of PKCE is
+   * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
+   */
+  if (as.code_challenge_methods_supported?.includes('S256') !== true) {
+    nonce = oauth.generateRandomNonce()
+    authorizationUrl.searchParams.set('nonce', nonce)
+  }
+
+  console.log('store code_verifier and nonce in the end-user session')
+  sessionStorage.setItem(webStorageKey, JSON.stringify({ codeVerifier, state, nonce, redirectUri }))
+
+  console.log('Redirecting to Authorization Server', authorizationUrl.toString())
+  window.location.assign(authorizationUrl.toString())
+}
+
+export const handleLoginRedirect = async (): Promise<oauth.UserInfoResponse | undefined> => {
+  // @ts-expect-error
+  const currentUrl: URL = new URL(window.location)
+  if (!currentUrl.searchParams.has('code')) {
+    return undefined
+  }
+
+  const as = await getAuthorizationServer()
+
+  const storage = sessionStorage.getItem(webStorageKey)
+  if (!storage) {
+    throw new Error('No stored codeVerifier and nonce found')
+  }
+  sessionStorage.removeItem(webStorageKey)
+  const { codeVerifier, state, nonce, redirectUri } = JSON.parse(storage)
+
+  const params = oauth.validateAuthResponse(as, client, currentUrl, state)
+
+  const authorizationResponse = await oauth.authorizationCodeGrantRequest(
+    as,
+    client,
+    clientAuth,
+    params,
+    redirectUri,
+    codeVerifier,
+  )
+
+  const authorizationCodeResult = await oauth.processAuthorizationCodeResponse(as, client, authorizationResponse, { expectedNonce: nonce })
+
+  console.log('Access Token Response', authorizationCodeResult)
+  accessToken = authorizationCodeResult.access_token
+  idToken = authorizationCodeResult.id_token
+  const claims = oauth.getValidatedIdTokenClaims(authorizationCodeResult)
+  console.log('ID Token Claims', claims)
+
+  const sub = claims?.sub
+  if (!sub) {
+    throw new Error('No sub claim in ID Token')
+  }
+
+  // UserInfo Request
+  const response = await oauth.userInfoRequest(as, client, accessToken)
+  const user = await oauth.processUserInfoResponse(as, client, sub, response)
+  console.log('UserInfo Response', user)
+
+  window.history.replaceState({}, document.title, redirectUri || window.location.origin)
+  return user
+}
+
+export const logout = async () => {
+  if (!idToken) {
+    throw new Error('No ID Token')
+  }
+
+  const as = await getAuthorizationServer()
+
+  const endSessionUrl = new URL(as.end_session_endpoint!)
+  endSessionUrl.searchParams.set('post_logout_redirect_uri', window.location.origin)
+  endSessionUrl.searchParams.set('id_token_hint', idToken)
+  console.log('Redirecting to End Session Endpoint', endSessionUrl.toString())
+
+  window.location.assign(endSessionUrl.toString())
+}
diff --git a/examples/vue-spa/src/main.ts b/examples/vue-spa/src/main.ts
index ed9bf6a..ff01012 100644
--- a/examples/vue-spa/src/main.ts
+++ b/examples/vue-spa/src/main.ts
@@ -1,25 +1,10 @@
 import './assets/main.css'
 
 import { createApp } from 'vue'
-import { createAuth } from 'vue-auth3'
-import driverBearerToken from 'vue-auth3/drivers/auth/bearer-token'
-import driverHttpFetch from 'vue-auth3/drivers/http/fetch'
 import App from './App.vue'
-import './drivers/testid'
 import router from './router'
 
-const auth = createAuth({
-  plugins: {
-    router,
-  },
-  drivers: {
-    auth: driverBearerToken,
-    http: driverHttpFetch,
-  },
-})
-
 const app = createApp(App)
 
-app.use(router).use(auth)
-// app.use(router)
+app.use(router)
 app.mount('#app')
diff --git a/examples/vue-spa/src/router/index.ts b/examples/vue-spa/src/router/index.ts
index e58491f..0e035f0 100644
--- a/examples/vue-spa/src/router/index.ts
+++ b/examples/vue-spa/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '@/views/HomeView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,7 +8,7 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView
-    }
+    },
   ]
 })
 
diff --git a/examples/vue-spa/src/views/HomeView.vue b/examples/vue-spa/src/views/HomeView.vue
index 8ae882f..fc83b29 100644
--- a/examples/vue-spa/src/views/HomeView.vue
+++ b/examples/vue-spa/src/views/HomeView.vue
@@ -1,9 +1,7 @@
 <script setup>
-const auth = useAuth()
+import { useAuth } from '@/lib/auth'
 
-function login() {
-  auth.oauth2("testid", {})
-}
+const { isAuthenticated, login, logout } = useAuth()
 </script>
 
 <template>
@@ -11,21 +9,21 @@ function login() {
     <main role="main"
       class="flex flex-col items-center justify-center h-5/6 space-y-8 text-center px-4 py-16 lg:pt-32 md:pt-16 sm:pt-8">
       <h1 class="mt-4 text-2xl font-extrabold tracking-tight text-slate-900 sm:text-5xl xl:max-w-[43.5rem]">
-        Nuxt Application Example using OpenID Connect
+        Vue.js Application Example using OpenID Connect
       </h1>
       <p class="mt-4 max-w-lg text-lg text-slate-700">
-        This example demonstrates how to authenticate users in a Nuxt Application using OpenID Connect Protocol.
+        This example demonstrates how to authenticate users in a Vue Application using OpenID Connect Protocol.
       </p>
-      <Button v-if="loggedIn" @click="clear">
+      <button class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700" v-if="isAuthenticated" @click="logout">
         Logout
-      </Button>
-      <Button v-else @click="login">
+      </button>
+      <button class="inline-flex justify-center rounded-lg text-sm font-semibold py-3 px-4 bg-slate-900 text-white hover:bg-slate-700" v-else @click="login">
         Login with TestID
-      </Button>
+      </button>
       <p class="mt-4 max-w-lg text-slate-700">
-        If you want to checkout out how to implement OpenID Connect in your Nuxt Application, take a look at the <a
+        If you want to checkout out how to implement OpenID Connect in your Vue Application, take a look at the <a
           class="text-indigo-600"
-          href="https://github.com/cerberauth/openid-connect-examples/tree/main/examples/nuxt-app">source code</a>.
+          href="https://github.com/cerberauth/openid-connect-examples/tree/main/examples/vue-app">source code</a>.
       </p>
     </main>