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.
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
.
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.
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.
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
.
The curi-link
also takes hash
, query
, and state
props to attach their values to the location that will be navigated to.
Please check out the full @curi/vue
API documentation to see every component that the package provides.