Estoy construyendo un SPA usando las últimas versiones de Vue.js 3 y Bootstrap 5. En la página principal estoy usando el elemento Boostrap Offcanvas con un código que es muy similar al de la documentación.

La definición de offcanvas se ve así

 <div class="offcanvas offcanvas-start" tabindex="-1" id="categories"> <div class="offcanvas-header"> ... </div> <div class="offcanvas-body"> ... </div> </div>

y este es el ancla que lo desencadena

 <a data-bs-toggle="offcanvas" href="#categories" role="button">Categories</a>

Leí en la documentación de Bootstrap que el div de Offcanvas dispara algunos eventos como shown y hidden , sin embargo, el nombre completo de estos eventos es shown.bs.offcanvas y hidden.bs.offcanvas . Al usar Javascript vainilla, podría escuchar esos eventos como los documentados usando addEventListener en el elemento Offcanvas, sin embargo, quería hacer las cosas "a la manera de Vue" usando Inline Handlers . Pero cuando trato de agregar

 @show.bs.offcanvas="console.log('Showing');" // or v-on:show.bs.offcanvas="console.log('Showing');"

al div Offcanvas obtengo los siguientes errores

 /Path/To/File/NavBar.vue 48:123 error 'v-on' directives don't support the modifier 'bs' vue/valid-v-on 48:126 error 'v-on' directives don't support the modifier 'offcanvas' vue/valid-v-on ✖ 2 problems (2 errors, 0 warnings)

Entonces Vue ve el . e interpreta los modificadores de eventos bs y offcanvas .

¿Alguien ha encontrado alguna vez un problema similar o sabe cómo especificar exactamente incluso