I have just managed to install Svelte on top of Inertia js into a Laravel environment. So far it appears to work. However, I can not get the Svelte extension in google Chrome to work. I have read some comments that somewhere you need to have "dev:true" set where the default is "dev:false" I have also run npm run dev to no affect.
Any one know how to make this work?
Many Thanks !
I think dev: true props didn't add to Rollup or Webpack config file. Below is a link from the official docs:
Enable Svelte Google Chrome Dev Extension
Related
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.
When I create a tool in Laravel Nova with
php artisan nova:tool drehimself/test-tool
And then add in NovaServiceProvider.php in the function tools, should appear a layout where showed a black hole. Only that when I press the option that appears in the menu on the left side, it shows nothing, not even the url changes.
Does anyone know what it could be?
Nova tools are customizable, as they primarily consist of a single-file Vue component that is totally under your control. Within your Vue component, you are free to make HTTP requests to any controller within your application.
By default the page should come with the address and a default layout like this. Image But when I do the artisan, mine doesn't look like this
You need to compile your assets first.
Go to your tool :
cd nova-components/TestTool
Then :
# Compile your assets for local development...
npm run dev
# Compile and minify your assets...
npm run prod
In addition, you may run the NPM watch command to auto-compile your assets when they are changed:
npm run watch
Refresh, you will see your tool now.
On the right it shows the source code in dev tools live from the site, the left shows the actual .vue file content on the server.
As you can see nav-bar-icon20 {width:20px; height:20px;} has been removed, yet it still shows on the site.
Tried clearing browser cache, disabled cache in dev tools, ran php artisan cache:clear but nothing seems to work.
Thanks in advance.
Image left(source on server) and right(source from site dev tools)
Run
npm run watch-poll
to update the compiled vue file, wait for it to compile and then refresh the page
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