BootstrapVue component doesn't render

Question

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?

Jonathan · Accepted Answer · 2021-03-14 13:53:37Z

1

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

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

answered Mar 14, 2021 at 13:53

Jonathan

213 bronze badges

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

Collectives™ on Stack Overflow

BootstrapVue component doesn't render

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related