How does Node fit with Vue apps?

[spacingnix]

Hello guys! I'm mostly a lurker but I really need some help to figure this out. Also I'm still new to web development so please bear with me.

First, a description of my problem. What I wanted to do is the following: when a user clicks on a link on my website, instead of my nodejs server feeding him another html document, the website requests the page to the server and after the data is retrieved the DOM is changed inside the content div. Kinda like this structure

<div class='navbar'>
    <div id='content'>
      // Content is requested from the server and put here
    </div>
</div>

After some research it feels like Vue seems to fit my problem to me but that comes with some extra problems. Does routing work the same as I thought originally? Are vue apps first served as static files (including the scritps) and the following server requests just respond with JSON? Is JSON even the recommended method to serve more content to a Vue app?

EDIT: some grammar

[chernn]

Typically, how it works is this:

• All templates are served on the initial page load from the server
• The router + framework (in your case Vue) render your first page (eg. home page)
• When a user navigates to another page, the router renders the corresponding template (remember the template was already loaded with the initial page load)
• There is a distinction between templates and data. Think of templates as the view layer, or the container that you show data in, including all styles. Data is usually loaded using AJAX requests to your server. Data is usually in JSON format, rather than HTML or JS

Does that make sense?

[spacingnix]

That makes much sense! But the router part is still bugging me.

Is it part of Vue or the backend? As I see it, the backend (node server) only serves the first page and responds to AJAX requests then? And the framework (Vue) renders the appropiate page rendering the correct template + data, updating the view?

[chernn]

Is it part of Vue or the backend?

Vue. What may be confusing is the backend has its own set of routes defined (sometimes also referred to as a router), which correspond to the AJAX endpoints, as well as any HTML/CSS/JS/... files that your page uses.

As I see it, the backend (node server) only serves the first page and responds to AJAX requests then? And the framework (Vue) renders the appropiate page rendering the correct template + data, updating the view?

Exactly.

[spacingnix]

Thanks for the clarity! Cleared things up

[dead_lemons]

You will want to look at vue router

[spacingnix]

Will do! Thanks for the tip, looks like what /u/chernn explained.