Use Vue dev tool with Laravel Valet - laravel

I have a laravel project running on laravel valet and I can't get the vue dev tool to work on it.
Here is what it says:
Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I have gone to manage extensions and selected allow access to file URLs.
Any help would be greatly appreciated!

Related

Vite did not Work Properly loading asset on laravel 9?

Vite didnt load asset properly on my laravel 9 project. i've been facing this problem when using laravel 9 with Vite. first when i install laravel breeze i though the breeze is the problem, but now i try using jetstream it has the same issue. please see the screenshot below. can someone help me ?
I think you need to run the Vite server using npm run dev. That will also take care of hot reloading
I run "npm run dev" command by mistake. And website is started using dev url. I searched for a solution but never found. I found solution myself. You need to delete "hot" file in your public folder on your hosting.
In you hosting go to "public" path and delete named "hot" file.

Connect Laravel pretty url and nuxt js

I satarted a project based on a Laravel-Nuxt Starter kit, found it here : https://bestofphp.com/repo/cretueusebiu-laravel-nuxt-php-starter-projects
I connected it to Laragon, so I can have pretty urls and making it work on Apache and MySQL. It works nocely, and when I do npm run start, I can access the website locally on localhost:3000 and it updates. However, if I use the pretty url given by Laragon, example.home, it goes to the index.html in the public server, but it doesn't update, no matter what I do. I tried npm run build, but the public folder isnt updated, the changes I do in the Vue component are only visible in localhost:3000.
What can I do to update the public folder according to the changes I do ?
Thank you !

Laravel Debugbar with laravel api routes

I have a Laravel API.
The front end application is completely separate from Laravel.
All Laravel routes are located in routes/api.php
Is there any way to make the Laravel Debugbar work in this case?
https://github.com/barryvdh/laravel-debugbar
barryvdh/laravel-debugbar needs to be installed on your Laravel project (actually all debuggers need to be present within the project to audit every request) and get its files served to the frontend to work (edit repsonses with Middleware/InjectDebugbar.php).
I won't say that it is impossible to get its insights on a separate front, who knows if you are ready to fork the project and communicate with the debug bar APIs.
For a simpler alternatives you can use:
laravel/telescope docs repo
Clockwork browser extension website repo
spatie/laravel-ray(paid) website docs

how integrate an existing vuejs app created with vue-cli into a laravel project

I've a vuejs app builded with the latest vue-cli, the vuejs app runs ok with the development server and communicates with the laravel app, but now I'd prefer that laravel handle this static files...if I build the js files with yarn run build this generates me several files, I could add thems to my laravel homepage but I'm afraid that if in the future I make some change and build these files again, I could get different file names...
what is the best approach for this???...I've found several articles integrating vuejs and laravel but all these are using the vuejs tool incorporated with laravel
thanks so much guys

Vue components not working on live server

My components are not being rendered when I upload my project on a live server. It works fine on my local machine after I run npm run production when I upload the changes none of the vue components are being loaded in the page. On my local machine the vuejs dev tools tells me the site is running in production but when I go to the live server in the console it says
You are running Vue in development mode.
and on the browser taskbar it says
Vue.js not detected
I have no idea how to fix it. I saw a post saying I should upload the node_modules folder to the live server. But I doubt that would change anything plus it would take too long. How can I fix this?
I found out that the server was loading an older copy of the js file. So I had to apply cache busting by adding a phantom query to the end of the file. <script type="text/javascript" src="/js/app.js?v=2.4.1"></script>

Resources