Add Stytch to your Vue webapp using the Vanilla Javascript SDK. All features in the SDK, including the pre-built UI components and headless methods, are available to use in Vue. The code block below features an example Vue component using the Composition API. You can find a full, working Vue example application here.
Stytch plans to release a Vue SDK in the future with additional hooks and methods specific to the Vue ecosystem.
// Login.vue
<script setup>
import { onMounted } from 'vue'
import { StytchUIClient, Products } from '@stytch/vanilla-js'
const stytch = new StytchUIClient("PUBLIC_TOKEN")
const config = {
products: [Products.emailMagicLinks, Products.oauth],
oauthOptions: {
providers: [{ type: 'google' }],
}
}
onMounted(() => {
stytch.mountLogin({
elementId: '#stytch-sdk',
styles,
config,
})
})
</script>
<template>
<div class="container">
<div id="stytch-sdk"></div>
</div>
</template>