--- name: auth0-vue description: Use when adding authentication to Vue.js 3 applications (login, logout, user sessions, protected routes) - integrates @auth0\/auth0-vue SDK for SPAs with Vite or Vue CLI --- # 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](https:\/\/auth0.com\/docs\/quickstart\/webapp\/nuxt) 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 ```bash npm install @auth0\/auth0-vue ``` ### 2. Configure Environment **For automated setup with Auth0 CLI**, see [Setup Guide](reference\/setup.md) for complete scripts. **For manual setup:** Create `.env` file: ```bash VITE_AUTH0_DOMAIN=your-tenant.auth0.com VITE_AUTH0_CLIENT_ID=your-client-id ``` ### 3. Configure Auth0 Plugin Update `src\/main.ts`: ```typescript 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: ```vue