Skip to main content
This Quickstart is currently in Beta. We’d love to hear your feedback!
Prerequisites: Before you begin, ensure you have the following installed:Nuxt Version Compatibility: This quickstart works with Nuxt 3.x out of the box. For Nuxt 4.x, ensure you’re using Nuxt 4.2+.

​
Get Started

This quickstart demonstrates how to add Auth0 authentication to a Nuxt.js application. You’ll build a secure single-page app with login, logout, and user profile features using the Auth0 Nuxt SDK.
1

Create a new project

Create a new Nuxt project for this Quickstart
npx nuxi@latest init auth0-nuxt-app
Open the project
cd auth0-nuxt-app
2

Install the Auth0 Nuxt SDK

npm add @auth0/auth0-nuxt && npm install
3

Setup your Auth0 App

Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project.You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
  • CLI
  • Dashboard
Run the following shell command on your project’s root directory to create an Auth0 app and generate a .env file:
AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET=$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env
4

Configure the Auth0 Nuxt module

nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ['@auth0/auth0-nuxt'],
  runtimeConfig: {
    auth0: {
      domain: process.env.NUXT_AUTH0_DOMAIN,
      clientId: process.env.NUXT_AUTH0_CLIENT_ID,
      clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET,
      sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET,
      appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL,
    },
  },
})
5

Create Login, Logout and Profile Components

Create files
mkdir -p app/components && touch app/components/LoginButton.vue && touch app/components/LogoutButton.vue && touch app/components/UserProfile.vue
And add the following code snippets
<template>
 <a 
    href="/auth/login" 
    class="button login"
  >
    Log In
  </a>
</template>

<style scoped>
.button {
  padding: 1.1rem 2.8rem;
  font-size: 1.2rem;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
}

.button:focus {
  box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.5);
}

.button.login {
  background-color: #63b3ed;
  color: #1a1e27;
}

.button.login:hover:not(:disabled) {
  background-color: #4299e1;
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);
}

.button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}
</style>
6

Run your app

npm run dev
CheckpointYou should now have a fully functional Auth0 login page running on your localhost
⌘I