I did not find a better integrated solution after considerable research and experimentation. However, I did take a different approach.

Vue-Meta, prerendering (using history mode), and sitemap generation really did everything I needed for Google searches. Google renders the pages and could easily find the meta tags. This is great, for people using Google and Ask for searches. However, for the other search engines and the test tool that you noted, the meta data is not found because these engines do not crawl through the javascript.

After a lot of reading, I noticed a dismissive attitude on the part of some for this meta tag rendering problem, because Google accounts for the overhelmingly majority of the searches. I get it, but avoiding the challenge is not the solution in order to reach all customers. SPA, by design, is at best a 90% baked solution for all search engines.

Since I did not need dymanic meta tags, I took the post-build approach of inserting the meta tags into the index.html file for each page that was produced by prerendering. I also removed the Vue-Meta tag code from each page to remove any conflict. I inserted the meta tags into JSON, along with some basic informatoin (i.e. file path), and after the quasar build completes I run a lightweight tool to read thorugh the JSON and insert the tags on the appropriate page. The tags are human readable and readily availalbe for the test tool and for all of the search engines. The best part of this solution is that all of the tags are in a single document, easy to review and quick to modify. This took a couple of hours to setup and test.

Thanks for your suggestion, which may help someone else.

I did not find a better integrated solution after considerable research and experimentation. However, I did take a different approach.

Vue-Meta, prerendering (using history mode), and sitemap generation really did everything I needed for Google searches. Google renders the pages and could easily find the meta tags. This is great, for people using Google and Ask for searches. However, for the other search engines and the test tool that you noted, the meta data is not found because these engines do not crawl through the javascript.

After a lot of reading, I noticed a dismissive attitude on the part of some for this meta tag rendering problem, because Google accounts for the overhelmingly majority of the searches. I get it, but avoiding the challenge is not the solution in order to reach all customers. SPA, by design, is at best a 90% baked solution for all search engines.

Since I did not need dymanic meta tags, I took the post-build approach of inserting the meta tags into the index.html file for each page that was produced by prerendering. I also removed the Vue-Meta tag code from each page to remove any conflict. I inserted the meta tags into JSON, along with some basic informatoin (i.e. file path), and after the quasar build completes I run a lightweight tool to read thorugh the JSON and insert the tags on the appropriate page. The tags are human readable and readily availalbe for the test tool and for all of the search engines. The best part of this solution is that all of the tags are in a single document, easy to review and quick to modify. This took a couple of hours to setup and test.

Thanks for your suggestion, which may help someone else.

Sorry, I have been pulled away for publishing. Thus far I have not found a better solution, and I have looked at this from a lot of angles. I will start working on this again tomorrow and let you know if I find a better solution.

Thank you for detailing how you were able to work around this problem!!

How did you implement the meta and verify that it worked? Thanks!

How did you solve this problem?

Applied custom CSS per the below article and everything else is easily aligned through Flexbox. Way to go Quasar team!!

https://stackoverflow.com/questions/60032018/setting-a-background-image-in-quasar-that-dont-overlay-the-card

Thanks for the suggestion. I have explored this and I can’t see it working for stacking two images (larger background and inner-placed foreground) and some text. I am still looking at other options, including custom CSS, which feels wrong.

I am new to Quasar and really finding it useful. I have a new challenge. What is the best way to overlay several UI elements in this framework. I have background image that I would like to wrap across the page and over that image lay other UI elements (for example, another image(s) and text.

I thought about simply creating overlapping flex grid rows of elements, but this does not seem to be possible.

Any guidance would be greatly appreciated.

Thanks!