Real world application

CoreUI Vue library can be integrated easily in your application, but to make it even smoother, you can check out how we did it in our CoreUI Vue Admin Template (Check out the demo here!) (opens new window). This template also shows many examples of CoreUI components usage.

This section will describe topics about template. If you are not interested, just skip to the components section.

Installation

Clone repo

# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-admin-template.git CoreUI-Vue-Template

# go into app's directory
$ cd CoreUI-Vue-Template

# install app's dependencies
$ npm install

Scripts

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

# run linter
npm run lint

# run unit tests
npm run test:unit

# run e2e tests
npm run test:e2e

For more information visit template github project (opens new window).

Backend integration

In many situations data you got from the backend is not compatible with component API. To illustrate that we will take the example of passing data to the CSelect component.

Let's say that you get inconvenient data structure (and don't know possible select options upfront). You get following data:

const receivedData = {
  small: false,
  medium: true,
  large: false
}

In this case passing data to CSelect component could look like this:

<CSelect
  :options="options"
  :value.sync="selected"
/>

data () {
  return {
    selected: Object.keys(receivedData).find(opt => receivedData[opt])
  }
},
computed: {
  options () {
    return Object.keys(receivedData)
  },
  //property computing current state to the same structure as received.
  selectObject () {
    return this.options.reduce((obj, option) => {
      obj[option] = option === this.selected
      return obj
    }, {})
  }
}

Different cases need different solutions, but the rule is the same: if received/sent data structure is not compatible with component API you need to compute the data.