Property 'dataToggle' does not exist on type 'ElementAttrs<AnchorHTMLAttributes>' vue3 and typescript

Question

Issue

I am attempting to use a bootstrap4 snippet to create nav bar menu in my vue 3 application -

      <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, I am getting the following error from the compiler -

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)

The drop down menu doesnt not work as a result...why is this?

EDIT shims-vue.d.ts file -

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Answer 1

Create new bs.d.ts with content

import "vue";

declare module "vue" {
  interface HTMLAttributes {
    dataToggle?: string;
  }
}

and it to "include" in your tsconfig.json .

---

Original answer: How to augment `ElementAttrs<HTMLAttributes>` interface in Vue?

Answer 2

Try out to add the following declaration in shims-vue.d.ts

declare module "@vue/runtime-dom" {
  interface bootstrapAttrs extends HTMLAttributes {
    datatToggle?: string
  }
}
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}