https://github.com/projectblacklight/blacklight-vue
Blacklight frontend for VueJS
https://github.com/projectblacklight/blacklight-vue
Last synced: 8 months ago
JSON representation
Blacklight frontend for VueJS
- Host: GitHub
- URL: https://github.com/projectblacklight/blacklight-vue
- Owner: projectblacklight
- Created: 2019-01-02T19:01:45.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-23T16:32:30.000Z (over 7 years ago)
- Last Synced: 2025-01-26T00:51:27.328Z (over 1 year ago)
- Language: Vue
- Size: 37.1 KB
- Stars: 10
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# VueJS for Blacklight
[](https://www.npmjs.com/package/blacklight-vue)
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](https://cli.vuejs.org/guide/creating-a-project.html#vue-create).
Next add blacklight-vue:
```
yarn add blacklight-vue
```
Then add sass support:
```
yarn add sass-loader node-sass
```
Then add routes. In main.js add the following:
```js
import Blacklight from 'blacklight-vue'
import BlacklightRoutes from 'blacklight-vue/src/routes'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
Vue.use(Blacklight)
Vue.use(VueRouter)
// Push your own "Home" page into the routes.
BlacklightRoutes.push({ path: '/', name: 'home', component: Home })
const router = new VueRouter({
routes: BlacklightRoutes
})
// Add address to the API server
Vue.http.options.root = 'http://demo.projectblacklight.org'
Vue.http.options.headers = {
Accept: 'application/json'
}
new Vue({
router,
render: h => h(App)
}).$mount('#app')
```
Then in `App.vue` add the following to the template:
```html
```
And `components/Home.vue` could look like this:
```vue
import Search from 'blacklight-vue/src/components/Search'
export default {
name: 'Home',
components: {
Search
}
}
```
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:
```vue
@import '~bootstrap/scss/bootstrap.scss';
@import '~blacklight-vue/scss/blacklight.scss';
```
## Install dependencies
```
npm install
```
## Configure
You can set the title field to use by doing:
```
Vue.prototype.$titleField = 'title_display'
```