|
| 1 | +<template> |
| 2 | + <b-container id="content" fluid="lg" tag="main" class="py-5"> |
| 3 | + <header class="pb-4 bd-content"> |
| 4 | + <h1>Vue.js 3.x initial support</h1> |
| 5 | + <p class="bd-lead"> |
| 6 | + BootstrapVue meets <code class="text-nowrap" translate="no">@vue-compat</code>! |
| 7 | + </p> |
| 8 | + </header> |
| 9 | + <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 |
| 11 | + |
| 12 | + <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 bootstrap-vue 3.0 |
| 14 | + </b-alert> |
| 15 | + <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 | + </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> |
| 22 | + |
| 23 | + <pre class="hljs language-html text-monospace p-2 notranslate" translate="no">{{ cmpCode }}</pre> |
| 24 | + |
| 25 | + |
| 26 | + <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> |
| 28 | + </h2> |
| 29 | + |
| 30 | + <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> |
| 34 | + </ul> |
| 35 | + |
| 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> |
| 37 | + |
| 38 | + </section> |
| 39 | + </b-container> |
| 40 | +</template> |
| 41 | + |
| 42 | +<script> |
| 43 | +import hljs from '../utils/hljs' |
| 44 | +
|
| 45 | +export default { |
| 46 | + head() { |
| 47 | + const title = `Vue.js 3 support | BootstrapVue` |
| 48 | + return { |
| 49 | + title |
| 50 | + } |
| 51 | + }, |
| 52 | + computed: { |
| 53 | + cmpCode() { |
| 54 | + return [ |
| 55 | + `<template>...</template>`, |
| 56 | + `<script>`, |
| 57 | + `export default {`, |
| 58 | + ` data() { /* ... */ },`, |
| 59 | + ``, |
| 60 | + ` // This will disable all Vue.js 2 legacy features for your component`, |
| 61 | + ` compatConfig: { MODE: 3 }`, |
| 62 | + ``, |
| 63 | + ` // ... rest of your component configuration ... `, |
| 64 | + `}`, |
| 65 | + // eslint-disable-next-line no-useless-escape |
| 66 | + `<\/script>` |
| 67 | + ].join('\n') |
| 68 | + } |
| 69 | + }, |
| 70 | + mounted() { |
| 71 | + // Highlight code blocks |
| 72 | + ;[...this.$el.querySelectorAll('pre.hljs')].forEach(pre => { |
| 73 | + hljs.highlightBlock(pre) |
| 74 | + }) |
| 75 | + } |
| 76 | +} |
| 77 | +</script> |
0 commit comments