Vue 3 library for handling invenio REST

Usage no npm install needed!

<script type="module">
  import oarepoInvenioVue from 'https://cdn.skypack.dev/@oarepo/invenio-vue';




    yarn add @oarepo/vue-query-synchronizer
    yarn add @oarepo/invenio-vue

If you use quasar, you might want to add facets library:

    yarn add @oarepo/quasar-es-facets

In the main script:

import {createApp} from 'vue'
import App from './App.vue'
import VueQuerySynchronizer from "@oarepo/vue-query-synchronizer";
import InvenioApi from '@oarepo/invenio-vue'
import router from './router'
import axios from 'axios'

// if quasar
import {Quasar} from 'quasar'
import quasarUserOptions from './quasar-user-options'
import QuasarESFacets from '@oarepo/quasar-es-facets'

axios.defaults.headers = {
    'Cache-Control': 'no-cache',
    'Pragma': 'no-cache',
    'Expires': '0',

    .use(VueQuerySynchronizer, {router})

    // if quasar
    .use(Quasar, quasarUserOptions)

    // and mount

Common usage - API passed as props to your component

Collection and record viewers

Wrap your components when you add them into routes:

import {collection, record} from '@oarepo/invenio-vue'

export const routes = [
        name: 'record-viewer-editor',
        path: '/:recordId',
        component: Record

        name: 'record-list',
        path: '/',
        component: Collection,

This will inject a wrapper component (invisible in DOM tree) that fetches the collection/record, shows the loading status and possible errors, on success pass records and facets to your component and reacts to facet selection, pagination and search as emitted by your component.

A sample implementation of Collection is in the demo.

For a record viewer see Record

Composable API