diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
index d9ac73afaa1..da9fdac9095 100644
--- a/docs/markdown/intro/README.md
+++ b/docs/markdown/intro/README.md
@@ -8,7 +8,7 @@
{{ bootstrapVersion }} SCSS/CSS
- jQuery is **not** required
-## General
+## Using module bundlers
If you are using module bundlers like [webpack](https://webpack.js.org/),
[rollup.js](https://rollupjs.org), etc you may prefer to directly include the package into your
@@ -257,7 +257,43 @@ For additional configuration for Vue CLI 3 for using project relative paths for
various BootstrapVue components, refer to the Vue CLI 3 section of the
[Image Src Resolving](/docs/reference/images#vue-cli-3-support) reference page.
-## Individual components and directives
+## Selective component and directive inclusion in module bundlers
+
+When using a module bundler you can optionally import only specific components groups, components
+and/or directives.
+
+### Component groups and Directives as Vue plugins
+
+You can import component groups and directives as Vue plugins by importing the component group
+or directive directory:
+
+
+
+```js
+// This imports all the layout components such as , , :
+import { Layout } from 'bootstrap-vue/es/components'
+Vue.use(Layout)
+
+// This imports as well as the v-b-modal directive as a plugin:
+import { Modal } from 'bootstrap-vue/es/components'
+Vue.use(Modal)
+
+// This imports along with all the sub-components as a plugin:
+import { Card } from 'bootstrap-vue/es/components'
+Vue.use(Card)
+
+// This imports directive v-b-scrollspy as a plugin:
+import { Scrollspy } from 'bootstrap-vue/es/directives'
+Vue.use(Scrollspy)
+```
+
+When importing as plugins, all subcomponents and related directives are imported in most cases. i.e.
+When importing ``, all the `` sub components are also included, as well all dropdown
+sub components. Component shorthand aliases (if any) are also included in the plugin.
+
+Refer to the component and directive documentation for details.
+
+### Individual components and directives
If you would like to only pull in a specific component or set of components, you can do this by
directly importing those components.
@@ -299,37 +335,6 @@ Vue.directive('b-modal', BModalDirective)
Vue and ES2015 allow for various syntaxes here, so feel free to utilize kebab-casing (shown),
camelCasing, PascalCasing, and/or object property shorthand.
-### Component groups and Directives as Vue plugins
-
-You can also import component groups and directives as Vue plugins by importing the component group
-or directive directory:
-
-
-
-```js
-// This imports all the layout components such as , , :
-import { Layout } from 'bootstrap-vue/es/components'
-Vue.use(Layout)
-
-// This imports as well as the v-b-modal directive as a plugin:
-import { Modal } from 'bootstrap-vue/es/components'
-Vue.use(Modal)
-
-// This imports along with all the sub-components as a plugin:
-import { Card } from 'bootstrap-vue/es/components'
-Vue.use(Card)
-
-// This imports directive v-b-scrollspy as a plugin:
-import { Scrollspy } from 'bootstrap-vue/es/directives'
-Vue.use(Scrollspy)
-```
-
-When importing as plugins, all subcomponents and related directives are imported in most cases. i.e.
-When importing ``, all the `` sub components are also included, as well all dropdown
-sub components. Component shorthand aliases (if any) are also included in the plugin.
-
-Refer to the component and directive documentation for details.
-
### webpack + Babel
When importing components/directives individually, you must configure your app to properly build the
@@ -363,8 +368,17 @@ module.exports = {
## Browser
+Add the Boostrap and BootstrapVue CSS URLs in your HTML `` section, followed by the
+required JavaScript files.
+
+When supporting older browsers (see [Browser Support](#browser-support) below), you will need
+to include a polyfill for handling modern JavaScript features before loading Vue and
+BoostrapVue JavaScript files.
+
```html
+
+
+
+
+
```
@@ -384,11 +401,15 @@ bundler supports es modules, it will automatically prefer it over commonjs.
| Variant | Environments | Package path |
| -------------- | --------------------- | ---------------------------------------------------------------------- |
-| **ES Module** | webpack 2 / rollup.js | `es/index.js` |
+| **ES Modules** | webpack 2 / rollup.js | `es/index.js` |
| **ESM Module** | webpack 2 / rollup.js | `dist/bootstrap-vue.esm.js` _or_ `dist/bootstrap-vue.esm.min.js` |
| commonjs2 | webpack 1 / ... | `dist/bootstrap-vue.common.js` _or_ `dist/bootstrap-vue.common.min.js` |
| UMD | Browser | `dist/bootstrap-vue.js` _or_ `dist/bootstrap-vue.min.js` |
+BootstrapVue relies on `Popper.js` (for Tooltip, Popover, and Dropdown positioning), and
+`vue-functional-data-merge` (for functional components). These two dependencies are included in
+the `commonjs2` and `UMD` bundles.
+
## Migrating a project already using Bootstrap
If you've already been using Bootstrap 4, there are a couple adjustments you may need to make to
@@ -403,7 +424,7 @@ your project:
### CSS
-BootstrapVue is to be used with Bootstrap 4 CSS/SCSS. Please see
+BootstrapVue is to be used with Bootstrap 4.3 CSS/SCSS. Please see
[Browsers and devices](https://getbootstrap.com/docs/4.3/getting-started/browsers-devices) for more
information about browsers currently supported by Bootstrap 4.
@@ -418,6 +439,9 @@ If you want to support older IE, Android and IOS devices, you may want to use
- `npm install @babel/polyfill`
- Import it in your app main entry point with `import '@babel/polyfill'`
+Or use [Polyfill.io](https://polyfill.io/) to dynamically serve browser specific polyfills via `