Cannot use Inertia to get route in custom tool when trying to override Index view

[giangnh13579]

• Laravel Version: Laravel Framework 9.27.0
• Nova Version: 4.18.2
• PHP Version: 8.1.8
• Browser type and version: Version 114.0.5735.110 (Official Build) (64-bit)

Description:

• Using Internia in custom nova tool return object:

{
    visitId: null
}

Detailed steps to reproduce the issue on a fresh Nova installation:

I'm trying to override the Index view in vendor/laravel/nova/resources/js/views/Index.vue. Below is steps to reproduce:

• Create new custom tool: php artisan nova:tool giangnh/nova-customization
• Create new file Index.vue and copy all code from file: vendor/laravel/nova/resources/js/views/Index.vue
• Override component in asset.js

// Views
Nova.booting(app => {
  app.component('ResourceIndex', require('./views/Index.vue').default)
})

• My webpack.mix.js

let mix = require('laravel-mix')
let path = require('path')
let postcss = require('postcss-import')
let tailwindcss = require('tailwindcss')

require('./nova.mix')

mix
  .setPublicPath('dist')
  .js('resources/js/asset.js', 'js')
  .vue({ version: 3 })
  .css('resources/css/asset.css', 'css')
   .postCss('resources/css/multi-belongs-to.css', 'css', [postcss(), tailwindcss('tailwind.config.js')])
  .alias({
    '@asset': path.join(__dirname, './resources/js/'),
    '@': path.join(__dirname, '../../vendor/laravel/nova/resources/js/'),
    'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
  })
  .nova('giangnh/nova-customization')

• Then install packages npm install (in directory nova-components) then build code npm run dev
• Index page was overrided by new one but whenever I trigger some action change query params in url (like search, sort or change page), nothing happen and console display error:

• Checking in code, error come from vendor/laravel/nova/resources/js/mixins/InteractsWithQueryString.js in method:

    updateQueryString(value) {
      let searchParams = new URLSearchParams(window.location.search)
      let page = Inertia.page
      forEach(value, (v, i) => {
        searchParams.set(i, v || '')
      })
      if (compiledSearchParams !== searchParams.toString()) {
        if (page.url !== `${window.location.pathname}?${searchParams}`) {
          page.url = `${window.location.pathname}?${searchParams}`
          window.history.pushState(
            page,
            '',
            `${window.location.pathname}?${searchParams}`
          )
        }
        compiledSearchParams = searchParams.toString()
      }
      Nova.$emit('query-string-changed', searchParams)
    },

• The error come from line if (page.url !== ${window.location.pathname}?${searchParams}) { because page return null and Inertia return an object like {visitId: null}

• I also have another page called excel importer, in which I tried to log Inertia in the vue component. In ExcelInporter.vue

import { Inertia } from '@inertiajs/inertia'
...
mounted() {
   console.log(Inertia)
}

• And result is the same, an object like {visitId: null}
• My component register in asset.js

// Pages
Nova.booting((app, store) => {
  Nova.inertia('ExcelImporter', require('./pages/ExcelImporter.vue').default)
})

• My controller return inertia view:

    public function __invoke(NovaRequest $request)
    {
        $currentUser = $request->user();
        $resource = $currentUser->isCurrentProjectHasApprovement() ? AcUserApprovement::class : AcUser::class;
        $redirectUrl = '/resources/' . $resource::uriKey();
        $redirectPage = $resource::label();

        return inertia('ExcelImporter', [
            'redirectUrl' => $redirectUrl,
            'redirectPage' => $redirectPage
        ]);
    }

I'm not sure this is a bug or desired behavior, but is there any way to get the current url & set url in the component? I can do it by vue-router in laravel nova 3 but in version 4 it seems to be removed.

[crynobone]

The feature available in Laravel Nova 3 is provided by vue-router and Inertia doesn't provide any equivalent feature hence the custom code.

Also, all those components aren't in our Public API and support for usage mainly for it's internal usage.

[giangnh13579]

@crynobone
Is there any alternative way for getting and updating current url in page, like set Inertia.page.url in nova 4 version?

[crynobone]

The correct approach is to use Inertia.visit(), anything else it custom code that you have to write and maintain for your use case.

[keyursolanki7071]

@giangnh13579 You can use this approach, may be it should work. Instead of Inertia.page use this.$inertia.page .