MarkLogic Grove Vue Core Components
This library includes diverse search ui components. The library is part of the MarkLogic Grove project, but could work in any Vue application.
QuickStart SearchQueryBuilder
First, add the @marklogic-community/grove-vue-core-components
dependency via npm. (In a Grove Project, you will want to do this inside the ui
directory, if not already included out of the box.)
npm install --save @marklogic-community/grove-vue-core-components
Then, in your Vue application, import the components you wish to use, and register them either globally or inside the component where you use it:
// Either add this to ui/src/main.js to add it globally:
import { searchquerybuilder } from '@marklogic-community/grove-vue-core-components';
Vue.component(searchquerybuilder.SearchQueryBuilder.name, searchquerybuilder.SearchQueryBuilder);
// Or do this in a Vue page/component to add it there only:
import { searchquerybuilder } from '@marklogic-community/grove-vue-core-components';
export default {
...,
components: {
...,
SearchQueryBuilder: searchquerybuilder.SearchQueryBuilder
},
methods: {
apply(query) {
console.log(query);
}
}
...
};
After that you can start using the directly, which could look for example like this:
<search-query-builder :apply="apply"></search-query-builder>
QuickStart mlTreeFacet
First, add the @marklogic-community/grove-vue-core-components
dependency via npm. (In a Grove Project, you will want to do this inside the ui
directory, if not already included out of the box.)
npm install --save @marklogic-community/grove-vue-core-components
Then, in your Vue application, import the components you wish to use, and register them either globally or inside the component where you use it:
// Either add this to ui/src/main.js to add it globally:
import { mlTreeFacet } from '@marklogic-community/grove-vue-core-components';
Vue.component(mlTreeFacet.mlTreeFacet.name, mlTreeFacet.mlTreeFacet);
// Or do this in a Vue page/component to add it there only:
import { mlTreeFacet } from '@marklogic-community/grove-vue-core-components';
export default {
...,
components: {
...,
mlTreeFacet: mlTreeFacet.mlTreeFacet
},
data() {
return {
...,
nodes: {},
topNodes: [],
},
...
};
After that you can start using the directly, which could look for example like this:
<ml-tree-facet
v-if="facet.name === 'MyTreeFacet'"
:facet="facet"
:nodes="nodes"
:start-ids="topNodes"
:toggle="toggleFacet"
:negate="toggleNegatedFacet"
></ml-tree-facet>
To hook it up with the backend:
Download a copy of OntologyApi.js from https://github.com/marklogic-community/grove-vue-core-components/tree/master/src, and drop it into ui/src/api/
Import this api client into the SearchPage:
import OntologyApi from '@/api/OntologyApi.js';
And hook it up with loading of the page:
created() {
if (this.isLoggedIn) {
...
let self = this;
OntologyApi.getHierarchy('MyHierarchy').then(response => {
self.nodes = response.response.concepts;
self.topNodes = response.response.topConcepts;
});