Badge not showing in VUE loaded from CDN

  javascript, vue.js

I have a VUE page where I try to render a badge. It shows the text but only white. I tried also with bootstrap badges with the same results.

This is the code of the page:

<!DOCTYPE html>
<html>
<head>

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/bootstrap-vue.css" />

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

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/[email protected]/dist/bootstrap-vue-icons.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>

<body role="document">
    <div class="panel-body">
        <div id="start">
                <h2>b-badge: <b-badge variant="primary">b-badge</b-badge> {{foo}} </h2>
                class: <span class="badge">span</span>
        </div><!-- start -->
    </div>
    <script src="/js/vue/start.js"></script>
</body>
</html>

This is the javascript with VUE code loaded from start.js before.

var start = new Vue({
    el: '#start'
    ,
    data: {
        foo: "bar"
    }
});

VUE loads because I spot the result of the foo variable in the page. But the badge will only show white text no matter what class I try to load. Both with bootstrap and bootstrap-vue.

This is what is rendered:

badge as rendered as white text

If I select the text I can see there is a white text where the badge should be.

I tried many other VUE code and everything works fine including a navbar. I also tried to import the Badger but I can’t manage to do that. I only get that error:

"import declarations may only appear at top level of a module"

My guess is as I am using CDN loaded VUE I don’t need to do the import. Also I searched if I have to load the Badge javascript or CSS from another link at the header but I can’t find it anywhere.

Any hints ? Thank you very much.

Source: Ask Javascript Questions

LEAVE A COMMENT