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>
let routes = prepareRoutes([
  {
    name: "Home",
    path: "",
    respond() {
      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>

Navigating

The curi-link component is used to navigate between routes within an application. When it renders in the DOM, it will render as an anchor (<a>) element.

The curi-link's name prop describes which route clicking the link should navigate to. If you pass an invalid route name, Curi will warn you.

If a route has any params (or if any of a route's ancestors have params for nested routes), the params prop is used to pass these to the curi-link.

<template>
  <nav>
    <ul>
      <li>
        <curi-link name="Home">Home</curi-link>
      </li>
      <li>
        <curi-link name="About">About</curi-link>
      </li>
      <li>
        <curi-link name="User" :params="{ id: 'blue' }">
          Blue
        </curi-link>
      </li>
    </ul>
  </nav>
</template>

The curi-link also takes hash, query, and state props to attach their values to the location that will be navigated to.

<curi-link name="Home" hash="details">Home</curi-link>
// renders
<a href="/#details">Home</a>

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