CODEWITHSUNDEEP
vuejs2vue-componentbootstrap-vue
Jens
Jens

Reputation: 1659

bootstrap-vue component renders as comment

In my vue project some bootstrap-vue components renders fine but others render as a HTML comment. In this example they both components show up fine in the Vue Dev tool panel. I have added a "normal" input field just to see if that gets rendered ok.

<template>
    <div class="list-group">
        <div>Test</div>
        <b-form-input v-model="text1"
                      type="text"
                      placeholder="Enter your name"></b-form-input>
        <b-form-textarea id="textarea1"
                         v-model="text"
                         placeholder="Enter something"
                         :rows="3"
                         :max-rows="6"></b-form-textarea>
        <input type="text"/>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';

    @Component
    export default class ProjectList extends Vue {
        text = 'text';
        text1 = 'text1';
    }
</script>

But get rendered as:

enter image description here

enter image description here

I would expect to see both the input fields in the browser but I only see the textarea and the "normal" input field. I see no errors in the log. What could I be missing?

Upvotes: 0

Views: 784

Answers (1)

Jens
Jens

Reputation: 1659

Ok I found a solution:

Instead of importing:

import Vue from 'vue'    
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

I import:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';

Vue.use(BootstrapVue);

And now everything works fine. I am not sure why as the former is described in the bootstrap-vue documentation. Maybe its because I am using TypeScript..?

Upvotes: 1

Related Questions