Using Vue.js / Bootstrap-vue.js CDN and components

0
votes

forgive my ignorance here, I am super new to Vue. I am looking for a way to utilize bootstrap-Vue from CDN (https://bootstrap-vue.js.org/docs/ click browser on right nav). I am not seeing how to call the components. Using the webpack / CLI version, no problems, but CDN, I am lost at how to use this.

I put up a simple codepen.io to test this. I've added the CSS and js files per the docs.

https://codepen.io/jasonflaherty/pen/rrzbxj

//do I need this?
Vue.use(BootstrapVue);

//try individual components.
import { Card } from 'bootstrap-vue/es/components';
Vue.use(Card);

What am I missing to utilize bootstrap-vue.js CDN? Do I need to import differently?

3
vue.jsvuejs2cdn

3 Answers

4
votes

Just include the required CDN below and without invoking Vue.use(XXX) (There is a Basic example from the official website.)

        <!-- Required Stylesheets -->
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"
        />
        <link
          type="text/css"
          rel="stylesheet"
          href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"
        />

        <!-- Required scripts -->
        <script src="https://unpkg.com/vue"></script>
        <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


When you run the Basic example, you will get the bootstrap decoration. enter image description here

3
votes

If you use the CDN, you do not need to use the BootstrapVue plugin; it will do that for you. Just including the script adds all the BootstrapVue components globally.

You cannot use ES6 import statements in the browser.

You do need to create a Vue.

Here is your pen updated.

1
votes

You should to use a basic structure of Vue. So, your JS should be:

const vue = new Vue({
  el: "#app"
})

And is necessary that your HTML code stay into a:

<div id="app">
   <!-- ...your code -->
</div>