@curi/vue

v2.0.0-alpha.11

GitHub logoGitHub RepoNPM logoNPM 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.

API

CuriPlugin

What does the plugin do?

  1. Register curi-link and curi-block components with Vue so they can be used anywhere within your application without manually importing.
  2. Makes the Curi router globally available to Vue components as $router.
  3. 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';

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

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

Props

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

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

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 - the hash for the location to link to

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

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 - the state to associated with the location

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>

Properties

key

A value that changes when there is a new response; the response is usually fine for this.

preserve

When true (false by default), the element will not be focused if one of its children elements is already focused.

This is useful if the element has children that are automatically focused (<input autofocus>).

<!-- <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>
  1. Installation
  2. About
  3. API
    1. CuriPlugin
    2. curi-link
    3. curi-focus