Skip to content

docs(migration): add component aliases guidelines #2771

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

homersimpsons
Copy link
Contributor

@homersimpsons homersimpsons commented Jul 8, 2025

Describe the PR

Add section in migration guide about removal of component aliases.

Also fix "the the" typos (I can extract this in another pull request if necessary).

Note that I built (manually) the list of aliases from BootstrapVue's documentation, but maybe some of them do not exist on BootstrapVueNext.

Small replication

NA

PR checklist

What kind of change does this PR introduce? (check at least one)

  • [-] Bugfix 🐛 - fix(...)
  • [-] Feature - feat(...)
  • [-] ARIA accessibility - fix(...)
  • Documentation update - docs(...)
  • [-] Other (please describe)

The PR fulfills these requirements:

  • Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

Summary by CodeRabbit

  • Documentation
    • Fixed typographical errors and improved clarity in component descriptions and documentation.
    • Updated the migration guide with a new section on component aliases, including a comprehensive comparison table between BootstrapVue and BootstrapVueNext.
    • Enhanced overall readability and accuracy of documentation content.

Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

coderabbitai bot commented Jul 8, 2025

Walkthrough

This update addresses several typographical errors and improves clarity across documentation and descriptive comments in the codebase. It also adds a new section and a comprehensive alias table to the migration guide, clarifying the lack of component alias support in BootstrapVueNext. No functional or logic changes are present.

Changes

File(s) Change Summary
apps/docs/src/data/components/tabs.data.ts Fixed a typo in the description of the card prop for the BTabs component.
apps/docs/src/docs/components/form-spinbutton.md Fixed typos and grammatical errors in documentation sentences related to key repeat settings.
apps/docs/src/docs/migration-guide.md Fixed typos, improved clarity, added a section on component aliases with a detailed replacement table.
apps/docs/src/utils/image-props.ts Corrected a typo in the description string for the fluid property in imageProps.

Possibly related PRs

Suggested reviewers

  • VividLemon

Poem

In the docs where typos hide,
A rabbit hopped and fixed with pride.
Aliases listed, clarity improved,
Every stray "the" gently removed.
With every tweak, the docs shine bright—
A bunny’s touch makes reading light!
🐇✨

✨ Finishing Touches
  • 📝 Generate Docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

pkg-pr-new bot commented Jul 8, 2025

bsvn-vite-ts

npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next@2771
npm i https://pkg.pr.new/bootstrap-vue-next/bootstrap-vue-next/@bootstrap-vue-next/nuxt@2771

commit: ada7591

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (9)
apps/docs/src/docs/components/form-spinbutton.md (1)

125-126: Subject/verb agreement & punctuation

Plural subjects need the plural verb, and the sentence ends abruptly without a period.

-Note the `repeat-delay`, `repeat-threshold` and `repeat-interval` only applies to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys
+Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` settings only apply to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.
apps/docs/src/data/components/tabs.data.ts (1)

88-89: Minor wording tweak (optional)

You could drop “to be” for a slightly smoother read:

-"When set to true, renders the tabs with the appropriate styles to be placed into a 'b-card'",
+"When set to true, renders the tabs with styles appropriate for placement in a <BCard>",

Purely stylistic—feel free to keep as-is.

apps/docs/src/docs/migration-guide.md (7)

52-54: Sentence still fragmented

The second line is dangling. Joining it tightens the statement.

-on the model (generally named models).
+by model properties (typically named `models`).

54-55: Component name & wording

BFormCheckbox is the actual component name and the sentence can be more concise.

-For instance, in order to two-way bind to the `indeterminate` property in `BFormCheckBox` you `v-bind` to the model named `indeterminate` rather than adding the sync modifier to the `indeterminate` property:
+For example, to two-way bind the `indeterminate` state of `<BFormCheckbox>`, bind to the `indeterminate` model instead of using the `.sync` modifier:

150-156: Grammar, spelling & flow

Several small issues (“have” → “has”, “instace”, commas). Suggested rewrite:

-Bootstrap Vue have component aliases, for instace `<b-button>` could be used as `<b-btn>`.
-BootstrapVueNext will not support them and hence you should use the non-aliased version.
-
-Here is a table giving all of the aliases and their replacements:
+BootstrapVue had a number of component aliases; for instance, `<b-button>` could be written as `<b-btn>`.
+BootstrapVueNext does not support these aliases, so you must use the full component names.
+
+The following table lists each alias alongside its replacement:

348-349: Clarity

Slight re-phrasing makes the intent clearer.

-The boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated.
+The boolean argument that controls whether focus returns to the toggle button in the `hide` scoped slot is deprecated.

414-420: Streamline & avoid back-ticks around plain text

-`Vue 3` changed the way that `v-model` binding works and in the process changed the guidance
-when naming the main model property and events for the primary model. `bootstrap-vue-next` follows
-this guidance, which affects all of the wrappers for form input. If you're looking for the `value`
-property or the `change` and `input` events, you'll find that functionality in the `modelValue`
-property and `update:model-value` events. Bootstrap-vue-next no longer provides custom `change` and
-`input` events, so the native versions of those events are now exposed.
+Vue 3 changed how `v-model` works and, as a result, updated the recommended names for the primary model property and its events. BootstrapVueNext follows this guidance: all form-input wrappers now use the `modelValue` property and the `update:model-value` event instead of the legacy `value`, `change`, or `input` APIs. Consequently, only the native `change` and `input` events are exposed.

658-659: Missing concluding phrase

Add “for details” for a smoother finish and period for consistency.

-The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. Details in our [docs](/components/navbar#color-scheme)
+The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. See our [docs](/components/navbar#color-scheme) for details.

730-732: Optional punctuation

Consider adding a comma after “deprecated” for readability:

-`<BSkeletonIcon>` is deprecated along with the rest of the BootstrapVue icon support.
+`<BSkeletonIcon>` is deprecated, along with the rest of the BootstrapVue icon support.

Purely stylistic.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7f675df and d96d8ee.

📒 Files selected for processing (4)
  • apps/docs/src/data/components/tabs.data.ts (1 hunks)
  • apps/docs/src/docs/components/form-spinbutton.md (1 hunks)
  • apps/docs/src/docs/migration-guide.md (6 hunks)
  • apps/docs/src/utils/image-props.ts (1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/data/components/tabs.data.ts (7)
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type for table items should use the singular form `Item` rather than the plural `Items` to follow TypeScript conventions and improve readability. This makes expressions like `item: Item` and `items: Item[]` more intuitive than `item: Items` and `items: Items[]`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type for table items should use the singular form `Item` rather than the plural `Items` to follow TypeScript conventions and improve readability in type definitions.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type for table items should be named in singular form (`Item`) rather than plural (`Items`) to follow TypeScript conventions and improve readability in type definitions.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md

[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...plieramount Note therepeat-delay, repeat-thresholdandrepeat-interval` only applies to t...

(QB_NEW_EN_OTHER_ERROR_IDS_000073)


[grammar] ~125-~125: There might be a mistake here.
Context: ...t-thresholdandrepeat-interval` only applies to the ArrowUp or Arrow...

(QB_NEW_EN_OTHER)


[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>

(QB_NEW_EN_OTHER_ERROR_IDS_000178)

apps/docs/src/docs/migration-guide.md

[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...

(QB_NEW_EN_OTHER)


[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...

(QB_NEW_EN_OTHER)


[grammar] ~150-~150: Use proper spacing conventions.
Context: ...roupMigration.vue ## Components aliases Bootstrap Vue have component aliases, fo...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~152-~152: Ensure subjects and verbs match in plurality.
Context: ...e ## Components aliases Bootstrap Vue have component aliases, for instace `<b-butt...

(QB_NEW_EN_OTHER_ERROR_IDS_000074)


[grammar] ~152-~152: There might be a mistake here.
Context: ...es Bootstrap Vue have component aliases, for instace <b-button> could be used ...

(QB_NEW_EN_OTHER)


[grammar] ~152-~152: Ensure spelling is correct.
Context: ...otstrap Vue have component aliases, for instace <b-button> could be used as <b-btn>...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_000051)


[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-button> could be used as <b-btn>. BootstrapVueNext will not support them a...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[style] ~155-~155: Consider removing “of” to be more concise
Context: ...liased version. Here is a table giving all of the aliases and their replacements: | Boot...

(ALL_OF_THE)


[grammar] ~155-~155: Use proper spacing conventions.
Context: ...l of the aliases and their replacements: | BootstrapVue ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...

(QB_NEW_EN_OTHER)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: build
  • GitHub Check: test-unit
🔇 Additional comments (1)
apps/docs/src/utils/image-props.ts (1)

29-30: Typo fix looks good

The corrected wording removes the duplicated “the”. No further changes needed.

@homersimpsons homersimpsons force-pushed the doc/migration-aliases branch from d96d8ee to 3bb4f13 Compare July 8, 2025 23:22
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (6)
apps/docs/src/docs/components/form-spinbutton.md (1)

125-125: Fix plural-verb agreement and punctuation

The subject is a list of three settings, so use “apply” + end the sentence with a period.

-Note the `repeat-delay`, `repeat-threshold` and `repeat-interval` only applies to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys
+Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.
apps/docs/src/docs/migration-guide.md (5)

52-54: Clarify wording & fix grammar in “Sync modifier” paragraph

-This modifier has been replaced by properties
-on the model (generally named models).
+This modifier has been replaced by dedicated model properties (usually named `modelValue`).
 
-For instance, in order to two-way bind to the `indeterminate` property in `BFormCheckBox` you `v-bind` to the model
-named `indeterminate` rather than adding the sync modifier to the `indeterminate` property:
+For example, to two-way bind the `indeterminate` property of `BFormCheckBox`, bind to the model named `indeterminate` instead of adding the `.sync` modifier to that prop:

150-156: Rename heading & clean up alias section grammar

-## Components aliases
+## Component aliases
 
-Bootstrap Vue have component aliases, for instace `<b-button>` could be used as `<b-btn>`.
-BootstrapVueNext will not support them and hence you should use the non-aliased version.
+BootstrapVue had a number of component aliases—for instance, `<b-btn>` was an alias for `<b-button>`.
+BootstrapVueNext does not support these aliases, so you must use the canonical component names.
 
-Here is a table giving all of the aliases and their replacements:
+The table below lists each BootstrapVue alias and its BootstrapVueNext replacement:

348-348: Sentence is hard to parse

Recommend re-phrasing for clarity:

-The boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated.
+The boolean argument in the `hide` scoped slot that controlled whether focus returned to the toggle button is deprecated.

658-658: Terminate sentence properly

-The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. Details in our [docs](/components/navbar#color-scheme)
+The `type` prop is deprecated. Use the `v-b-color-mode` directive or `useColorMode` composable instead. See our [docs](/components/navbar#color-scheme) for details.

730-730: Minor spacing & punctuation nit

-`<BSkeletonIcon>` is deprecated along with the rest of the BootstrapVue icon support. See our
-[icon documentation](/docs/icons) for details.
+`<BSkeletonIcon>` is deprecated along with the rest of the BootstrapVue icon support.  
+See our [icon documentation](/docs/icons) for details.
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d96d8ee and 3bb4f13.

📒 Files selected for processing (4)
  • apps/docs/src/data/components/tabs.data.ts (1 hunks)
  • apps/docs/src/docs/components/form-spinbutton.md (1 hunks)
  • apps/docs/src/docs/migration-guide.md (6 hunks)
  • apps/docs/src/utils/image-props.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/docs/src/utils/image-props.ts
  • apps/docs/src/data/components/tabs.data.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md

[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...plieramount Note therepeat-delay, repeat-thresholdandrepeat-interval` only applies to t...

(QB_NEW_EN_OTHER_ERROR_IDS_000073)


[grammar] ~125-~125: There might be a mistake here.
Context: ...t-thresholdandrepeat-interval` only applies to the ArrowUp or Arrow...

(QB_NEW_EN_OTHER)


[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>

(QB_NEW_EN_OTHER_ERROR_IDS_000178)

apps/docs/src/docs/migration-guide.md

[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...

(QB_NEW_EN_OTHER)


[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...

(QB_NEW_EN_OTHER)


[grammar] ~150-~150: Use proper spacing conventions.
Context: ...roupMigration.vue ## Components aliases Bootstrap Vue have component aliases, fo...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~152-~152: Ensure subjects and verbs match in plurality.
Context: ...e ## Components aliases Bootstrap Vue have component aliases, for instace `<b-butt...

(QB_NEW_EN_OTHER_ERROR_IDS_000074)


[grammar] ~152-~152: There might be a mistake here.
Context: ...es Bootstrap Vue have component aliases, for instace <b-button> could be used ...

(QB_NEW_EN_OTHER)


[grammar] ~152-~152: Ensure spelling is correct.
Context: ...otstrap Vue have component aliases, for instace <b-button> could be used as <b-btn>...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_000051)


[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-button> could be used as <b-btn>. BootstrapVueNext will not support them a...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[style] ~155-~155: Consider removing “of” to be more concise
Context: ...liased version. Here is a table giving all of the aliases and their replacements: | Boot...

(ALL_OF_THE)


[grammar] ~155-~155: Use proper spacing conventions.
Context: ...l of the aliases and their replacements: | BootstrapVue ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...

(QB_NEW_EN_OTHER)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: test-unit
  • GitHub Check: build

@homersimpsons homersimpsons force-pushed the doc/migration-aliases branch from 3bb4f13 to 72f2768 Compare July 8, 2025 23:47
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
apps/docs/src/docs/components/form-spinbutton.md (1)

125-126: Plural-verb agreement + punctuation

repeat-delay, repeat-threshold, and repeat-interval are plural; use “apply”, not “applies”, and finish the sentence with a period.

-Note that the `repeat-delay`, `repeat-threshold` and `repeat-interval` only applies to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys
+Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.
apps/docs/src/docs/migration-guide.md (2)

52-53: Clarify wording of replacement for .sync

“properties on the model (generally named models)” is hard to parse. Consider rephrasing to make the guidance unambiguous.

-This modifier has been replaced by properties on the model (generally named models).
+This modifier has been replaced by additional named `v-model` bindings (usually with model names).

54-55: Component name casing

BFormCheckbox is the canonical component name (no capital “B” inside “Check”). Using the correct casing avoids confusion and keeps the docs searchable.

-...property in `BFormCheckBox` you `v-bind`...
+...property in `BFormCheckbox` you `v-bind`...
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3bb4f13 and 72f2768.

📒 Files selected for processing (4)
  • apps/docs/src/data/components/tabs.data.ts (1 hunks)
  • apps/docs/src/docs/components/form-spinbutton.md (1 hunks)
  • apps/docs/src/docs/migration-guide.md (6 hunks)
  • apps/docs/src/utils/image-props.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/docs/src/utils/image-props.ts
  • apps/docs/src/data/components/tabs.data.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md

[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...amount Note that therepeat-delay, repeat-thresholdandrepeat-interval` only applies to t...

(QB_NEW_EN_OTHER_ERROR_IDS_000073)


[grammar] ~125-~125: There might be a mistake here.
Context: ...t-thresholdandrepeat-interval` only applies to the ArrowUp or Arrow...

(QB_NEW_EN_OTHER)


[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>

(QB_NEW_EN_OTHER_ERROR_IDS_000178)

apps/docs/src/docs/migration-guide.md

[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...

(QB_NEW_EN_OTHER)


[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...

(QB_NEW_EN_OTHER)


[grammar] ~150-~150: Use proper spacing conventions.
Context: ...GroupMigration.vue ## Component aliases BootstrapVue had a number of component a...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~152-~152: There might be a problem here.
Context: ...rapVue had a number of component aliases — for instance, <b-btn> was an alias for...

(QB_NEW_EN_MERGED_MATCH)


[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-btn> was an alias for <b-button>. BootstrapVueNext does not support these ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~153-~153: Use proper spacing conventions.
Context: ... must use the canonical component names. The table below lists each BootstrapVue ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~155-~155: Use proper spacing conventions.
Context: ...as and its BootstrapVueNext replacement: | BootstrapVue ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...

(QB_NEW_EN_OTHER)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: test-unit
  • GitHub Check: build
🔇 Additional comments (1)
apps/docs/src/docs/migration-guide.md (1)

150-186: Alias table completeness – please verify

Great addition! A few common aliases from BootstrapVue appear to be missing (e.g. b-radio, b-checkbox-group, b-check-group, b-dd-header vs. already listed b-d-dropdown-header). Double-check that the table is exhaustive so users don’t miss an alias during migration.

@homersimpsons homersimpsons force-pushed the doc/migration-aliases branch from 72f2768 to ada7591 Compare July 8, 2025 23:50
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (5)
apps/docs/src/docs/components/form-spinbutton.md (1)

125-125: Clarify wording & punctuation for better readability

Consider tightening the sentence and adding a final period:

-Note that the `repeat-delay`, `repeat-threshold` and `repeat-interval` only apply to the <kbd>ArrowUp</kbd> or <kbd>ArrowDown</kbd> keys
+Note that the `repeat-delay`, `repeat-threshold`, and `repeat-interval` settings apply only to the <kbd>ArrowUp</kbd> and <kbd>ArrowDown</kbd> keys.

This introduces the Oxford comma, moves “only” next to the verb it qualifies, switches “or” to “and” (both keys are affected), and terminates the sentence with a period.

apps/docs/src/docs/migration-guide.md (4)

52-55: Re-phrase “properties … (generally named models)”

The parenthetical is confusing because “models” suggests plurality while Vue’s primary model prop is normally singular (modelValue). A crisper alternative:

-This modifier has been replaced by properties on the model (generally named models).
+This modifier is replaced by dedicated model props (typically named `modelValue` or similar).

Also, BFormCheckBoxBFormCheckbox (camel-casing matches the actual component).


54-56: Fix component name & missing article

Add “to” before “v-bind” and correct component name:

-For instance, in order to two-way bind to the `indeterminate` property in `BFormCheckBox` you `v-bind` to the model
+For instance, to two-way bind the `indeterminate` property in `BFormCheckbox`, you should `v-bind` to the model

150-156: Provide backlink to legacy alias docs for quicker migration

Per previous guidance, a short link to the BootstrapVue alias reference would help users verify the mapping:

_For the original alias list, see the [BootstrapVue documentation](https://bootstrap-vue.github.io/bootstrap-vue/docs/reference/aliases)._  

Placing this just after the introductory paragraph offers an immediate reference without cluttering the table.


348-350: Sharpen wording around deprecated boolean argument

The phrase “boolean argument to control returning focus … is deprecated” is hard to parse. Suggested tweak:

-The boolean argument to control returning focus to the toggle button on the `hide` scoped property of the default slot is deprecated.
+The boolean parameter that previously controlled whether focus returned to the toggle button in the `hide` scoped slot is deprecated.

This makes the subject (“boolean parameter”) explicit and reduces nesting.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 72f2768 and ada7591.

📒 Files selected for processing (4)
  • apps/docs/src/data/components/tabs.data.ts (1 hunks)
  • apps/docs/src/docs/components/form-spinbutton.md (1 hunks)
  • apps/docs/src/docs/migration-guide.md (6 hunks)
  • apps/docs/src/utils/image-props.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/docs/src/utils/image-props.ts
  • apps/docs/src/data/components/tabs.data.ts
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
apps/docs/src/docs/migration-guide.md (12)
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:622-626
Timestamp: 2025-06-05T11:43:10.793Z
Learning: In migration guides, links to the old/previous version's documentation (like bootstrap-vue.org) are appropriate and helpful when explaining deprecated features, as they provide users with reference points for what they're migrating from.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2701
File: apps/docs/src/docs/migration-guide.md:630-632
Timestamp: 2025-05-23T23:58:07.165Z
Learning: The `<NotYetImplemented/>` component in the bootstrap-vue-next documentation automatically renders text indicating "Not Yet Implemented", so additional explanatory text about features not being implemented is redundant when this component is used.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2669
File: apps/docs/src/data/components/table.data.ts:334-336
Timestamp: 2025-04-24T20:35:48.629Z
Learning: The generic type parameter for table items should use the singular form `Item` rather than the plural `Items` to improve readability and follow TypeScript conventions. This change would primarily affect two files: `packages/bootstrap-vue-next/src/types/ComponentProps.ts` and `apps/docs/src/data/components/table.data.ts`.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:425-430
Timestamp: 2025-05-28T07:32:45.658Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex synchronization within sortTabs() is necessary and correct. When sorting tabs by DOM position, indices change, so activeIndex must be updated immediately to maintain consistency with activeId. This is not an unwanted side effect but a required consequence of the sorting operation.
Learnt from: unstoppablecarl
PR: bootstrap-vue-next/bootstrap-vue-next#2671
File: packages/bootstrap-vue-next/src/components/BToast/_toast.scss:1-3
Timestamp: 2025-04-27T17:30:42.045Z
Learning: In global SCSS files for bootstrap-vue-next, `:deep()` combinator should not be used as it only works in Vue's scoped style blocks. Standard CSS/SCSS selectors should be used instead.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:384-404
Timestamp: 2025-05-28T07:57:19.915Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the activeIndex and activeId watchers are intentionally designed with separation of concerns: activeIndex watcher handles activate-tab event emission and complex validation logic, while activeId watcher is kept simple for synchronization between activeId and activeIndex values only.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2716
File: packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue:240-261
Timestamp: 2025-05-28T07:01:55.095Z
Learning: In BTabs component (packages/bootstrap-vue-next/src/components/BTabs/BTabs.vue), the complex initialization logic with updateInitialActiveIndex and updateInitialActiveId flags is necessary for SSR compatibility. Tab initialization cannot be deferred to mounted lifecycle because tabs must be available for server-side rendering of the initial HTML state.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2679
File: apps/docs/.vitepress/theme/Layout.vue:0-0
Timestamp: 2025-05-01T23:40:56.146Z
Learning: In bootstrap-vue-next, the `useScrollspy` hook returns an object with a `current` property which is the ID string (or null) of the currently active item, not an object containing an ID.
Learnt from: dwgray
PR: bootstrap-vue-next/bootstrap-vue-next#2762
File: apps/docs/src/docs/components/tooltip.md:0-0
Timestamp: 2025-06-26T19:46:19.333Z
Learning: BTooltip is a very thin wrapper around BPopover in bootstrap-vue-next. There is no separate `useTooltipController` composable - the `usePopoverController` composable can be used to programmatically control both popovers and tooltips.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2425
File: packages/bootstrap-vue-next/src/plugins/popoverController/index.ts:138-140
Timestamp: 2025-04-28T22:48:46.738Z
Learning: In bootstrap-vue-next, `PopoverOrchestratorParam` includes an `id` field of type `ControllerKey` through inheritance from base types. This field is declared in the `BvControllerOptions` interface and propagated through the type hierarchy.
Learnt from: xvaara
PR: bootstrap-vue-next/bootstrap-vue-next#2672
File: packages/bootstrap-vue-next/src/components/BPopover/BPopover.vue:269-277
Timestamp: 2025-04-28T20:33:04.113Z
Learning: In Vue 3.3+, `toRef(() => props.strategy)` creates a reactive readonly ref. This getter-based syntax was introduced in Vue 3.3 as an ergonomic alternative to `computed()` and is the recommended approach for creating refs from props or other reactive sources.
Learnt from: VividLemon
PR: bootstrap-vue-next/bootstrap-vue-next#2691
File: packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts:85-86
Timestamp: 2025-05-26T17:28:35.902Z
Learning: In the `useBLinkTagResolver` function in `packages/bootstrap-vue-next/src/composables/useBLinkHelper.ts`, the `routerComponentName` parameter is required and typed as `MaybeRefOrGetter<string>`, ensuring it cannot be undefined.
🪛 LanguageTool
apps/docs/src/docs/components/form-spinbutton.md

[grammar] ~125-~125: Correctly pair commas and coordinating conjunctions.
Context: ...amount Note that therepeat-delay, repeat-thresholdandrepeat-interval` only apply to the...

(QB_NEW_EN_OTHER_ERROR_IDS_000073)


[grammar] ~125-~125: Place a period at the end of declarative sentences.
Context: ...rowUp or ArrowDown keys <script setup lang="ts"> import {data} from '../../data/components/formSpinbutton.data' </script>

(QB_NEW_EN_OTHER_ERROR_IDS_000178)

apps/docs/src/docs/migration-guide.md

[grammar] ~54-~54: There might be a mistake here.
Context: ...bind to the indeterminate property in BFormCheckBox you v-bind to the model named `indete...

(QB_NEW_EN_OTHER)


[grammar] ~54-~54: There might be a mistake here.
Context: ...BFormCheckBoxyouv-bindto the model namedindeterminate` rather than adding...

(QB_NEW_EN_OTHER)


[grammar] ~150-~150: Use proper spacing conventions.
Context: ...GroupMigration.vue ## Component aliases BootstrapVue had a number of component a...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~152-~152: There might be a problem here.
Context: ...rapVue had a number of component aliases — for instance, <b-btn> was an alias for...

(QB_NEW_EN_MERGED_MATCH)


[grammar] ~152-~152: Use proper spacing conventions.
Context: ...<b-btn> was an alias for <b-button>. BootstrapVueNext does not support these ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~153-~153: Use proper spacing conventions.
Context: ... must use the canonical component names. The table below lists each BootstrapVue ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~155-~155: Use proper spacing conventions.
Context: ...as and its BootstrapVueNext replacement: | BootstrapVue ...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~348-~348: Use proper spacing conventions.
Context: ...perty of the default slot is deprecated. It is less important in BootstrapVueNext...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~658-~658: Use proper spacing conventions.
Context: ...composable instead. Details in our docs #### BNavbarNav align prop now takes value...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: Use proper spacing conventions.
Context: ...holder*>components. ` is deprecated along with the rest of the...

(QB_NEW_EN_OTHER_ERROR_IDS_000007)


[grammar] ~730-~730: There might be a mistake here.
Context: ...f the BootstrapVue icon support. See our icon documentation for de...

(QB_NEW_EN_OTHER)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: build

@VividLemon
Copy link
Member

Perhaps we should just export them instead of discontinuing them? What do you think

@homersimpsons
Copy link
Contributor Author

homersimpsons commented Jul 9, 2025

Perhaps we should just export them instead of discontinuing them? What do you think

In my opinion we should not, not having them means:

  • reduced api surface
  • one way to use the component
  • avoid requests to add an alias for this or that component

But having them also has advantages:

  • shorter component names
  • easier upgrade from BootstrapVue

We could also argue that anyone can declare those component aliases themselves if they need to.

@VividLemon
Copy link
Member

But we do support binput as an alias. And I think one other. Thats the only one though

@VividLemon
Copy link
Member

But I do agree. One unified api is my prefered

@homersimpsons
Copy link
Contributor Author

But we do support binput as an alias. And I think one other. Thats the only one though

Should this alias be removed ? Or at least not documented (if it is currently) ?

@@ -147,6 +147,43 @@ user supplied string, but the BootstrapVueNext library isn't adding an extra lay

<<< DEMO ./demo/RadioGroupMigration.vue

## Component aliases

BootstrapVue had a number of component aliases — for instance, `<b-btn>` was an alias for `<b-button>`.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for addressing this @homersimpsons! A couple of thoughts:

Shouldn't we point folks to the option of adding their own aliases to the unplugin-vue resolver if they so choose? And assuming we intend to continue to support that option.

Also, I'm not quite sure how I would do this, but we're trying to keep the names in the docs and samples to the preferred Vue 3 naming conventions (e.g. BButton rather than b-button). Maybe make the BSVN column use that convention and note the kebab syntax is still supported (since a newbie might get confused between the idea of aliasing and Vue's support for different naming conventions).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants