Vue

The Curi Plugin

The CuriPlugin for Vue allows you to interface your router with a Vue application. The plugin sets up a reactive object for tracking responses using an observer, so whenever there is a new response, the parts of your application that use the response will be re-rendered.

The plugin also makes the response accessible to every component in your application through the $curi property.

import Vue from "vue";
import { CuriPlugin } from "@curi/vue";

import router from "./router";

Vue.use(CuriPlugin, { router });

Rendering with the response

Vue allows you to render dynamic components using the <component :is> syntax. If you set Vue components as the body properties on your responses, you can combine <component :is> and response.body to render the appropriate component for a response.

A root component is a good place to perform general application layout, like menus, in addition to rendering the response's body.

<template>
  <header>
    <NavLinks />
  </header>
  <main>
    <component :is="$curi.response.body" />
  </main>
</template>

<script>
  import NavLinks from "./NavLinks";
  export default {
    components: { NavLinks }
  };
</script>

If your routes use an object to attach multiple components to a response, splitting them apart in computed properties may give your templates a cleaner look.

If you do attach multiple components to a response, please remember that you want every route to set the same body shape. Otherwise, you'll have to determine the shape and change how you render, which can quickly become messy.

<script>
const routes = prepareRoutes([
  {
    name: "Home",
    path: "",
    response() {
      return {
        body: {
          main: HomeMain,
          menu: HomeMenu
        }
      }
    }
  },
  // ...
]);
</script>

<template>
  <header>
    <component :is="menu" />
  </header>
  <main>
    <component :is="main" />
  </main>
</template>

<script>
  export default {
    computed: {
      main() {
        return this.$curi.response.body.main;
      },
      menu() {
        return this.$curi.response.body.menu;
      }
    }
  }
</script>

In addition to the response, the current navigation object (the previous response and the navigation action) is globally available through $curi.navigation

The router is globally available as $router.

Accessibility

Managing the application's focus when navigating is useful for users who use screen readers. The curi-focus directive provides a convenient way to focus a page's main content when it renders a new response.

You can read some more about accessibility in the accessibility guide.

<template>
  <header>
    <NavLinks />
  </header>
  <main :tabIndex="-1" v-curi-focus="$curi.response">
    <component :is="$curi.response.body" />
  </main>
</template>

<script>
  import NavLinks from "./NavLinks";
  export default {
    components: { NavLinks }
  };
</script>

Please check out the full @curi/vue API documentation to see every component that the package provides.