loading...

Using vue-router in an otherwise server-rendered application

github logo ・1 min read

Hello, I'm wondering if it's possible to use vue-router in a sub-section of a traditional web app. For instance, assuming everything is server-rendered on https://example.com, can I cordon off https://example.com/demo for Vue so that it uses the router while being included in the <script> tag just like jQuery?

I have a feeling it can be done provided the web server is configured to pass all the /demo/* URLs to /demo, but I wanted to check.

twitter logo DISCUSS (4)
markdown guide
 

Yes, that's possible. And pretty much as you described it. πŸ˜€

The /demo page can be initially fetched/rendered via server side (say, via a GET request/route). Then, if you set up vue-router on the /demo page, it'll handle the sub-pages. Any AJAX calls from those pages can have their own routes/endpoints set up (server side), so they don't interfere with the base /demo page/route.

 

Thanks! So, you mean, the Ajax calls emanating from /demo should hit a different endpoint on the server, such as /demo-posts/make-new rather than /demo/make-new-post?

 

Yeah, that was my original thought. Although, after thinking about it a bit more, it shouldn't be necessary. Just to validate, I did a quick test using Laravel, Vue, and Axios. :)

I set up GET /demo and GET /demo/page1 routes on the backend. Hitting both of them worked fine - /demo on page load and /demo/page1 via AJAX.

Lol, yeah it sounded weird. Thanks for the effort! πŸ˜„

Classic DEV Post from Jun 6 '19

What programming best practice do you disagree with?

Discussion about an unusual interview question

Ankush Thakur profile image
Whimsical INTP programmer. Code PHP and JS for a living. On friendly terms with many other languages. Easily angered; easily consoled. πŸ˜›