Introducing Laravel Nova

Taylor Otwell
Jul 26, 2018 · 7 min read

I’m thrilled to announce the newest member of the Laravel ecosystem: Laravel Nova. Nova is a beautifully designed administration panel for Laravel. We’ve sweat the small details and carefully crafted Nova to not only look great, but to be a joy to work with.

Image for post
Image for post

In this post, I’ll go over the key features of Nova; however, be sure to watch the recording of my Laracon talk for an in-depth demo of Nova’s features.

Preface

On the front-end, Nova is powered by Vue.js, Vue Router, and Tailwind.css. This makes for a powerful, flexible combination, especially in regards to customization — it’s a breeze to build custom tools, cards, and fields.

Each Eloquent model in your application has a corresponding Nova “resource” class which defines its fields, actions, filters, lenses, and cards. Nova is configured entirely using simple PHP classes. No configuration is stored in the database.

Resource Management

Resource detail views give you instant access to a resource’s information, as well as its related resources — all with lightning fast search, pagination, sorting, filters, and more.

Image for post
Image for post

Nova also ships with a variety of great field types. Of course, the basics such as text, boolean, number, file uploads, and dates are covered. However, additional fields like Markdown, Trix, Code, and Place really make it a joy to work with Nova.

Search

Of course, search is available on resource indexes and relationship indexes, but it’s also available when attaching resources together. For example, when creating a “Post” resource that belongs to a “User”, Nova provides a beautiful search input for quickly finding users:

Image for post
Image for post

Nova also includes a beautiful global search component which can search across all of your resource types at warp speed:

Image for post
Image for post

Actions

Have an action that takes a while to run? No problem. Nova can queue it using Laravel’s built-in queueing service:

Image for post
Image for post

Once an action has been defined and attached to a resource, it’s a breeze to trigger it via the UI:

Image for post
Image for post

By marking an Eloquent model with Nova’s “Actionable” trait, Nova provides an “audit trail” of actions that have been performed against a given resource from within Nova, including who triggered them:

Image for post
Image for post

All dates within the Nova UI are automatically, intelligently localized to the user’s timezone. In Europe? No sweat… you’ll see 24 hour time, localized to your timezone.

Filters

Image for post
Image for post

Once the filter has been defined and attached to the resource, it may be enabled via that resource’s index. Filters may be applied on the resource’s primary index as well as anytime that resource is displayed as a relationship:

Image for post
Image for post

Lenses

Image for post
Image for post

Each lens may define it’s own set of fields which are entirely separate from the resource itself:

Image for post
Image for post

Once the lens has been defined and attached to a resource, it can be accessed via that resource’s index:

Image for post
Image for post
Image for post
Image for post

Metrics

For example, you may easily view the new users in our application for the current quarter compared to last quarter with a single line of code:

Image for post
Image for post

But, you’re not limited to simple counting. You could just as easily view the average, sum, min, or max of a given attribute over time. After we’ve registered this metric with a resource, it will be displayed on that resource’s primary index:

Image for post
Image for post

It’s just as easy to create beautiful “trend” metrics. All it takes is a single line of code:

Image for post
Image for post

Of course, you aren’t forced to display trends by day. You may easily generate trends that plot data by the minute, hour, day, week, or month.

Once our trend metric is defined, it may be attached to a resource and will be displayed on that resource’s primary index:

Image for post
Image for post

Authorization

In addition, you have full control over who can attach resources to other resources via relationships. For example, you may limit the roles that may be attached to a given user:

Image for post
Image for post

Customization

Image for post
Image for post

Each tool contains a “Tool.vue” component. From there, the sky is the limit. You can make Axios calls to your back-end Laravel application, while using Tailwind.css to fine-tune the appearance of your tool. It’s hard to state how much freedom you have. Literally anything you can build with Vue components and a Laravel back-end can be implemented in Nova. Nova simply stays out of your way. It’s really great:

Image for post
Image for post

Custom cards (the small panels you have previously seen in the metrics examples) and custom fields are implemented similarly. Custom cards contain a Card.vue component which you have total freedom to customize.

Custom fields contain three Vue components: one for index screens, one for detail screens, and one for forms. Again, you have total freedom when defining how tools appear and behave within Nova.

By leveraging the power of Vue.js and Laravel, we’ve given you a beautiful canvas to create on. I can’t wait to see what kinds of custom tools the community creates and shares.

Final Notes

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store