Vue 3 invenio API and wrapper components

Overview

@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

You might also like...
Framework/Library agnostic paystack wrapper

Framework/Library agnostic paystack wrapper

๐ŸŒŸ DataFormsJS ๐ŸŒŸ A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
๐ŸŒŸ DataFormsJS ๐ŸŒŸ A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

๐ŸŒŸ Welcome to DataFormsJS! Thanks for visiting! ๐ŸŒ  ๐Ÿ‘ ๐ŸŒ ๐ŸŒŽ ๐ŸŒ ๐ŸŒ ไธญๆ–‡ (็ฎ€ไฝ“) ๆฌข่ฟŽๆฅๅˆฐ DataFormsJS Espaรฑol Bienvenido a DataFormsJS Portuguรชs (do Brasil) Bem

MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS
MKTemplate is Free and Open Source. It features multiple HTML and VueJS elements and it comes with dynamic components for VueJS

MKTemplate A beautiful UI . Start your Web Site with this bootstrap and VueJS UI . MKTemplate is Free and Open Source. It features multiple HTML and V

๐Ÿ’ฌ Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid
๐Ÿ’ฌ Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication. https://tugayyaldiz.github.io/vue-comment-grid

Vue.js Comment Grid Table of Contents Introduction Installation Downloading Plugin Dependencies Include Plugin Creating Firebase Project Setting Up Si

I tried to make a project that will help you learn English with Vue.js. It gives you to understand the most common 1000 words in English randomly according to the range you entered and with the examples used on Youtube with Youglish API. I hope it will be useful content when studying English, memorizing words.
Inventory-Management-System - A fully fledge product inventory management system with Laravel, Vue Js and Restful API built from scratch

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Search places and address using Google Maps API
Search places and address using Google Maps API

Vue-Gmaps Search address and places using Google Maps API Buy me a cofffe please :) https://buymeacoff.ee/ridermansb Installation npm i -S vue-gmaps A

A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Draft Specification.
A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Draft Specification.

A minimal library which polyfills the ResizeObserver API and is entirely based on the latest Draft Specification.

Cluster API developers and operators often need to quickly get insight multicluster configuration

Cluster API Visualization App [WIP] Cluster API developers and operators often need to quickly get insight multicluster configuration. This app provid

Releases(1.0.0a11)
Owner
Open Access Repository
Open Access repository project for Czech National Research & Education environment
Open Access Repository
Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.

vue-hammer Hammer.js wrapper for Vue to support some operation in the mobile This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration

Edan 247 Nov 16, 2022
โ†”๏ธ โ†•๏ธ ๐Ÿ”„ Vue.js wrapper for Moveable

Vue Moveable A Vue Component that create Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable. Moveable Drag

Max Lyashuk 956 Nov 24, 2022
Vue 3 Wrapper of smooth-dnd library.

vue3-smooth-dnd Vue 3 Wrapper of smooth-dnd library. Live demo NOTE: This is a Vue 3 wrapper over smooth-dnd library. It's a fork of the already done

Gilbert Ndresaj 92 Nov 28, 2022
Vue component wrapper for @mdi/js

Vue-Mdijs Vue component wrapper for @mdi/js Installation If you're using Vue 3 click here // NPM

Ahmad Kholid 11 Jun 23, 2022
๐Ÿ” A wrapper of elevator.js in Vue

vue-elevator A wrapper of elevator.js in Vue Demo Show me the code, or demo it Image Original Source From Awesome Egoist ! Thank you ! Installation np

WesleyZen 28 May 19, 2022
Vue Element Resize Detector Wrapper

vue-element-resize-detector Vue Directive to detect resize events on elements or components. Uses element Resize Detector under the hood โš™๏ธ Installati

Ben Sladden 17 Aug 12, 2022
A Vue JS wrapper for the awesome Mo.js

Vue Mo.js A Vue JS wrapper for the awesome Mo.js Limitations This wrapper currently only supports the burst mo.js component. I may look to add more in

Aaron Lumsden 22 Aug 19, 2022
A wrapper for Google Analytics to be used in web clients, oriented to single page applications

This is a wrapper for Google Analytics to be used in web clients, oriented to single page applications (something that google doesn't do oob), like automatically reporting requests performance, navigation links, redux plugin etc

Imperva 11 Mar 22, 2022
A simple wrapper for integrating lottie-web into VueJs

lottie-vuejs is a simple VueJS wrapper for lottie-web. It encompasses critical lottie-web functionality into an vue component plugin. Utilize lottie-vuejs to quickly and almost effortlessly bring lottie functionality into your VueJS project.

Gladwin Henald 1 May 10, 2020
A simple wrapper for integrating lottie-web into VueJs

vue-lottie2 vue-lottie2 is currently in development! Use in production environment at your own risk vue-lottie2 is a simple VueJS wrapper for lottie-w

Marko Bogdanovski 0 Apr 19, 2020