Skip to content

Commit 117b0bc

Browse files
tmorehousetmorehouse
authored
chore(docs): update /docs/misc/config docs with simplified plugin import (bootstrap-vue#3278)
1 parent f3218d8 commit 117b0bc

File tree

1 file changed

+55
-22
lines changed

1 file changed

+55
-22
lines changed

‎docs/markdown/misc/settings/README.md

Lines changed: 55 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ The values provided as the config option to `Vue.use` will be merged with the de
5757
breakpoint names must be defined. The breakpoint names **must** match the breakpoint names defined
5858
in your custom Bootstrap SCSS.
5959

60-
### Setting config via individual component plugin imports
60+
### Setting config via individual component group plugin imports
6161

6262
When importing individual component plugins, you can specify a config as well (using the same config
6363
structure as above. You only need to provide configuration to the first component you import, but
@@ -72,33 +72,31 @@ and subsequent changes to the breakpoints will **not** be reflected.
7272
<!-- eslint-disable import/first, import/no-duplicates -->
7373

7474
```js
75-
import Layout from 'bootstrap-vue/es/components/layout'
76-
import Alert from 'bootstrap-vue/es/components/alert'
77-
import Button from 'bootstrap-vue/es/components/button'
75+
// Component group plugins
76+
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue/es/components'
7877

7978
// Supply configs via each plugin as it is `Vue.use()`'d
80-
Vue.use(Layout, { breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'] })
81-
Vue.use(Alert, { BAlert: { variant: 'danger' } })
82-
Vue.use(Button, { BButton: { variant: 'primary' } })
79+
Vue.use(LayoutPlugin, { breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'] })
80+
Vue.use(AlertPlugin, { BAlert: { variant: 'danger' } })
81+
Vue.use(ButtonPlugin, { BButton: { variant: 'primary' } })
8382
```
8483

8584
**Example 2:**
8685

8786
<!-- eslint-disable import/first, import/no-duplicates -->
8887

8988
```js
90-
import Layout from 'bootstrap-vue/es/components/layout'
91-
import Alert from 'bootstrap-vue/es/components/alert'
92-
import Button from 'bootstrap-vue/es/components/button'
89+
// Component group plugins
90+
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue/es/components'
9391

9492
// Supply complete config to first `Vue.use()`'d plugin
95-
Vue.use(Layout, {
93+
Vue.use(LayoutPlugin, {
9694
breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
9795
BAlert: { variant: 'danger' },
9896
BButton: { variant: 'primary' }
9997
})
100-
Vue.use(Alert)
101-
Vue.use(Button)
98+
Vue.use(AlertPlugin)
99+
Vue.use(ButtonPlugin)
102100
```
103101

104102
**Example 3 (most preferred method):**
@@ -108,10 +106,8 @@ Vue.use(Button)
108106
```js
109107
// BootstrapVue configuration helper plugin
110108
import BVConfig from 'bootstrap-vue/es/bv-config'
111-
// Component plugins
112-
import Layout from 'bootstrap-vue/es/components/layout'
113-
import Alert from 'bootstrap-vue/es/components/alert'
114-
import Button from 'bootstrap-vue/es/components/button'
109+
// Component group plugins
110+
import { LayoutPlugin, AlertPlugin, ButtonPlugin } from 'bootstrap-vue/es/components'
115111

116112
// Supply complete config to the BVConfig helper plugin
117113
Vue.use(BVConfig, {
@@ -121,16 +117,53 @@ Vue.use(BVConfig, {
121117
})
122118

123119
// Then use component plugins
124-
Vue.use(Layout)
125-
Vue.use(Alert)
126-
Vue.use(Button)
120+
Vue.use(LayoutPlugin)
121+
Vue.use(AlertPlugin)
122+
Vue.use(ButtonPlugin)
123+
```
124+
125+
126+
**Example 4 when importing individual components (preferred method):**
127+
128+
<!-- eslint-disable import/first, import/no-duplicates -->
129+
130+
```js
131+
// BootstrapVue configuration helper plugin
132+
import BVConfig from 'bootstrap-vue/es/bv-config'
133+
// Individual components
134+
import { BAlert, BButton, BRow, BCol } from 'bootstrap-vue/es/components'
135+
136+
// Supply complete config to the BVConfig helper plugin
137+
Vue.use(BVConfig, {
138+
breakpoints: ['xs', 'sm', 'lg', 'xl', 'xxl'],
139+
BAlert: { variant: 'danger' },
140+
BButton: { variant: 'primary' }
141+
})
142+
143+
// Then install components globally
144+
Vue.component('b-alert', BAlert)
145+
Vue.component('b-button', BButton)
146+
Vue.component('b-row', BRow)
147+
Vue.component('b-col', BCol)
148+
149+
// Or register components as local to your custom component
150+
export default {
151+
name: 'MyComponent',
152+
components: {
153+
BAlert,
154+
BButton,
155+
BRow,
156+
BCol
157+
}
158+
// ...
159+
}
127160
```
128161

129162
**Caveat:** Vue only installs plugins _once_. If you import a plugin that has already been imported
130163
by another component plugin, the configuration passed to the component plugin will **not** be merged
131164
in. It is best to set the complete configuration using the `BVConfig` helper plugin as shown in
132-
**Example 3** above. The `BVConfig` plugin should be used in the main entry point of your app, and
133-
before any `Vue.use()` of component plugins.
165+
**Example 3** and **Example 4** above. The `BVConfig` plugin should be used in the main entry point of
166+
your app, and before any `Vue.use()` of component plugins or `Vue.component()` of indivdual components.
134167

135168
### Setting the config via Nuxt.js BootstrapVue plugin
136169

0 commit comments

Comments
 (0)