DEV Community

Titas Gailius
Titas Gailius

Posted on

7 1

Laravel Moonlight

Laravel Moonlight

Laravel Moonlight is a carefully crafted Laravel preset.

The goal of this preset is to provide an elegant scaffolding for your next single-page application.


Stack

  • VueJS
  • InertiaJS
  • TailwindCSS
  • Ziggy (Use named routes from your JS)

Usage

You may generate a basic scaffolding running this artisan command:

php artisan ui moonlight
Enter fullscreen mode Exit fullscreen mode

Laravel Moonlight comes with a full-featured authentication scaffolding. You may include the authentication scaffolding by adding the --auth option:

php artisan ui moonlight --auth
Enter fullscreen mode Exit fullscreen mode

Authentication scaffolding comes with these views:

  • Login
  • Register
  • Resend verification email
  • Reset password
  • Confirm new password (after password reset)
  • Confirm password (just like when GitHub asks to confirm your password for certain actions)

Routes

You may use Laravel named routes straight from your Vue components:

<a :href="$route('login')">Login</a>
Enter fullscreen mode Exit fullscreen mode

The $route helper is powered by Ziggy.


Authenticated User

Every page has access to the authenticated user through a prop:

export default {
    props: {
        user: Object,
    }
}
Enter fullscreen mode Exit fullscreen mode

Alternatively, you may access the authenticated user through a global variable: $page.user.

<h1>Hello, {{ $page.user.name }}</h1>
Enter fullscreen mode Exit fullscreen mode

Validation Errors

Just like the authenticated user, you may access the validation errors through a prop:

export default {
    props: {
        errors: Object,
    }
}
Enter fullscreen mode Exit fullscreen mode

Alternatively, you may access the validation errors through a global variable: $page.errors.

<span class="form-error">{{ $page.errors.email[0] }}</span>
Enter fullscreen mode Exit fullscreen mode


Screenshots

Lastly, here are a few screenshots with the views that are included with this preset. You may find more on the GitHub repo.

GitHub Logo


GitHub Logo


GitHub Logo


Feel free to check out full documentation at https://github.com/TitasGailius/laravel-moonlight

Feedback is more than welcome!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
kp profile image
KP •

Looks awesome....you got yourself a new follower :) It would be cool if there was a version for Nuxt.js instead of Inertia.js