Inertia-Vue | laravel frontend command to turn your Controllers | Frontend Framework library

The frontend part of inertia has different expectations regarding the errors.

You could:

a) grab the exact part you need from here or

b) remove everything under AppServiceProvider@boot and create a new middleware extending Inertia's middleware - this will serve as a place to share all your additional props (the flash prop for example).

For a global registration:

After you have installed "highcharts-vue" using:

npm install highcharts-vue

Register it globally as a plugin in your app.js with:

import HighchartsVue from 'highcharts-vue'

Next register it as a plugin in your vue object with:

Vue.use(HighchartsVue)

Please see the documentation here for more detailed instructions (and how to register it locally in the component).

After installing, your app.js would look something like this:

1. Normally, if you want to display lists of users with Inertia, you'd paginate the list server-side with Laravel's built-in pagination. If the page load time is slow, you're probably trying to load too much data/missing eager loads/missing DB indexing/doing some calculation that can be optimized.
2. You can use Progress Indicator to improve the UX when navigating between Inertia views. Does it make a difference to the user if they see an empty table in an SPA with ajax calls before the data loads vs. seeing a progress bar before the view reloads? IMO not really.
3. If for some reason in a particular view it's really important to have the table layout (or some other empty data container) displayed, even if it's empty for some time, you can always load the data with ajax in that one-off case. Not all data in an Inertia app needs to be "pushed" to the view from the controller, you can also "pull" it from Vue/React side.

You have Boostrap-vue but it is still Bootstrap 4 (they are migrating to B5)

If you are not using Blade, or would prefer not to use the @routes directive, Ziggy provides an artisan command to output its config and routes to a file: php artisan ziggy:generate

that's because you are using tailwindcss and it escapes H tags. You can add

Might be a concurrency thing. Remember that the axios call is asynchronous so the loop will continue before the responses have been received.

So it could be the many responses are received at the same time and that loaded is then still 0 at that point. Looks like this won't be the case. Apparently JavaScript will process callbacks one after the other.

I'm not sure how JavaScript handles concurrent increments though so I can't exactly explain how that plays into effect here.

From your implementation, it looks like you'd want to turn the load function into an asynchronous function (using the async) keyword and then use the await before the axios call to ensure that you have received a response before making another request.

For interest's sake, maybe have a look at your network tab and count how many requests are being made. I suspect there will be more requests made than this.article_count.

From the documentation on the author's website, you need to instruct vue to inject the page into your component, and then you can accessed the shared variables.

For example: