VueJS for Blacklight
See a demo usage of this library at https://github.com/projectblacklight/blacklight-vue-demo
Getting started:
The first step is to create a project using Vue JS CLI.
Then add sass support:
yarn add sass-loader node-sass
Then add routes. In main.js add the following:
VueVue // Push your own "Home" page into the routes.BlacklightRoutesconst router = routes: BlacklightRoutes // Add address to the API serverVuehttpoptionsroot = 'http://demo.projectblacklight.org'Vuehttpoptionsheaders = Accept: 'application/json' router
Then in App.vue
add the following to the template:
And components/Home.vue
could look like this:
<template> <div class="hello"> <Search /> </div></template> <script> import Search from 'blacklight-vue/src/components/Search' export default { name: 'Home', components: { Search }}</script>
Finally, if you want to use bootstrap, install it. I used these directions: https://medium.com/@BjornKrols/integrating-and-customising-bootstrap-4-in-vue-js-cbc29ba7688e But all you need to do is:
yarn add bootstrap
and then change the styles in src/App.vue
to be:
<style lang="scss">@import '~bootstrap/scss/bootstrap.scss';@import '~blacklight-vue/scss/blacklight.scss';</style>
Install dependencies
npm install
Configure
You can set the title field to use by doing:
Vue.prototype.$titleField = 'title_display'