Vue js SSR: Can I have a multi-page single-page application?

Question

I know this sounds like a massive contradiction and it is, but I don't know how to otherwise phrase it.

It seems like with vue server-side-rendering one can only have single page applications.

But for several reasons I need to have an application with multiple real server side generated pages with real URLs and each of them behave like the single page applications which vue js provides.

e.g. these would be the server side routes(i.e. URLs):

/
/contact
/articles
/authors

And then I'd like to be able to mount the vue client routing on each server generated page like

/articles/lastweek
/articles/nextweek

where lastweek and nextweek would be client side routes. Same for authors

/authors/sports
/authors/politics
/authors/lifestyle

where sports, politics and lifestyle would client side routes.

So /articles and /authors would behave like they were each a single page application except that they aren't, since they are are server generated pages.

I hope that doesn't sound too weird.

Answer 1

Yes, you can do this! We just starting implementing vue in this exact fashion at my work. All you need to do is include the vue.js scripts on each server generated page, then just have a different vue app for each server view. We use the folder structure to keep it organized.

src
--content
----articles
------lastweek.css
------lastweek.js
------nextweek.css
------nextweek.js
----author
------sports.css
------sports.js
....

So each view would get it's own css and js. The js is the vue app for the view. You can structure your project in whatever way works best for your project, I just wanted to post an example.