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
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
A root component is a good place to perform general application layout, like menus, in addition to rendering the response's
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
The router is globally available as
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.
curi-link component is used to navigate between routes within an application. When it renders in the DOM, it will render as an anchor (
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 also takes
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.