Help getting started

Vue Designer
1

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?

2

Welcome to Vue Designer @GrumpyBadger!

That is a very fair point, we definitely need specific instructions for Quasar config file, I will prioritize it.

Meanwhile, after installing npm install -D @pinegrow/vite-plugin, please add it to the quasar config like this:

image
image1014×443 41.1 KB

You can hard-code the dev-server URL by passing it as an option to the vite-plugin, like this:

[
    require("@pinegrow/vite-plugin").liveDesigner, 
    {
        //... existing config parameters
        devServerUrls: {
            /* 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:

Live Demo - https://pg-quasar-weather-app.netlify.app/
Github - GitHub - Pinegrow/pg-quasar-weather-app: Quasar Weather App

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.

image
image1465×935 145 KB

3

As you have a special setup, let me know how you go with the above instructions, and we sure can make it work!

I kinda reserved Quasar for a special release, as it is very special in its own ways :slight_smile:

4

Seem to have got a step closer :
image

But clicking on the index page or any of the layouts / components just results in a blank page in the editor. Dev tools console doesn’t show any errors. Not sure what else to try.

I may try creating a new project from scratch. A few days into the trial license and I’ve not actually managed to try using the designer yet…

5

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 :

image
image853×228 15.5 KB

6

Hi @GrumptyBadger,

Once you open app.vue, when you click on the root node (step 5 in the below screenshot, ignore step6), does it open your app tree? If so, please share a screenshot.

image
image1443×1392 98.9 KB

7

Sure :
image

In case it’s the router that’s causing problems, I tried IndexPage.vue which is what should get loaded. The page displays but then I get same error.

8

Can only post one image per post so here’s tree for IndexPage.vue

(gah, now I’m apparently posting too quickly!)

image

9

Thanks bunch for sharing the screenshots. I notice that you are not using script setup, and rather using defineComponent way which has some restrictions on how it works with in Vue Designer.

I might need to look into this pattern a little bit more, andy by any chance, do you have a sample repo I could try at my end?

Alternatively, are you able to clone the Weather app from here GitHub - Pinegrow/pg-quasar-weather-app: Quasar Weather App, and check if you are encountering the same warning message. If it works fine, then I believe it could be what I explained above.

In case you need more time to trial, please drop an email to support@pinegrow.com, 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.

10

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 :slight_smile:

Happy to grant access to repo if you’d like to ensure that Vue Designer plays well when pointed at terrible code :slight_smile: Will email…

1 Like