Skip to content

Commit ef391f5

Browse files
VividLemonVividLemon
authored
docs: bootstrap-vue-next recommendation (#7219)
1 parent 9177189 commit ef391f5

File tree

1 file changed

+15
-17
lines changed

1 file changed

+15
-17
lines changed

‎docs/pages/vue3.vue

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,37 @@
11
<template>
22
<b-container id="content" fluid="lg" tag="main" class="py-5">
33
<header class="pb-4 bd-content">
4-
<h1>Vue.js 3.x initial support</h1>
4+
<h1>Transitioning to Vue.js 3.x</h1>
55
<p class="bd-lead">
6-
BootstrapVue meets <code class="text-nowrap" translate="no">@vue-compat</code>!
6+
BootstrapVue evolves with <code class="text-nowrap" translate="no">@vue-compat</code>!
77
</p>
88
</header>
99
<section class="bd-content">
10-
With the release of <b>v2.23.0</b> you can now use <span class="bd-text-purple-bright">BootstrapVue</span> with <a href="https://v3-migration.vuejs.org/migration-build.html" target="_blank">migration build</a> of Vue.js 3
10+
With the release of <b>v2.23.0</b>, you can begin using <span class="bd-text-purple-bright">BootstrapVue</span> with the <a href="https://v3-migration.vuejs.org/migration-build.html" target="_blank">migration build</a> of Vue.js 3.
1111

1212
<b-alert show variant="warning" class="mt-3">
13-
@vue/compat support is designed for early migration to Vue.js 3 and will be eventually replaced with <a href="https://bootstrap-vue-next.github.io/bootstrap-vue-next/" target="_blank" rel="noopener">BootstrapVueNext</a>. BootstrapVueNext is currently in <b>Alpha</b>
13+
While <code class="text-nowrap" translate="no">@vue/compat</code> can assist with simple migrations, it is not intended for long-term use. We highly recommend migrating to <a href="https://bootstrap-vue-next.github.io/bootstrap-vue-next/" target="_blank" rel="noopener">BootstrapVueNext</a>, a complete rewrite that supports Bootstrap v5 and fully utilizes Vue.js 3's capabilities.
1414
</b-alert>
15+
1516
<h2 id="limitations" class="bv-no-focus-ring mb-3">
16-
<span class="bd-content-title">Important limitations<a href="#prerequisites" aria-labelledby="limitations" class="anchorjs-link"></a></span>
17+
<span class="bd-content-title">Important Limitations<a href="#prerequisites" aria-labelledby="limitations" class="anchorjs-link"></a></span>
1718
</h2>
18-
<p><code class="text-nowrap" translate="no">@vue-compat</code> support is currently limited to <code class="text-nowrap" translate="no">{ MODE: 2 }</code> configuration both for compiler and Vue.js itself.
19-
You can find more details in <a href="https://v3-migration.vuejs.org/migration-build.html#compat-configuration" target="_blank">compat configuration</a> section of migration guide.
20-
</p>
21-
<p>That means that you can manually configure each your component with <code class="text-nowrap" translate="no">{ compatConfig: { MODE: 3 }}</code> to be ready for switching to Vue.js 3, however global configuration should be kept in legacy mode in order for all BootstrapVue functions to work</p>
19+
<p><code class="text-nowrap" translate="no">@vue-compat</code> support is currently limited to the <code class="text-nowrap" translate="no">{ MODE: 2 }</code> configuration for both the compiler and Vue.js. For more details, refer to the <a href="https://v3-migration.vuejs.org/migration-build.html#compat-configuration" target="_blank">compat configuration</a> section of the migration guide.</p>
20+
<p>This means that while you can configure individual components with <code class="text-nowrap" translate="no">{ compatConfig: { MODE: 3 }}</code>, you should maintain global configuration in legacy mode to ensure all BootstrapVue functions operate correctly.</p>
2221

2322
<pre class="hljs language-html text-monospace p-2 notranslate" translate="no">{{ cmpCode }}</pre>
2423

25-
2624
<h2 id="start" class="bv-no-focus-ring">
27-
<span class="bd-content-title">Getting started<a href="#prerequisites" aria-labelledby="start" class="anchorjs-link"></a></span>
25+
<span class="bd-content-title">Getting Started<a href="#prerequisites" aria-labelledby="start" class="anchorjs-link"></a></span>
2826
</h2>
2927

3028
<ul>
31-
<li>Configure your application according to <a target="_blank" href="https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow">upgrade workflow</a></li>
32-
<li>Upgrade bootstrap-vue to <b>v2.23.0</b> or higher</li>
33-
<li>Make sure you're still on bootstrap <b>v4</b></li>
29+
<li>Follow the <a target="_blank" href="https://v3-migration.vuejs.org/migration-build.html#upgrade-workflow">upgrade workflow</a> to configure your application.</li>
30+
<li>Upgrade to <b>bootstrap-vue v2.23.0</b> or higher.</li>
31+
<li>Ensure you are using Bootstrap <b>v4</b>.</li>
3432
</ul>
3533

36-
<p>You can use this <a href="https://stackblitz.com/edit/bootstrap-vue-with-compat">sandbox</a> for reference or reporting issues with @vue/compat</p>
34+
<p>For a reference implementation or to report issues with <code class="text-nowrap" translate="no">@vue/compat</code>, you can use this <a href="https://stackblitz.com/edit/bootstrap-vue-with-compat">sandbox</a>.</p>
3735

3836
</section>
3937
</b-container>
@@ -44,7 +42,7 @@ import hljs from '../utils/hljs'
4442
4543
export default {
4644
head() {
47-
const title = `Vue.js 3 support | BootstrapVue`
45+
const title = `Vue.js 3 Support | BootstrapVue`
4846
return {
4947
title
5048
}
@@ -57,7 +55,7 @@ export default {
5755
`export default {`,
5856
` data() { /* ... */ },`,
5957
``,
60-
` // This will disable all Vue.js 2 legacy features for your component`,
58+
` // Disable all Vue.js 2 legacy features for your component`,
6159
` compatConfig: { MODE: 3 }`,
6260
``,
6361
` // ... rest of your component configuration ... `,

0 commit comments

Comments
 (0)