@@ -264,8 +264,8 @@ and/or directives.
264
264
265
265
### Component groups and Directives as Vue plugins
266
266
267
- You can import component groups and directives as Vue plugins by importing the component group
268
- or directive directory:
267
+ You can import component groups and directives as Vue plugins by importing the component group or
268
+ directive directory:
269
269
270
270
<!-- eslint-disable import/first, import/no-duplicates -->
271
271
@@ -368,26 +368,22 @@ module.exports = {
368
368
369
369
## Browser
370
370
371
- Add the Boostrap and BootstrapVue CSS URLs in your HTML ` <head> ` section, followed by the
372
- required JavaScript files.
371
+ Add the Boostrap and BootstrapVue CSS URLs in your HTML ` <head> ` section, followed by the required
372
+ JavaScript files.
373
373
374
- When supporting older browsers (see [ Browser Support] ( #browser-support ) below), you will need
375
- to include a polyfill for handling modern JavaScript features before loading Vue and
376
- BoostrapVue JavaScript files.
374
+ When supporting older browsers (see [ Browser Support] ( #browser-support ) below), you will need to
375
+ include a polyfill for handling modern JavaScript features before loading Vue and BoostrapVue
376
+ JavaScript files.
377
377
378
378
``` html
379
379
<!-- Add this to <head> -->
380
380
381
381
<!-- Load required Bootstrap and BootstrapVue CSS -->
382
382
<link type =" text/css" rel =" stylesheet" href =" //unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
383
- <link
384
- type =" text/css"
385
- rel =" stylesheet"
386
- href =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css"
387
- />
383
+ <link type =" text/css" rel =" stylesheet" href =" //unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
388
384
389
- <!-- Load a polyfill to support older browsers -->
390
- <script src =" //unpkg.com/@babel /polyfill@latest/dist/polyfill .min.js" ></script >
385
+ <!-- Load polyfills to support older browsers -->
386
+ <script src =" //polyfill.io/v3 /polyfill.min.js?features=default%2CMutationObserver%2CPromise " crossorigin = " anonymous " ></script >
391
387
392
388
<!-- Load Vue followed by BootstrapVue -->
393
389
<script src =" //unpkg.com/vue@latest/dist/vue.min.js" ></script >
@@ -407,8 +403,8 @@ bundler supports es modules, it will automatically prefer it over commonjs.
407
403
| UMD | Browser | ` dist/bootstrap-vue.js ` _ or_ ` dist/bootstrap-vue.min.js ` |
408
404
409
405
BootstrapVue relies on ` Popper.js ` (for Tooltip, Popover, and Dropdown positioning), and
410
- ` vue-functional-data-merge ` (for functional components). These two dependencies are included in
411
- the ` commonjs2 ` and ` UMD ` bundles.
406
+ ` vue-functional-data-merge ` (for functional components). These two dependencies are included in the
407
+ ` commonjs2 ` and ` UMD ` bundles.
412
408
413
409
## Migrating a project already using Bootstrap
414
410
@@ -430,17 +426,34 @@ information about browsers currently supported by Bootstrap 4.
430
426
431
427
### JS
432
428
433
- BootstrapVue is written in Vue.js! So this is up to your project and bundler which browsers are
429
+ BootstrapVue is written in Vue.js! So it is up to your project and bundler which browsers are
434
430
supported.
435
431
436
- If you want to support older IE, Android and IOS devices, you may want to use
437
- [ Babel Polyfill] ( https://babeljs.io/docs/usage/polyfill ) :
432
+ Following features and APIs are used by BootstrapVue:
438
433
439
- - ` npm install @babel/polyfill `
440
- - Import it in your app main entry point with ` import '@babel/polyfill' `
434
+ - ES5 (e.g. ` Array.from() ` , ` Array.isArray() ` , ` Object.assign() ` , ` Object.is() ` , etc.)
435
+ - ` Promise `
436
+ - ` MutationObserver `
441
437
442
- Or use [ Polyfill.io] ( https://polyfill.io/ ) to dynamically serve browser specific polyfills via ` <script> `
443
- tags in the HTML ` <head> ` section.
438
+ If you want to support older IE, Android and iOS devices, you may want to use
439
+ [ @babel/polyfill ] ( https://babeljs.io/docs/usage/polyfill ) and
440
+ [ mutationobserver-shim] ( https://www.npmjs.com/package/mutationobserver-shim ) :
441
+
442
+ - ` npm install @babel/polyfill mutationobserver-shim `
443
+ - Import the polyfills in your app main entry point:
444
+
445
+ <!-- eslint-disable no-unused-vars -->
446
+
447
+ ``` js
448
+ import ' @babel/polyfill'
449
+ import ' mutationobserver-shim'
450
+ import Vue from ' vue'
451
+ import BootstrapVue from ' bootstrap-vue'
452
+ ```
453
+
454
+ Alternatively use [ Polyfill.io] ( https://polyfill.io/ ) to dynamically serve browser specific
455
+ polyfills via ` <script> ` tags in the HTML ` <head> ` section. See [ Browser] ( #browser ) section for an
456
+ example.
444
457
445
458
## Tooling Support
446
459
0 commit comments