---
title: "Routing and state management in the JSS Vue.js sample app"
slug: "routing-and-state-management-in-the-jss-vue-js-sample-app"
abstract: "Overview of client-side and server-side routing and state management flow"
---
# Routing and state management in the JSS Vue.js sample app

The sample app uses dynamic routing based on the [Layout Service](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/layout-service.html "Layout Service") (or local [route data files](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/types-of-jss-manifest-data.html "Types of JSS Manifest data") in disconnected mode) and uses route/navigation changes to trigger app state changes. Tracing the primary execution flow must begin with the route configuration.

> [!tip]
> This execution flow mentions the `SitecoreJssStore` plugin. The plugin helps developers [access Sitecore context and route data](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/the-sitecore-context-and-route-level-data-in-the-jss-vue-js-sample-app.html "The Sitecore Context and route-level data in the JSS Vue.js sample app").

<details>
<summary><h2>Client-side routing</h2></summary>

Starting from the main client-side entry point of the app in the `src/main.js` file, the following describes the flow of the client-side routing:

- In the file `src/main.js`, data for server-side rendering (SSR) and state data are gathered and passed on to `src/createApp.js`.
- In the file `src/createApp.js`, the Vue app instance is created and configured along with the app router, defined in `src/router.js` , and rendering is handed over to `src/AppRoot.vue`. If an initial state/route data is provided for the app, the application sets and manages the state using a customizable Vue plugin for JSS located in the file `src/lib/SitecoreJssStorePlugin.js`.
- In the file `src/AppRoot.vue`, the `<router-view />` component is responsible for rendering the components matched for the current route, as defined in `src/router.js`.
- In the file `src/router.js` the router is configured to respond to app route changes and pass them to the `src/RouteHandler.vue` component.
- In the file `src/RouteHandler.vue`, route/Layout Service data is provided by the `SitecoreJssStorePlugin` to a Vue reactive data object. If no initial data is present, Layout Service data is acquired for the current route, and the route and language state of the app is updated. Subsequent route changes update the global app state through the `src/lib/SitecoreJssStorePlugin.js`.
- In the file `src/RouteHandler.vue`, actual app markup rendering is passed off to the `Layout.vue` component. Because the global app state is bound to a reactive data object, the `src/Layout.vue` component re-renders when new Layout Service/route data is received. Also, the global app state provides a way for components that live outside `src/Layout.vue` to react to route/context data changes.
- In the file `src/Layout.vue`, the shell HTML and global elements of the JSS app along with its root Placeholder(s) are rendered.
- The remaining structure of the route is defined by the route data, which defines which components - and their content data - live in each placeholder.

</details>

<details>
<summary><h2>Server-side routing</h2></summary>

When the Vue app is prerendered by a Node server, it returns HTML to the client in the initial response. This means that the route data flow is similar to client-side routing but has a few key differences.

The following describes how the server-side route data flow differs from the client-side routing:

- The first step varies based on application mode:
    - In [integrated mode](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode") only, Sitecore receives the request, parses the route server-side, and determines whether the requested item is handled by a JSS application, and which bundle to execute.
    - In [headless mode only](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/headless-server-side-rendering-mode.html "Headless server-side rendering mode"), the Node SSR proxy receives a request and passes it on to a Sitecore layout service.
- The Node host invokes the `renderView` function from the server bundle located in the `server/server.js` file. The function arguments include the route data/Layout Service output.
- The `renderView` function performs the following steps:
    - Receives the data to use when server-side rendering (layout service, dictionary).
    - Creates and initializes the app through the `src/createApp.js` file used in client-side rendering.
    - In the file `src/createApp.js`, SSR data is set into the initial state of the application using the `src/lib/SitecoreJssStorePlugin.js` plugin.
    - Renders the app to HTML using Vue tools for SSR.
    - Embeds the rendered app in the `index.html` template and sets metadata and the SSR state. The SSR state (`window`.`__JSS_STATE__`) is used to rehydrate the app state on the client, preventing the need to call Layout Service for initial route data.
    - Invokes the render callback function with the final HTML.

</details>