Skip to content
Insights

Nova 4.0 is available!

Finally! Nova 4, a major update where the core has changed a lot an where  a lot of functionalities that the community asked for have been integrated. An update for many that will make a difference to choose for Nova. This because of the super optimization and extended functionality. A balance between ease of use and efficiency that now comes into its own!

 

 Get a demo!

Thumbnail Blog Nova 4 Release Codana Styled

Custom admin dashboards

Laravel Nova is a tool to make admin panel development a lot easier. It's definitely not a generator, it's doesn't generate files. It's even not a CMS, a lot of functions that you could expect from a CMS won't be available out-of-the-box, but it's more focused on developers. The best way to describe Nova is like an admin panel tool that makes it easier to make a well styled UI for the backoffice of your product.

Nova 4 Dashboard Codana Styled

Laravel Nova 3.0 vs 4.0

Laravel Nova 3.0 had a lot of useful functionalities:

  • a dozen of premade fields
  • a global search
  • CRUD integration
  • Lenses 
  • Actions
  • ...

But there were also some pains that came from the community. In 4.0 the Nova developers showed that they actually listen and that they want Nova to grow in the direction of that community's use cases.

Custom admin panel?

Contact us so we can make a strong plan together.

Packages/features

Dependent Fields

A good example is the use of dependent fields. The possibility to put your fields in an imaginary container that depends on values of another field.

Until now the only option was to use a package (epartment /nova-dependency-container), it suited everyone's needs and worked perfectly (with even 2.5M downloads on Packagist).

This functionality has now been integrated in the core of Laravel Nova 4.0, so from now on you wouldn't need to depend on the maintenance of a third party package.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Select::make('Purchase Type', 'type')
    ->options([
        'personal' => 'Personal',
        'gift' => 'Gift',
    ]),

// Recipient field configuration is customized based on purchase type...
Text::make('Recipient')
    ->readonly()
    ->dependsOn(
        ['type'],
        function (Text $field, NovaRequest $request, FormData $formData) {
            if ($formData->type === 'gift') {
                $field->readonly(false)->rules(['required', 'email']);
            }
        }
    ),

 

Impersonation

Impersonating a user is especially useful for an administrator to be able to approach the interface from the point of view of a certain user. A package that was used a lot for this was KABBOUCHI/nova-impersonate. From Nova 4.0 this will also be an integrated functionality that will be included in the core of Nova. Another dependency that was removed 👌

Impersonate menu

Responsive Design

Nova 4.0 introduces a thoroughly redesigned user interface that is now fully responsive, so you can use your platform on your phone on the go.

Also one of the most requested styling features was implemented: "dark mode"!

Mobile Friendly Dark Mode Nova 4

Painless Branding

A new branding option has been added to the Nova configuration so that you can easily customize the "primary colors" and logo used in the Nova interface without having to create a custom Nova "theme".

Branding Nova 4 Codana Styled

Custom Menus

There is now also support for a fully customizable sidebar and user menu. In fact, you can fully customize every item in Nova's navigation (left sidebar), including creating menu sections, menu groups, and more. Previously, this also required a package to be able to do this, such as digital-creative/collapsible-resource-manager.

Laravel Nova 4 Codana Styled Sidebar

Upgrades

Laravel-mix

Laravel Nova has been around for a long time and Laravel Mix was never updated in that time, so there is now a big catch-up from v1 to v6.

Tailwind 3

In Nova 3.0 Tailwind CSS 0.6.0 is still used, here too there will be an upgrade: Tailwind CSS 3!

Inertia.JS

Inertia implements a new approach to building classic server-driven web apps. Inertia makes it possible to create fully client-side rendered, single page apps without the complexity that usually comes with modern SPAs. It does this by leveraging existing server-side frameworks. Inertia has no client-side routing, nor does it require an API. Easily build controllers and page views like you always have!

Not a framework

Inertia is not a framework, nor is it a replacement for your existing server- or client-side framework. Rather, it is designed to work with them. Think of Inertia as glue that connects the two. Inertia does this via adapters. There are currently three official client-side adapters (React, Vue, and Svelte) and two server-side adapters (Laravel and Rails).

Example in Nova 4.0

You will especially notice the use of Inertia.js if you're going to make custom tools that use the Vue router. Nova has therefore replaced the Vue router with Inertia.js. As a result, when you upgrade to 4.0 and higher, you will have to migrate custom tools from Vue routes to registering Inertia page components and backend routes.

As an example we have a Nova 3 Vue router registration:

1
2
3
4
5
6
7
8
9
10
11
// In tool.js...

Nova.booting((Vue, router) => {
  router.addRoutes([
    {
      name: 'sidebar-tool',
      path: '/sidebar-tool',
      component: require('./components/Tool'),
    },
  ])
})

When we upgrade to Nova 4, you will need to register the tool components as follows:

1
2
3
4
5
// In tool.js...

Nova.booting((Vue) => {
  Nova.inertia('SidebarTool', require('./component/Tool').default)
})

Once your Vue component is registered, you will need to define a server-side route for your tool to render your component:

1
2
3
4
5
6
7
8
9
10
// In ToolServiceProvider.php...

use Laravel\Nova\Nova;

Nova::router()
    ->group(function ($router) {
        $router->get('sidebar-tool', function ($request) {
            return inertia('SidebarTool');
        });
    });

 

More insights

  • SymfonyCon 2024: code in harmony

    The 2024 edition took place in beautiful Vienna, so one of our experts went to check it out. A quick night train journey and some culture later, they were ready to focus on two days packed with Symfony. What insights did we bring back as souvenirs? You can read all about it in this report! 

    SymfonyCon 2024: code in harmony
  • Stepping into something new: Lore’s journey at Codana

    Lore Vanderlinden tells you all about her journey at Codana. She combines her technical background as a frontend developer with a passion for entrepreneurship in her role as project manager. Find out how by reading the blog!

    Stepping into something new: Lore’s journey at Codana
  • Qodo: an AI-copiloot for coding and testing

    We recently came across Qodo: a tool that uses Artificial Intelligence (AI) to help us code and test. In this blog post, you can read all about our initial experiences. 

    Qodo: an AI-copiloot for coding and testing
  • Lunar and Codana merge into one brand

    Lunar and Codana join hands and from today will continue together under the Codana brand name. This merger creates a digital product studio with more than 30 experts and a clear ambition: to become a leading player in the Belgian and European market.

    Lunar and Codana merge into one brand
  • From Intern to Digital Project Manager: My Journey at Codana

    Jelmer Krux tells you all about his journey at Codana. He joined our team fresh out of university and combines the roles of digital project manager and UX/UI Designer. How? Find out by reading his story in this blog! 

    From Intern to Digital Project Manager: My Journey at Codana
  • Cross-platform applicaties with React Native

    Never before has developing native mobile applications been as accessible as it is today. At Codana, we do this by using the React Native, an open-source framework developed by Meta.

    Cross-platform applicaties with React Native