@oarepo/invenio-vue
v1.0.0-a11
Published
Vue 3 library for handling invenio REST
Downloads
28
Readme
@oarepo/invenio-vue
Installation
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',
};
createApp(App)
.use(router)
.use(VueQuerySynchronizer, {router})
.use(InvenioApi)
// if quasar
.use(Quasar, quasarUserOptions)
.use(QuasarESFacets)
// and mount
.mount('#app')
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 = [
record({
name: 'record-viewer-editor',
path: '/:recordId',
component: Record
}),
collection({
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
TODO