@curi/vue

v2.0.0-alpha.12

GitHub Repo

NPM Package

About

This package enables you to use Curi alongside VueJS.

For more information on using Curi with Vue, please check out the Vue guide.

Installation

npm install @curi/vue

UMD scripts script are also available through Unpkg. You can access the package's exports using window.CuriVue.

CuriPlugin

What does the plugin do?

Register curi-link and curi-block components with Vue so they can be used anywhere within your application without manually importing.
Makes the Curi router globally available to Vue components as $router.
Makes responses and navigations available to components through the $curi property. $curi is responsive, so when a new response is emitted, $curi.response and $curi.navigation will automatically be updated.

import { CuriPlugin } from '@curi/vue';

let router = createRouter(history, routes);
Vue.use(CuriPlugin, { router });

curi-link

The curi-link component will render an anchor (<a>) element.

Props

to

name - The name of the route to navigate to. This is required.

<curi-link name='Home'>Home</curi-link>
<!-- <a href="/">Home</a> -->

params

params - An object containing the key-value params for the route. For example, if you are linking to a route with the path album/:title, the params object should have a title property.

<curi-link
  name='Album'
  :params="{ title: 'Coloring Book' }"
  >
  Coloring Book
</curi-link>

hash

hash - the hash for the location to link to

<curi-link name="Home" hash="test">Home</curi-link>
<!-- <a href="/#test">Home</a> -->

query

query - the query for the location to link to

<curi-link name="Home" query="one=1">Home</curi-link>
<!-- <a href="/?one=1">Home</a> -->

state

state - the state to associated with the location

slots

The curi-link's can take either a regular slot or a scoped slot.

When given a scoped slot, the curi-link will inject the link's navigation state (a navigating property). The navigation state is false by default, true when the curi-link is clicked, and false when the the navigation finishes/is cancelled.

<!-- a regular slot -->
<curi-link name="Home">
  Home
</curi-link>

<!-- a scoped slot -->
<curi-link name="User" :params="{ id: 1 }">
  <template slot-scope="{ navigating }">
    User 1
    <spinner v-if="navigating" />
  </template>
</curi-ink>

curi-focus

The curi-focus directive is used to specify an element that should be focused when a new response is emitted.

The DOM component that gets the ref should either already be "focusable", like an <input>, or be given a tabIndex prop (usually with the value of -1). If neither of these conditions is met, then the document's <body> will be focused.

The focused element will have an outline (the exact style varies by browser). You can remove this visual with a CSS outline of "none".

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

<!-- <input> will be focused -->
<template>
  <main
    :tabIndex="-1"
    v-curi-focus="{ key: $curi.response, preserve: true}"
  >
    <input autofocus />
  </main>
</template>

<!-- <main> will be focused -->
<template>
  <main :tabIndex="-1" v-curi-focus="{ key: $curi.response }">
    <input autofocus />
  </main>
</template>

preventScroll

When true (false by default), the element will not be scrolled to when it is focused.

This only works in browsers that support the preventScroll option for focus.

<template>
  <main
    :tabIndex="-1"
    v-curi-focus="{ key: $curi.response, preventScroll: true}"
  >
  <component :is="$curi.response.body" />
  </main>
</template>

router

render

other