Vue Inertia Shows #routes when I load the page - vue.js

I am using Vue js with laravel using Inertia. I installed the required packages and it was working fine then I committed the code and cloned the same from my office system. Now when I open the page it shows #routes.
I am using Ziggy by tighten and I re-installed all those packages but It shows the same.
Thanks.

Related

Laravel with JetStream and LiveWire not rendering (Tailwind)

I started a new project in Laravel 8 with Jetstream and LiveWire.
It seems everything ok, but I'm not able to show correctly the auth pages.
I created a new laravel project.
I installed the jetstream package with LiveWire
https://jetstream.laravel.com/2.x/installation.html
This is the result of login page:
The css is not working.
After days of workaround on this issue, I found the problem.
After npm run dev, the console display the following line:
You have enabled the JIT engine which is currently in preview.
Documentation Here
For now I changed mode: 'JIT' to mode: '' in file tailwind.config.js
The project seems to work.

Heroicons not appearing in chrome for TailwindUI, but appears broken in Firefox

I bought and installed TailwindUI. I copied and pasted one of the Navigation components just to see how it looks in the app and the hamburger menu and the notification bell (both part of Heroicons) aren't appearing.
When I click on the part where the menu should dropdown it works. But all that's present is a little square that sort of looks like a checkbox.
Here is what it looks like in Firefox (mobile debugger):
Testing on Safari and it looks like Chrome.
In node_modules I can see heroicons are present:
The app uses Elixir/Phoenix, Vue, Webpack, and Tailwindcss.
Anyone know what the issue is or how I'd go about debugging it?
If you are not using SVG syntax, you have to install and import #heroicons/react package into your project using npm/yarn
npm install #heroicons/react
TailwindUI supports Vue 3, which does not appear to include #vue/compat. #vue/compat is a compatibility build for when one wants to migrate from Vue 2 to Vue 3. the compat build (aka, migration build) is supposed to be Vue 3 compatible but I guess it's still not enough for TailwindUI.

vue dev tools not working with vue-cli project

I've installed new vue-cli project and when launched locally and opened on localhost:8080 by running
npm run serve
Vue dev tools stayed inactive. I've read that one needs to initialize Vue instance, in order for it to work, but with vue-cli, app is initialized with createApp, but not with Vue instance.
I recently had this problem using vue cli 4.5.3. After an upgrade to 4.5.4 using vue upgrade the devtools fired up.
It was my bad. I've accidentally used vue v3 instead of v2. After switching back to 2 version, works fine.

Vue.js devtools not detecting Vue.js in standalone installation, already allowed access to file URLs

I have a vue.js + laravel installation project on my local server where the Vue.js devtools detects Vue.js and I'm able to use it. However, when I do a standalone Vue.js installation using 'vue create', Vue.js is not detected by devtools. I already allowed access to file URLs under chrome extension but it is still not working. The devtools was detecting Vue.js in the laravel version just fine without allowing access to file URLS.
Is there something else basic that I'm missing to get Vue.js devtools to work? There must be a simple step I missed because there should be loads of people creating fresh Vue.js projects on local server and getting devtools to work.
I'm using 'npm run serve' to run Vue.js in localhost, is this supposed to be detected by Vue.js devtools by default?
solved by reinstalling Vue.js 2 instead of the Vue.js 3 preview version as of 2020-08-26.

how to build electron app with vue cli 3?

Im building my first electron app and I want to use VueJs, I have installed vue via the cli3.
When i run the app in dev its all fine, however in production (after running a build) there is a warning in the console that vue builds are designed to run over an http-server. This is usually fine since it will be, however to embed vue in an electron app, I wont be using an http-server to serve the vue app.
the net effect of this is that when i build my electron app and run it, I just see a blank screen and none of the js/css/img files get loaded (all 404).
Does anyone know how to resolve this?
I reviewed so many vue/electron tutorials but they only cover dev, none of them seem to go as far as building it and running the finished product.