Inline event handler in Vue.Js with dots in the name

Question

I am building a SPA using the latest versions of Vue.js 3 and Bootstrap 5. In the main page I am using the Boostrap Offcanvas element with a code that is very similar to the one in the documentation.

The offcanvas definition looks like this

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

and this is the anchor that triggers it

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

I read in the Bootstrap documentation that the Offcanvas div fires some events like shown and hidden, however the full name of these events is shown.bs.offcanvas and hidden.bs.offcanvas. Using vanilla Javascript I could do listen to those events like documented using addEventListener on the Offcanvas element, however I wanted to do things "the Vue way" using Inline Handlers. But when I try to add

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

to the Offcanvas div I get the following errors

/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)

So Vue sees the . and interprets bs and offcanvas Event Modifiers.

Has anyone ever encountered a similar problem or knows how to specify exact even

Answer 1

Turns out I did not do enough Googling around and the same question was already answered for Vue.js 2 here. I have self-flagged the post as duplicate just in case.

I can confirm that this works in Vue.js 3

v-on="{'show.bs.offcanvas': eventHandlerFunction }"