Skip to content

Conversation

@reubns
Copy link
Contributor

@reubns reubns commented Apr 3, 2024

Describe the PR

Warning

Once Vue 3.5 is released, this PR will (likely) become obsolete in favour of the official method for generating IDs. If it is acceptable to wait for the 3.5 release, please close this PR.

Closes: #1730

This PR allows users to provide their own implementation for generating IDs. For example in Nuxt >= 3.10, to use SSR-friendly IDs.

// app.vue
provideGetId(() => useId())

Note

The Nuxt implementation above doesn't work for components with inheritAttrs: false due to the implementation of Nuxt's useId. For example, BFormRadio.

Credits: tailwindlabs/headlessui#2959 unovue/reka-ui#718

Small replication

Issue is described in #1730

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

@bolt-new-by-stackblitz
Copy link

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

@xvaara
Copy link
Contributor

xvaara commented Apr 4, 2024

Tested with nuxt kitchensink (all the playground components) and most of the hydration mismatches are gone :)

@sebbayer sebbayer mentioned this pull request Apr 5, 2024
6 tasks
@VividLemon VividLemon merged commit c9e60f5 into bootstrap-vue-next:main Apr 14, 2024
@github-actions github-actions bot mentioned this pull request Apr 14, 2024
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Apr 16, 2024
* upstream/main:
  ci: add workflow dispatch to docs deploy
  chore: release main
  fix(BFormCheckbox): Prevent empty string being cast to true fixes bootstrap-vue-next#1822
  feat(utils): inject getId to allow for custom id generation (bootstrap-vue-next#1836)
  BTable multisort (bootstrap-vue-next#1842)
  fix(BFormSelect): array of numbers or dates (bootstrap-vue-next#1839)
  fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover (bootstrap-vue-next#1837)
  fix(BFormFile): add properties placement and browser as in BootstrapVue (bootstrap-vue-next#1797)
  feat(BCheckbox)!: Implement reverse and without label (bootstrap-vue-next#1825)
  docs: Add documentation and parity section to contributing.md (bootstrap-vue-next#1834)
  vscode vue typescript plugin is now depricated and included in volar
xvaara added a commit to xvaara/bootstrap-vue-next that referenced this pull request Apr 17, 2024
* upstream/main:
  update vue deps (bootstrap-vue-next#1850)
  fix(BPopover): fix injection out of setup context. (bootstrap-vue-next#1848)
  ci: add workflow dispatch to docs deploy
  chore: release main
  fix(BFormCheckbox): Prevent empty string being cast to true fixes bootstrap-vue-next#1822
  feat(utils): inject getId to allow for custom id generation (bootstrap-vue-next#1836)
  BTable multisort (bootstrap-vue-next#1842)
  fix(BFormSelect): array of numbers or dates (bootstrap-vue-next#1839)
  fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover (bootstrap-vue-next#1837)
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.

Default component ids are not SSR friendly

3 participants