Query
In my vue 3 application, I am facing an issue while trying to implement a bootstrap4 snippet for creating a nav bar menu -
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
However, the compiler is throwing the following error message -
Type '{ class: string; href: string; id: string; role: string; dataToggle: string; "data-toggle": string; ariaHaspopup: string; "aria-haspopup": "true"; ariaExpanded: string; "aria-expanded": "false"; }' is not assignable to type 'ElementAttrs'. Property 'dataToggle' does not exist on type 'ElementAttrs'.ts(2322)
Due to this error, the dropdown menu is not functioning properly...what could be causing this issue?
UPDATE Content of shims-vue.d.ts file -
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}