Morpheme

Appearance

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 ​

Installation ​

bash
npm i -D @morpheme/nuxt-auth
npm i -D @morpheme/nuxt-auth

Usage ​

Add it to the nuxt.config.ts:

ts
export default defineNuxtConfig({
  extends: '@morpheme/nuxt-auth',
});
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 ​

ts
export default defineAppConfig({
  auth: {
    redirect: {
      login: '/auth/login',
      logout: '/',
      callback: '/auth/login',
      home: '/',
    },
    head: {
      login: {
        title: 'Login',
      },
      protected: {
        title: 'Profile Page',
      },
    },
  },
});
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:

ts
export default defineNuxtConfig({
  morpheme: {
    darkMode: true, // <--
  },
});
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.

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

License ​

MIT