@curi/vue

About#

This package enables you to use Curi alongside VueJS.

Installation#

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

Prefer inline scripts?

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>

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 Curi is in async mode, you will still need to wait for it to emit its first response before you can render. This can be done by calling your rendering code in a callback function passed to router.respond().

router.respond(() => {
  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)
    }
  });
});