Vue.js Quickstart
This quickstart guide covers the essential steps to start integrating Stytch’s Consumer Authentication in a Vue.js application.
Overview
Add Stytch to your Vue.js app 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.js. The code block below features an example Vue.js component using the Composition API.
Want to skip straight to the source code? Check out an example app here.
Getting started
1Install Stytch SDKs and configure your API keys
If you haven't already, create a Stytch Consumer Authentication Project in your Stytch Dashboard.
Add our frontend vanilla JS SDK package to your Vue.js application:
npm install @stytch/vanilla-js --saveAdd your Stytch Project's public_token to your application as an environment variable in a .env file:
# .env
# The below values may be found in your Stytch Dashboard: https://stytch.com/dashboard/api-keys
STYTCH_PROJECT_ENV=test
STYTCH_PUBLIC_TOKEN="YOUR_STYTCH_PUBLIC_TOKEN"2Configure Stytch SDK settings
To allow the Stytch SDK to run on your frontend, you'll also need to:
- Enable frontend SDKs in Test in your Stytch Dashboard here.
- Add the domain your application will run on (e.g. http://localhost:3000) to the list of Domains under Authorized applications.
3Add Stytch to your application
// 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>4What's next
Check out our product-specific guides for how to handle full authentication flows for each product you'd like to support, like Email Magic Links and OAuth.