Integrate Hanko with Vue

​

Install @teamhanko/hanko-elements

Once you’ve initialized your Vue app, installing hanko-elements provides you with access to the prebuilt components: hanko-auth, hanko-profile and hanko-events.

npm install @teamhanko/hanko-elements

​

Add the Hanko API URL

Retrieve the API URL from the Hanko console and place it in your .env file.

VITE_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

​

Configure component resolution

Vue needs to know which elements to treat as custom elements, otherwise it will issue a warning regarding component resolution. To do so, provide a predicate function that determines which elements are to be considered custom elements to compilerOptions.isCustomElement in your configuration:

import vue from '@vitejs/plugin-vue'

export default {
plugins: [
    vue({
    template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("hanko-")
        }
    }
    })
 ]
}

​

Add <hanko-auth> component

The <hanko-auth> web component adds a login interface to your app. Begin by importing the register function from @teamhanko/hanko-elements into your Vue component. Call it with the Hanko API URL as an argument to register <hanko-auth> with the browser’s CustomElementRegistry. Then use the element in your component template.

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import { register } from "@teamhanko/hanko-elements";

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

const router = useRouter();

const redirectAfterLogin = () => {
  // successfully logged in, redirect to a page in your application
  router.push("/dashboard");
};

onMounted(() => {
  register(hankoApi)
    .catch((error) => {
      // handle error
    });
});
</script>

<template>
  <hanko-auth @onAuthFlowCompleted="redirectAfterLogin" />
</template>

By now, your sign-up and sign-in features should be working. You should see an interface similar to this 👇

​

Add <hanko-profile> component

The <hanko-profile> component provides an interface, where users can manage their email addresses and passkeys.

<script setup lang="ts">
  import { onMounted } from "vue";
  import { register } from "@teamhanko/hanko-elements";

  const hankoApi = import.meta.env.VITE_HANKO_API_URL;

  onMounted(() => {
    register(hankoApi).catch((error) => {
      // handle error
    });
  });
</script>

<template>
  <hanko-profile />
</template>

It should look like this 👇

​

Implement logout functionality

You can use @teamhanko/hanko-elements to easily manage user logouts. Below, we make a logout button component that you can use anywhere.

<script setup lang="ts">
import { useRouter } from "vue-router";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = import.meta.env.VITE_HANKO_API_URL;

const router = useRouter();
const hanko = new Hanko(hankoApi);

const logout = () => {
  hanko.user.logout().catch((error) => {
    // handle error
  })
  router.push("/login")
}

</script>

<template>
  <button @click="logout">Logout</button>
</template>

​

Customize component styles

You can customize the appearance of hanko-auth and hanko-profile components using CSS variables and parts. Refer to our customization guide.

​

Authenticate backend requests

To authenticate requests on your backend with Hanko, refer to our backend guide.

​

Try it yourself