@curi/vue

About#

This package enables you to use Curi alongside VueJS.

Installation#

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

If you prefer to use script tags, Unpkg will always have the latest version of @curi/vue available for you.

<script src="https://unpkg.com/@curi/vue@1.0.0-beta.14/dist/curi-vue.js" />

There is also a minimized version available if you change the filename to vue.min.js. The package will be attached to the window as window.CuriVue.

API#

CuriPlugin#

What does the plugin do?

  1. First, it will register <curi-link> and <curi-block> components with Vue. You can use these components anywhere within your application.
  2. Second, it makes your router globally available to Vue components as $router.
  3. Finally, it makes responses and actions available to components through the $curi property. $curi is responsive, so when a new response is emitted, $curi.response and $curi.action 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: action 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)
  ]);
}

While the CuriPlugin subscribes to your router object, you will still need to wait for it to emit its first update before you can render. To do that, you can pass the { once: true } option to a router.respond call.


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)
    }
  });
}, { once: true });