nuxt-auth

A Nuxt theme to get authentication ready with nuxt-auth and Morpheme UI.

Features

• Integrated with Morpheme UI
• Authentication with nuxt-auth
• Built-in Pages:
  • Login
  • Register
  • Forgot Password
  • Profile page
• Dark mode ready
• Customizable via Nuxt Layer
• Configurable via app.config.ts

Demo

• Online demo
• Source code
• Try it online on Stackblitz

Installation

npm i -D @morpheme/nuxt-auth

Usage

Add it to the nuxt.config.ts:

export default defineNuxtConfig({
  extends: '@morpheme/nuxt-auth',
});

Configuration

You can change the default options for auth pages like redirect url and head options via app.config.ts.

You can checkout the default configuration in the source of this file.

Configuration example

export default defineAppConfig({
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/',
      callback: '/auth/login',
      home: '/',
    },
    head: {
      login: {
        title: 'Login',
      },
      protected: {
        title: 'Profile Page',
      },
    },
  },
});

Auth Handler

The auth handle is located at servers/api/auth/[...].ts. Feel free to override the file if you want to customize the authentication methods or providers.

Components

To customize the components, just override the default components by creating a file in your Nuxt app with the same name.

Check out the full list of components here.

Pages

To customize the pages, just override the default pages by creating a file in your Nuxt app with the same name.

Check out the full list of pages here.

Authentication

Checkout the official documentation to learn more about nuxt-auth.

Morpheme UI

Checkout the official documentation to learn more about Morpheme UI.

Dark Mode

Basically, to enable dark mode, the only thing to do is change the value of morpheme.darkMode to true in nuxt.config.ts:

export default defineNuxtConfig({
  morpheme: {
    darkMode: true, // <--
  },
});

And then, add class dark to the html attribute.

Tips: to test dark mode, you set dark class to the html using useHead in the app.vue.

<!-- app.vue -->
<script setup lang="ts">
useHead({
  title: 'Morpheme Nuxt Auth',
  htmlAttrs: {
    // uncomment this line to simulate dark mode
    class: 'dark', // <--
  },
});
</script>

License

MIT