3

I am using Electron-vue to create desktop application. I was trying to use boostrap-vue in my app. When I open the app I can see all the functionality of boostrap(button tables) but none of the styling associated with it (color, font etc..)

Am I doing something wrong or is bootstrap vue not compatible with electron style apps ?

Praveen
  • 557
  • 1
  • 5
  • 20
  • Do you have a link to a repo? What errors are you getting? How are you loading CSS? Are you using `vue-cli`? – Matt Oestreich Apr 21 '19 at 23:42
  • I am using electron-vue steps which I am hoping in on top of vue-cli. I do not get any errors I just dont see any styling. – Praveen Apr 21 '19 at 23:45

3 Answers3

1

The right installation procedure is described into the documentation: https://bootstrap-vue.org/docs

Into your project root folder, install prerequesites:

# With npm
npm install vue bootstrap-vue bootstrap

# With yarn
yarn add vue bootstrap-vue bootstrap

After that, you have to open the main.js file ant had this portion of code just before the "new Vue(...)" call:

// Activate bootstrap vue
import BootstrapVue from 'bootstrap-vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

A blog post describe it perfectly: https://www.digitalocean.com/community/tutorials/vuejs-using-bootstrap4

Chris R. Donnelly
  • 3,086
  • 3
  • 28
  • 28
l.cotonea
  • 2,037
  • 1
  • 15
  • 17
-2

I was reading some blogs and apparently boostrap-vue does not work with desktop apps. I had more luck with using element UI

Praveen
  • 557
  • 1
  • 5
  • 20
  • 2
    BootstrapVue does indeed support running under Electron. Just make sure you are using the latest electron-vue, bootstrap-vue and vue releases. – Troy Morehouse Jul 06 '19 at 17:34