Getting Started

Step 1: Install dependencies

npm i builderall-vue-ui bootstrap-vue

Step 2: Theming bootstrap

In your main sass file (/src/sass/app.scss) perform the import of the following scss files, in this order:

@import 'node_modules/builderall-vue-ui/src/assets/scss/variables.scss';
@import 'node_modules/bootstrap/scss/bootstrap.scss';
@import 'node_modules/bootstrap-vue/src/index.scss';

They will cause the bootstrap-vue to be built based on the variables in the builderall-vue-ui/src/assets/scss/variables.scss file, customizing Bootstrap colors, fonts and spacing based on Builderall standards.

Step 3: Import libs

In your main javascript file (main.js orapp.js) import the libraries, style sheets and tell Vue to use them. In this order.

import { BootstrapVue } from 'bootstrap-vue';
import { BuilderallVueUi } from 'builderall-vue-ui';
import '@/sass/app.scss'; // (the same file as in step 2)
import 'builderall-vue-ui/dist/builderall-vue-ui.css';
import 'builderall-vue-ui/src/assets/fonts/fonts.css';
Vue.use(BootstrapVue);
Vue.use(BuilderallVueUi);

TIP

If you are using Laravel Mix to compile Sass, you may have already imported the app.scss inside of webpack.mix.js. In this case, importing into app.js is not necessary.

Step 4: Build your app!

Add the code below to your main Vue file and all will be working!

<template>
  <div>
    <bui-sidebar
      :menus="menus"
      :menus-bottom="menus"
      :sidebar-state="sidebarState"
    />

    <bui-navbar
      :sidebar-state="sidebarState"
      logo="https://booking.builderall.com/images/images/meta/logo.png"
      @toggle-sidebar="toggleSidebar"
    />

    <bui-container :sidebar-state="sidebarState">
      <bui-page
        title="Dashboard"
        subtitle="Welcome to a Builderall application!"
      >
        <template #page-header-right>
          <b-button
            variant="primary"
            class="ml-auto"
          >
            <bui-icon
              name="plus"
              variant="white"
              :size="18"
            />
            New calendar
          </b-button>
        </template>
        <bui-alert
          index="alert-01"
          content="Welcome!"
        />
      </bui-page>
    </bui-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sidebarState: 'expanded',
      menus: [{ title: 'Item', icon: 'gear', href: '#' }]
    }
  },
  methods: {
    toggleSidebar (state) {
      this.sidebarState = state
    }
  }
}
</script>