Known issues, troubleshooting and workarounds.
While we have made extensive efforts to support every Vite-powered Vue project, there is always a possibility that your project may require additional setup.
Please contact us, and we will do our best to help you make it work in Vue Designer and extend our support.
Remote Connection
If running the Vite-server remotely (for eg, in a WSL setup), Pinegrow Vite plugin (or the meta-framework specific modules) needs the additional ability to connect with the Vue Designer local instance.
Add the ip-address or hostname of your machine in your local network via menu Help & Settings > Settings. You can optionally use a port number different to the default one (40000).
On windows, run ipconfig /all to get the local ip-address of your machine.
On linux, run ifconfig to get the local ip-address of your machine.
On mac, check System Preferences > Sharing.
Allow the network connection attempt by Pinegrow Vite plugin (from your remote machine) to your local Vue Designer instance.
Source-DOM Mapping
As covered in the Pinegrow Vite Plugin’s liveDesigner module section, Vite’s handleHotUpdate hook is used to feed Vue Components opened in Vue Designer with tags enriched with unique IDs (generated within Vue Designer) to establish source-dom mapping which enables the visual editing capability.
Occasionally, when there are some errors either on Vite dev-server end or if the HMR update wasn’t successful, this mapping can sometimes get broken. Vite, in these cases, generally logs a message in the browser console (which can be opened via the Vue menu) that a full-reload of the app is required.
To fix this issue, try these options:
- Save & Force HMR / Refresh via the Vue menu, or use the shortcut Alt/Option+S. This essentially re-mounts your currently opened component in your app by emulating a change in it’s script tag. (or)
- Repeat step-1, and refresh your page. (or)
- Save your app, re-start your dev-server and re-open your startup page. (or)
- Repeat step-3, and re-start Vue Designer before opening your startup page.
Hung nw.js process
We are aware of the nw.js process (Pinegrow apps are nw.js based apps) not getting closed when Vue Designer app is closed and stays back in your process list.
In this rare instance, when you open Vue Designer next time, the connection with your dev-server won’t be successful unless, the redundant nw.js process from the previous session is terminated.
The current workaround until we find a better solution is:
Mac OS/Linux based systems
- Close Vue Designer app by using menu File > Quit, or shortcut Cmd/Ctrl+Q
- Open your terminal, and run this command
lsof -i -P -n | grep LISTEN - Take a note of the nwjs process ID (26258 in the below image). You can identify the process by looking for the ports used by Pinegrow apps – 40000 and 40001.
- Terminate the process using this command (use the actual process ID from your terminal)
kill 26258 - Open Vue Designer and continue with your work
Windows
- Close Vue Designer app by using menu File > Quit, or shortcut Cmd/Ctrl+Q
- Open your terminal, and run this command
netstat -aon -p tcp - Take a note of the nwjs process ID (30548 in the below image). You can identify the process by looking for the ports used by Pinegrow apps – 40000 and 40001.
- Terminate the process using this command (use the actual process ID from your terminal)
taskkill /PID 30548 /F
- Open Vue Designer and continue with your work