Laravel Moonlight

titasgailius

Titas Gailius

Posted on April 13, 2020

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!

💖 💪 🙅 🚩
titasgailius
Titas Gailius

Posted on April 13, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Laravel Moonlight
laravel Laravel Moonlight

April 13, 2020