Auth0 Vue.js Integration Add authentication to Vue.js 3 single-page applications using @auth0/auth0-vue. Prerequisites Vue 3+ application (Vite or Vue CLI) Auth0 account and application configured If you don't have Auth0 set up yet, use the auth0-quickstart skill first When NOT to Use Server-side rendered Vue apps - See Auth0 Nuxt.js guide for SSR patterns Vue 2 applications - This SDK requires Vue 3+, use legacy @auth0/auth0-spa-js wrapper Embedded login - This SDK uses Auth0 Universal Login (redirect-based) Backend API authentication - Use express-openid-connect or JWT validation instead Quick Start Workflow 1. Install SDK npm install @auth0/auth0-vue 2. Configure Environment For automated setup with Auth0 CLI , see Setup Guide for complete scripts. For manual setup: Create .env file: VITE_AUTH0_DOMAIN = your-tenant.auth0.com VITE_AUTH0_CLIENT_ID = your-client-id 3. Configure Auth0 Plugin Update src/main.ts : import { createApp } from 'vue' ; import { createAuth0 } from '@auth0/auth0-vue' ; import App from './App.vue' ; const app = createApp ( App ) ; app . use ( createAuth0 ( { domain : import . meta . env . VITE_AUTH0_DOMAIN , clientId : import . meta . env . VITE_AUTH0_CLIENT_ID , authorizationParams : { redirect_uri : window . location . origin } } ) ) ; app . mount ( '#app' ) ; 4. Add Authentication UI Create a login component:
5. Test Authentication Start your dev server and test the login flow: npm run dev Detailed Documentation Setup Guide - Automated setup scripts (Bash/PowerShell), CLI commands, manual configuration Integration Guide - Protected routes, API calls, error handling, composables API Reference - Complete SDK API, configuration options, composables reference, testing strategies Common Mistakes Mistake Fix Forgot to add redirect URI in Auth0 Dashboard Add your application URL (e.g., http://localhost:3000 , https://app.example.com ) to Allowed Callback URLs in Auth0 Dashboard Using wrong env var prefix Vite requires VITE_ prefix, Vue CLI uses VUE_APP_ Not handling loading state Always check isLoading before rendering auth-dependent UI Storing tokens in localStorage Never manually store tokens - SDK handles secure storage automatically Missing createAuth0 plugin registration Must call app.use(createAuth0({...})) before mounting app Accessing auth before plugin loads Wrap auth-dependent code in v-if="!isLoading"