NuxtUser

An easy-to-use User authentication module for Nuxt.

• ✨  Release Notes

Features

• ⛰  Guest user support
• 🚠  User session management
• 🌲  Authentication middleware

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-user-auth

That's it! You can now use nuxt-user-auth in your Nuxt app ✨

Configuration

Add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-user-auth'],
  User: {
    guest: true,
    guestName: 'Guest',
    unauthedRedirect: '/login',
    authedRedirect: '/',
  },
});

Usage

Middleware

The module provides an authentication middleware that redirects users based on their authentication status.

Components

Use the AuthState component to manage user authentication state in your templates:

<template>
  <div>
    <AuthState v-slot="{ loggedIn, clear, user, session }">
      <button @click="clear">Clear</button>
      <button @click="fetch">Fetch</button>
      <p>loggedIn: {{ loggedIn }}</p>
      <p>session: {{ session }}</p>
      <h1>Welcome {{ user.name }}</h1>
    </AuthState>
  </div>
</template>

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release