@oarepo/invenio-api-vue-composition
v1.0.9
Published
## Run demo ``` docker-compose -f docker-compose-server.yml up yarn serve ``` ## Installation
Downloads
18
Readme
@oarepo/invenio-api-vue-composition
Run demo
docker-compose -f docker-compose-server.yml up
yarn serve
Installation
yarn add @vue/composition-api
yarn add @oarepo/vue-query-synchronizer
yarn add @oarepo/invenio-api-vue-composition
// main.js
Vue.use(VueCompositionAPI)
Vue.use(VueQuerySynchronizer, {
debug: true,
router: router
})
Common usage - API passed as props to your component
Collection and record viewers
Wrap your components when you add them into routes:
export const routes = [
// note: record needs to be the first because of its path
record({
name: 'record-viewer-editor',
// path is implicitely '/${collectionCode}' -we want the records in the root, so have to create it manually
path: '/:recordId',
collectionCode: 'records',
component: RecordViewer
}),
collection({
name: 'record-list',
path: '/',
collectionCode: 'records',
component: CollectionViewer,
recordRouteName: 'record-viewer'
})
]
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 CollectionViewer is in the demo.
Facet shows that each facet contains a reactive model that can be used to directly toggle the facet on/off.
For a record viewer see RecordViewer
See the collection API docs and record API docs for possible parameters and for an extensive list of properties that are passed to your component.
API access
You can have an access to API either via the wrappers above - but they always fetch the data before your component gets called - or via the "api" wrappers:
export const routes = [
collectionApi({
name: 'record-creator',
path: '/create',
collectionCode: 'records',
component: RecordCreator
}),
]
This wrapper just creates the API, pre-populates it with the baseUrl and collection code and passes control (with all props) to your component.
It is usable for example, for creating new records as shown above, as there is no need to load the collection when a new record is created within it.
See collection API docs for details
Composable API
The collectionApi
or recordApi
props passed to your component are return values of
Composable API functions useInvenioCollection
and useInvenioRecord
.
If you want you can use them directly without the wrapper components (
but always directly in the setup
function, you can not initialize them later, as in event handlers):
<template>...</template>
<script>
import {useInvenioCollection} from '@oarepo/invenio-api-vue-composition'
export default {
function setup(props, ctx) {
{
error,
facets,
records,
load
// see the docs for other options here
} = useInvenioCollection('/api')
load('records')
return {
error, facets, records
}
}
}
</script>
More documentation is at API docs