@curi/vue

Installation

The package can be installed through npm (you need to have Node & NPM installed).

npm install @curi/vue

Prefer inline scripts? A full (.umd.js) and minified (.min.js) script is available for every version through Unpkg. You can access the package's exports through window.CuriVue.

About

This package enables you to use Curi alongside VueJS.

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

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 = curi(history, routes);
Vue.use(CuriPlugin, { router });

<curi-block>

The <curi-block> component can be used to automatically block navigation from a page. This will only block in-app navigation. If the user attempts to leave your application, they will not be blocked.

The <curi-block> expects two props: active and confirm.

  • active - When this is true, navigation will be blocked and when it is false, navigation will be allowed. If you do not provide this prop, it will default to true.
  • confirm - The function that will be called to confirm/deny the navigation.
<template>
  <div>
    <!-- ... -->
    <curi-block :active="active" :confirm="confirm" />
  </div>
</template>

<script>
  export default {
    data: {
      active: true
    },
    methods: {
      confirm(information, go, stay) {
        const confirmed = window.confirm('Navigate?');
        if (confirmed) {
          go();
        } else {
          stay();
        }
      }
    }
  }
</script>

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".

Note: You should only have one focused element rendered at a time.
<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>