@curi/vue

About#

This package enables you to use Curi alongside VueJS.

Installation#

If you have Node and NPM installed, you can install the package through npm (or yarn if you prefer).

npm install @curi/vue
yarn add @curi/vue

Prefer inline scripts? Every version is available through Unpkg. There are both full and minified versions available. You can access the package's exports through window.CuriVue.

<script src="https://unpkg.com/@curi/vue@1.0.0-beta.23/dist/curi-vue.umd.js"></script>
<script type="text/javascript">
  window.CuriVue
</script>

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="$curi.response">
    <component :is="$curi.response.body" />
  </main>
</template>

Usage#

You can either use a Vue component or a render function to render Curi responses.

<!-- App.vue -->
<template>
  <div>
    <NavLinks />
    <component :is="$curi.response.body" />
  </div>
</template>

<script>
  import NavLinks from './NavLinks';
  export default {
    name: 'app',
    components: { NavLinks }
  }
</script>
// renderFunction.js
import NavLinks from './NavLinks';
export default function renderFunction(h) {
  return h('div', [
    h(NavLinks),
    h(this.$curi.response.body)
  ]);
}

If the router has async routes, you will need to wait for it to emit its first response before you can render. This can be done by calling your rendering code in an observer function passed to router.once().

router.once(() => {
  const vm = new Vue({
    el: '#app',
      
    // either use a template or a render function
    // TEMPLATE
    template: '<app />',
    components: { app: App },

    // RENDER FUNCTION
    render: function(h) {
      return h(this.$curi.response.body)
    }
  });
});