Escolha uma Página

I was trying to use bootbox inside a vue component, but, this message always bugs me.

bootbox is not defined

Fist, you need to import bootstrap and jquery to your app. After install bootstrap and jquery using npm you need to ensure that your app is using it.

import 'bootstrap/dist/css/bootstrap.css' // << import CSS

you can define in your webpack.base.conf.js to load automaticaly your jquery

  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components'),
      'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery'), <<<-- HERE IS THE MAGIC --
      'directives': path.resolve(__dirname, '../src/directives')
    }
  },

But only this is insufficient to make the bootbox work, why? because this component isn't self contained, in this way you will need to explicitly define the bootstrat and jquery var in your component.

var $ = require('jquery');
global.jQuery = require("jquery");
window.$ = $;
var bootstrap = require('bootstrap');
var bootbox = require('bootbox');

export default {

One last advice, if you will use the confirm method, you need to pass the "this" using another var because under the callback function this refers to this funcion and not the global this of your component.

      var v = this;
      bootbox.confirm({
          message: "Do you want to remove the cliente whose name is "+this.customer.first_name+"?",
          buttons: {
              confirm: {
                  label: 'Yes',
                  className: 'btn-success'
              },
              cancel: {
                  label: 'No',
                  className: 'btn-danger'
              }
          },
          callback: function (result) {
            if(result){
              v.$http.delete(config.URL_API+'api/customer/delete/'+id)
              .then(function(response){
                this.$router.push({path:"/", query:{alert: 'Customer Deleted'}});
              })
            }
          }
      });