How to customize 403 view in Nova 4?

[PureLuck3]

I am trying to override the initial Nova connexion 403 error page, but my scripts aren't getting loaded because of a 403 error. However, my script is correctly loaded when the user is authorized. Is there any way to load custom scripts regardless of the authorization?

Below is my code to generate/load the script.

resources/js/nova/custom.js

Nova.booting((Vue, router) => {
  Vue.component('CustomError403', require('./components/CustomError403'));
});

app/Providers/NovaServiceProvider.php

public function boot()
{
    parent::boot();
    Nova::script('custom', public_path('js/nova/custom.js'));
}

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
  .js('resources/js/nova/custom.js', 'public/js/nova')
  .vue({ version: 3 })
  .webpackConfig({
    externals: {
      vue: 'Vue',
    },
  })
  .postCss('resources/css/app.css', 'public/css', [
    //
  ]);

[crynobone]

Is this for Nova 3 or Nova 4?

Nova.booting((Vue, router) indicates it's Nova 3 since Nova 4 doesn't support Vue Router.

But .vue({ version: 3 }) indicates Nova 4 since Nova 3 uses Vue 2.

[piljac1]

Hi ! I'm one of his coworkers. It is Nova 4. However, there's nothing in the documentation that suggests how to override 403 and 404 view. Is that feasible in Nova 4 ? If so, how ?

Nova 3 leveraged Laravel 403 and 404 Blade views, but since Nova 4, we can see that there are custom 403 and 404 Vue components that are used instead.

[piljac1]

Just found out how to do it in Nova 4. I'll post up how in this thread tomorrow!

P.S. Got rid of the 403 script error by using the remoteScript method with a fully qualified link to the custom script. Seems like registering a local script hits an authentication middleware somewhere down the road.

[piljac1]

Here's how to achieve a 403 page override in Nova 4:

1. Create a custom JavaScript file (i.e. custom.js, but the file name doesn't matter) and setup mix to compile it. See the sample Mix configuration below

mix.js('resources/js/app.js', 'public/js')
  .js('resources/js/nova/custom.js', 'public/js/nova') // Add this line.
  .vue({ version: 3 })
  .webpackConfig({
    externals: {
      vue: 'Vue',
    },
  })
  .postCss('resources/css/app.css', 'public/css', [
    //
  ]);

2. Register the script in the app/Providers/NovaServiceProvider.php boot method

public function boot()
{
    parent::boot();

    // It is important to use the remoteScript method here in order to make the script load
    // even when the user is not authorized to see the view.
    Nova::remoteScript(asset('js/nova/custom.js'));

    // ...rest of the code.
}

3. Create your custom 403 page component. Here, it is very important to use Nova's Guest layout in order to have a blank layout (or you can also use your own layout). Else, you will get the dashboard layout.

<template>
  <!-- You can put your custom markup here. -->
</template>

<script>
  import Guest from '../../../../vendor/laravel/nova/resources/js/layouts/Guest.vue'

  export default {
    name: 'Error403',

    layout: Guest,
  }
</script>

5. In your JavaScript file (custom.js in this example), override the default 403 page with your custom Vue component.

import Error403 from './pages/Error403';

Nova.booting((app, store) => {
  Nova.inertia('Nova.Error403', Error403)
})

6. Install @vue/babel-plugin-jsx in order to be able to compile properly after adding the Guest layout (added in step 3).

npm install @vue/babel-plugin-jsx --save-dev

7. Compile your assets (npm run dev in local environment or npm run prod in production environment)

Done! You should now see your custom 403 page instead of the default one.

[PureLuck3]

Thanks for the help! I appreciate it.