Vue

The talon-login web component works inside Vue 3 apps. Import it once to register the custom element, then render it in your template and use a template ref with onMounted to call getUser().

Setup

Install the package:

npm install talon-auth

Import the component once to register the custom element:

import 'talon-auth/login'

Custom element config

Vue warns about unknown components by default. Tell the Vue compiler to treat talon-login as a native custom element in vite.config.ts:

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'talon-login',
        },
      },
    }),
  ],
}

Reading the user

Use a template ref to access the element and call getUser() in onMounted. The Promise resolves once the user has authenticated:

const loginEl = ref<TalonLoginElement | null>(null)
const user = ref(null)

onMounted(() => {
  loginEl.value?.getUser().then((u) => {
    user.value = u
  })
})

Example

The example below is a complete Vue single-file component that renders <talon-login> and displays a greeting once the user is authenticated.