Generate ~500 pages

Good morning,
We’re writing a directory for stock data (financials), one stock is one Vue app. We want to automatically generate about 500 entries (with routers?) which would become distinct webpages with distinct URLs, one for each listing.

Target URL structure for our 500 stocks:

[1] Company Overview Page (total: ~500):
https://www.thedomain.de/stocks/<ISIN>/<WKN>/<ticker-symbol>/<company name>/
e.g. https://www.thedomain.de/stocks/US1234125/DE1234123/AAPL/Apple-Inc/

[2] Company Metric Page (total: about 10 pages for each company, so 500 * 10 = 5000 total)
https://www.thedomain.de/stocks/<ISIN>/<WKN>/<ticker-symbol>/<company name>/revenue
e.g. https://www.thedomain.de/stocks/US1234125/DE1234123/AAPL/Apple-Inc/revenue

Right now, we only have finished Vue.js for the Company Overview Page [1].

Is this “page generation” supported by Vue, or what do you think is one of the best practice to this? I’m literally lost here :). We have all required data as JSON.

Sound like you are looing for Vue Router. See https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes for some examples on how to use parameters.

@fiedsch: Thank you so much for the quick reply. Our final layout should look quite similar to Yahoo Finance ( https://finance.yahoo.com/quote/V/ for “Visa stock” ).

Do you think DynamicMatching is the way to go to implement that?

I have also heard about Nuxt.JS and Gridsome from a friend, but am unsure whether they are right tool for this project. We definitely want these 5000+ subsites to be “static” in a way and SEO-friendly.

Another way to go could be: have a Vue app that takes care of the dynamic data for a given page (the “1D”, “5D”, “1M”, … Views in your yahoo example). This Vue-App would be the same code/the same App for every of your “static” sites. Then have some backend that delivers these static sites and provides the respective data to the Vue-App that is built into every of these pages. When implementing your backend you are completely free to use whatever suits best in your opinion as this does not really has anything to do with the Vue-App.