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;
      });