I’m new to Vue but have been trying to learn by creating an app. I started it using Quasar and configured it to use vite. When trying to point Vue Designer at the existing project, it told me to add stuff to vite.config.js but I don’t have this file. I think I’ve managed to make the right entries to quasar.config.js but it would be really helpful if the designer provided suitable instructions for this setup.
My test project is intended to be implemented as part of an existing site - I need to pass an ID to it (which it then uses to make API requests) so currently, I have to go to 127.0.0.1:8000/#/ID_NUMBER/ which works in a browser but, when using the designer, any attempt to open the page results in a 404. Is there any way to control the URL that Vue Designer requests?
You can hard-code the dev-server URL by passing it as an option to the vite-plugin, like this:
//... existing config parameters
/* Please ensure that you update this URL with the actual URL of your app-server. */
local: 'http://127.0.0.1:8000/MY_ID', // App-server URL
We also have a sample app for your reference here:
This project is a fork of a rewrite of Danny Connell’s “Quasar V1: Weather App for Mobile, Desktop & Web (Vue JS 2)” application he built for his Udemy course of the same name. This template pre-includes the Pinegrow Vite Plugin and other goodies for Vue Designer.
Oh… I click on index.html… blank page. I try clicking app.vue… blank page. If I close the app.vue tab and click on app.vue again, the tab opens and displays the page successfully! But then I get this :
In case you need more time to trial, please drop an email to firstname.lastname@example.org, and we are happy to assist with an extension.
Unlike simple html project, our scope of what we can support in Vue Designer is quite broad (various setups), so we are doing our best to support all type of apps. We would like to explore solutions for any setups with limitations, or document the same.
Yea, as I mentioned, I’m quite new to Vue so it’s entirely possible (100% definite) that I’m doing things in a horrific Frankenstein’s Monster kinda way. With the different versions of Vue, different APIs, throwing Quasar into the mix, finding random snippets of code on StackOverflow, getting utterly terrible advice from ChatGPT… it’s not easy to ensure I’m doing things in a consistent or correct manner
Happy to grant access to repo if you’d like to ensure that Vue Designer plays well when pointed at terrible code Will email…