The Sitecore Context and route-level data in the JSS Vue.js sample app

The JSS Vue app ships with a customizable Vue plugin that attaches Sitecore context and route data - in other words, route-level data, as opposed to component-level data - to any Vue component instance. Common examples of needing context or route data might be to get at page title or meta keywords fields stored on the route level or to conditionally alter rendering in advanced Sitecore editors.

To provide access to the Sitecore Context and to route data, the sample application uses the SitecoreJssStorePlugin plugin. You can inspect and customize the plugin in the lib/SitecoreJssStorePlugin.js file.

The following example shows how the sample application uses the plugin:

import SitecoreJssStorePlugin from './lib/SitecoreJssStorePlugin';

app.use(SitecoreJssStorePlugin);

The plugin adds the $jss property on the Vue instance. The $jss property provides access to the sitecoreContext() and routeData() functions.