BootstrapVue component doesn't render

1
votes

I was following the Browser section of official documentation https://bootstrap-vue.org/docs, however the BootstrapVue components just didn't render as expected.

html file as follow: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>webapp</title>
    <!-- Load required Bootstrap and BootstrapVue CSS -->
    <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
    <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />

    <!-- Load Vue followed by BootstrapVue -->
    <script src="//unpkg.com/[email protected]/dist/vue.min.js"></script>
    <script src="//unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

    <!-- Load the following for BootstrapVueIcons support -->
    <script src="//unpkg.com/[email protected]/dist/bootstrap-vue-icons.min.js"></script>
</head>
    <body>
        <div>
            <h2>Example heading <b-badge>New</b-badge></h2>
        </div>
    </body>
</html>

What I see is 1 Instead of 2

What should be fixed to get the components rendered properly?

1
bootstrap-vue

1 Answers

1
votes

The issue is resolved, I have to add below code somewhere(e.g. main.js):

new Vue(...).$mount("#div_where_vue_should_render")