I am creating a Laravel App with Vue JS and Axios.
Does anyone know how to make progress bar or loading bar in AXIOS GET?? I found some topics in google but it all uses on Upload Progress Bar which is Axios Post Request. Maybe someone here knows how to make loading bar when using Axios Get.
Thank you!
Not important do you user Axios.
If you want create process bar, you can user library PACE https://github.hubspot.com/pace/docs/welcome/
Related
I have a strange error on a project of mine.
I'm trying to switch a laravel project to something where the backend is seperated from the frontend.
Backend api stays laravel, but frontend is vue with quasar.
Since we want to do the change gradualy, i made one new feature in quasar and want to integrate it in my existing laravel-app.
In order to accomplish that, i'm using an iframe in which i load the new vue frontend.
Everything works as it should work, except for one crucial thing.
I have one id-parameter from laravel that should be passed to the iframe (the quasar/vue application), and for some reason... that's not working.
I've tried to work with route parameters
<iframe src='/spa/12'
and in vue-router
{ path: '/:id', component: () => import('pages/weekSchedule.vue') }
Without success
I've tried query parameters in the url like this
<iframe src='/spa/index.html?id=12'
I can see the correct url in my network inspector, the url is called with the query, but i can't seem to get the parameters in vue.
async mounted() {
this.id= this.$route.query.id
}
When i test it -not in iframe- everything is working.
But in iframe i get nothing.
Does anybody have an idea/solution?
Any help is appreciated!
I have developed a Vue app and a Laravel app and connected them with Vuex,VueRouter and the API endpoints, now I want to implement SSR. So far I have found 2 methods for implementing SSR:
use PhpV8js and Render Vue SSR in Laravel blade
use 2 separate processes: Laravel (php-fpm) and VueSSR (node)
accept the request in Laravel and render session dependent data like user info, queries on repositories in json
pass session json to node proccess (with socket or http)
node process renders Vue app with session data and passes it back to laravel
laravel renders the SSR blade with rendered Vue app
my concerns for first the method is: I don't like using PhpV8js in production environment with lots of traffic and a Vue component heavy app!
for second one: I don't know if passing html pages back and forth between socket apps is a good idea.
for a production environment which of these do you prefer? which will be the most performant? and are there other ways to accomplish Vue+Laravel SSR?
I implemented a simple crud application in two ways.
One with Laravel and Vue and one with Laravel, Vue and Inertia.
When rendering a simple user list in my Vue/Laravel application (either with routing or initial page load), Vue renders the whole page instantly and loads the user list as soon as it receives it from the server. -> good user experience, possibility to implement a loading indication
When rendering the same thing in my inertia application, Vue renders the whole page after the data has been received from the server. Which is a very bad thing for applications with large amounts of data.
Even in my really small/slim application, I felt the difference and figured this out with a simple sleep(3) before returning the view (or Inertia::render) in my UserController.
Is this normal/is there a way to prevent this? Or did I possibly implement inertia poorly?
I'm using inertia.js 0.8.5, inertia-vue 0.5.5 and Vue 2.6.12
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.
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.
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.
So i'm trying to update a user status to either enabled or disabled in the user database. I already have my toggle in place. When i view the user table from the dashboard, i want to be able to see the toggle button according to their status. I also want to be able to update their status using the same toggle.
I know it can be done with AJAX but i'm not sure about the implementation.
Anyone kind enough to enlighten me?
You are right!
You should implement it with ajax.
Firstly create a route and controller method for accessing/controlling data. Then, implement ajax call. You can use axios library for this,too. It is a very powerful library. After you send ajax call and take the response, You should manipulate DOM according to ajax response. It is a generic question and generic answer :)
Hi I am still new to Django and have not worked with Ajax before.
I am building an app where two players are able to chat, so it's basically a chatbox and I want the page to update for one player when the other player enters text on their page. I was wondering if anyone had any good resources for this type of functionality?
Thanks so much!
You might want to try html5 websocket.
For JavaScript and ajax, refresh the page at a timed interval. Or better fetch new messages via an ajax call and append to the DOM.