Closed
Description
Describe the bug
If component id is not explicitly specified, it is generated using Math.random(), which leads to hydration errors:
Hydration attribute mismatch on <input id="__BVID__921175___BV_form-check__" class="form-check-input" type="checkbox">
- rendered on server: id="__BVID__921175___BV_form-check__"
- expected on client: id="__BVID__935395___BV_form-check__"
Solution: use the bootstrap-vue strategy. If the component id is not specified, leave it empty during SSR and generate it onMounted.
Reproduction
https://stackblitz.com/edit/nuxt-starter-bavjvy?file=app.vue
Used Package Manager
pnpm
Validations
- Have tested with the latest version. This is still alpha version and sometime things change rapidly.
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.