bootstrap-vue.js with laravel Unknown custom element: <b-alert> error

Question

Im new to Vuejs and I get the error unknown custom element -

how do i register a custom element - b-alert. I think this element is from bootstrapVue.

<template>
<div>
 <b-alert show>Default Alert</b-alert>



  </div> 
   </template>

    <script>
   export default {
    data () {
            return {
                 dismissSecs: 10,
                 dismissCountDown: 0,
                 showDismissibleAlert: false
            }
    },
                  methods: {
             countDownChanged (dismissCountDown) {
                     this.dismissCountDown = dismissCountDown
             },
             showAlert () {
                     this.dismissCountDown = this.dismissSecs
             }

     },

}

tony19 · Accepted Answer · 2022-07-15 20:45:16Z

6

You will have to register the component as in Component registration

import { Alert } from 'bootstrap-vue/es/components';

components: { BAlert }

Since all html tags are turned into dashed by camelcase BAlert = '<b-alert>'

Alertenativly you can also use

components: { 'b-alert': BAlert }

edited Jul 15, 2022 at 20:45

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 18, 2018 at 20:36

Crackers

1,1257 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naishu Babu Over a year ago

I added components: { 'b-alert': BAlert } to the file, now i get an error BAlert is not defined

Crackers Over a year ago

did you use vue-cli to setup your project, and did you use npm install bootstrap-vue?

Dave Howson Over a year ago

BAlert is not defined because you imported Alert not BAlert.

Collectives™ on Stack Overflow

bootstrap-vue.js with laravel Unknown custom element: <b-alert> error

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related