DEV Community

Titas Gailius
Titas Gailius

Posted on

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!

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