I started working on a new Laravel, Vue and inertiaJS project and I'm using VS code editor. The problem I'm having is that Vetur isn't getting that I'm using Inertia not pure Vue components; therefore, It keeps on highlighting everything in red because It assumes that everything is unidentified and unknown.
The below image is to demonstrate what I mean:
Is there a way I can work with InertiaJS on VS Code without having these disturbing errors everywhere and see only valid errors?
Vetur is deprecated, which is likely the cause of the problem. Switch to Volar.
From the Vue docs:
TIP
Volar replaces Vetur, our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
Related
Installed Backpack on a fresh Laravel install. Maybe I'm missing something but is it normal for the views Backpack adds to have no CSS? It's pure HTML with no formatting. I've watched videos of people installing it and they show the webpage properly formatted.
You are correct, if properly inatalled Backpack does come with CSS and JS. To get it, you should follow the installation steps in the documentation.
One important step that you might have missed is “php artisan backpack:install”, which will also publish the needed CSS and JS.
I have installed vue 3 with vuetify alpha version for vue 3 using vite. But almost none of the UI components works correctly. The colors are diferent, even if I copy-paste the template and script tags for the respective UI component.
For example this is how it looks for me:
And this is how it looks on their website:
AM I doing something incorrectly ? Or is it really incompatible and not reliable with vue 3
The upgrade is not very straightforward because a lot of props has been changed. And the documentation for vuetify 3 is outdated so you can't just copy and paste from the documentation. Currently, I'm a afraid that you should look into the source code to figure it out.
I have strange problem with syntax and autocomplete in blade files. Yesterday it's worked normally, I didn't update any plugins or PhpStorm, I have newest versions.
After closing PhpStorm and launching it again couple of hours later, blade files stopped working. At the beginning HTML not worked too, but I changed some configuration in Editor > File Types and syntax for HTML came back (next I removed every changes and it still working for HTML code).
I had turn on Laravel Plugin and Blade Syntax in plugins. Syntax for directives don't had colors and auto-complete not working, tags {{}} etc. not working too. I fully removed PhpStorm, used Invalidate caches and this not helped me with that problem.
Under this post you can see how it looks like, directives should have purple color syntax, php code not working.
Could someone help me with that problem? I will be very appreciated. (I tried find some information in the google, but with no effect.)
Screen with code
Whole IDE
Before broke
New photo without material design theme
I am new to VueJS. I am following one of the YouTube tutorial Let's Build a Multi-Purpose Laravel + Vue Application by Code Inspire
This is his github package.
https://github.com/Hujjat/laravStart
I notice. When I logout and login again, it will redirect to .js file.
for my case:-
http://laravel-vuejs.test/js/popper.js.map
and I clone his project. I tried with inspect, I login and logout and login. It will redirect to
http://laravstart.test/js/laravel-vue-pagination.common.js.map
It will show 404 error. I have every time remove the /js/xxxx.js.map then only back to normal.
Both of my project, when I run inspect. I notice have the Chrome warning.
DevTools failed to parse SourceMap: http://laravstart.test/js/laravel-vue-pagination.common.js.map
DevTools failed to parse SourceMap: http://laravel-vuejs.test/js/laravel-js/popper.js.map
IMPORTANT NOTE It only happen when I open the chrome inspect windows. If I close it, it will back to normal means won't redirect to JS file.
Screen record: https://imgur.com/gZzcX5L
I tested with Chrome and Firefox with inspect both having the same problem.
But in Chrome if I off setting for source map, it will not have this issue.
Anyone how to fix it? Compile source map issue? the js.map file not exist.
If you use Laravel Mix, you can generate source maps by calling the mix.sourceMaps() method in your webpack.mix.js file.
This resolves the problem.
mix.js('resources/js/app.js', 'public/js').sourceMaps();
Laravel Mix Source Maps documentation
I found that one solution is created a dummy file at public/js/popper.js.map, then it will back to normal, basically just fulfil what browser developer tool required, it will not redirect to that specific file.
I believe this is browser developer tools behaviour.
I received solution from the laraStart repo owner.
This error happens when you have an error and compile your javascript
code. Later, when you fix it, it will remain in cache and happens.
Please try to compile your script again and login to see.
The solution is also working as well.
I run npm update and npm run dev, it is working fine.
Open "find in files", find every commented line of code that has
sourceMappingURL=...
Delete the whole commented line for each.
There should be 3 entries here in public/app.js and 1 at the end of popper.js.
If you are using Brave shields or an ad blocker, turn it off
The best solution is just copy the popper.js.min from
node_modules
- popper.js
- dist
-> popper.js.min
this solved my headache
There are two SourceMap error in my case so the two previous answers applied to me.
1) By adding sourceMaps() in the mix.js function in webpack.mix.js file
mix.js('resources/js/app.js', 'public/js').sourceMaps();
to remove popper.js source map error.
2) Adding toastr.js.map to public/js folder to remove toastr.js source map error.
Please I have not work with Vue before, please can anyone help me? I have Laravel code with Vue. I want to edit *.vue component such as navbar.vue but when add or remove anything and save there is no action in html (in browser)
Install and configure webpack to compile you vue files. If its already install, then do npm run watch to compile vue files to see your changes