yarn add @superbrave/dok-search-vue

import Vue from "vue"; // Make sure to install Vue first
import { dokSearchHeader, dokSearchDetail } from "@superbrave/dok-search-vue"; // Import the components

Import the CSS. This can be done in JS or CSS

import '@superbrave/dok-search-vue/dist/sbdoksearch.css'

Now you can create a new Vue instance and add the components

// For the Search Header
new Vue({
  el: "#dokSearchHeader",
  components: {
    SearchHeader: dokSearchHeader,
  },
});

// For the Detail page
new Vue({
  el: "#dokSearchDetail",
  components: {
    SearchDetail: dokSearchDetail,
  },
});

Example HTML:

<!-- For the Search Header -->
<div id="dokSearchHeader">
  <search-header env="dev" language="nl" detail-uri="/search" />
</div>

<!-- For the Detail page -->
<div id="dokSearchDetail">
  <search-detail env="dev" language="nl" />
</div>

* Please note that the combination of language and env wil determine the AppSearch engine so results may vary due to the chosen values.

yarn module

yarn lint

yarn serve

Unit test will always run before pushing to git

yarn test:unit

To create a new release you must run:

npm run release

Please note that this uses NPM and you need to be logged in to NPM to publish a new version.