Frontend Integration
Vue.js
Learn how to add the Corbado web-js package to your Vue.js application.
1. Prerequisites
First, you need to set up a Corbado project.
To get started with the integration, install the Corbado web-js package.
npm install @corbado/web-js
Further information on web-js can be found here
2. Add web-js to Vue.js code
App.vue
<template>
<div id="corbado-auth"></div>
</template>
<script setup>
import Corbado from "@corbado/web-js";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
onMounted(async() => {
await Corbado.load({
projectId: <VITE_CORBADO_PROJECT_ID>,
darkMode: 'off',
});
const authElement = document.getElementById("corbado-auth");
Corbado.mountAuthUI(authElement, {
onLoggedIn: () => {
router.push("/profile");
},
isDevMode: true,
});
});
</script>
3. Read the blog post
To find a step-by-step tutorial on how to integrate passkeys into Vue.js, please check out our blog post: