CODEWITHSUNDEEP
typescriptvisual-studio-codevuejs3volar
CBen
CBen

Reputation: 13

How to add IntrinsicElements in Vue3 with Typescript?

I want to add a web component defination so that I can see the defination in vscode with volar. But I try a lot of ways and still not work. How can I do this?

import type { HTMLAttributes } from 'vue';

// not work
declare global {
    namespace JSX {
        interface IntrinsicElements {
            myelement: HTMLAttributes;
        }
    }
}

// add "export" not work
declare global {
    export namespace JSX {
        export interface IntrinsicElements {
            myelement: HTMLAttributes;
        }
    }
}

// without global not work
export namespace JSX {
    export interface IntrinsicElements {
        myelement: HTMLAttributes;
    }
}

if i use GlobalComponents, props is ok, but event still not work

declare module '@vue/runtime-core' {
    export interface GlobalComponents {
        myelement: HTMLAttributes;
    }
}

Upvotes: 0

Views: 365

Answers (2)

V. Rubinetti
V. Rubinetti

Reputation: 1776

Not sure if this will help OP, but I needed to do something similar and this worked for me:

declare module "vue" {
  export interface GlobalComponents {
    "some-component": DefineComponent<SomeProps>;
  }
}

More specifically I was trying to assign some already known props from a third-party library to a custom tag name, so for SomeProps I actually used InstanceType<typeof ThirdPartyComponent>["$props"].

Upvotes: 0

Nijat Aliyev
Nijat Aliyev

Reputation: 904

Example code maybe helpful

import { defineComponent, h } from 'vue'

type IntrinsicElements = {
  [elem: string]: any;
}

const MyComponent = defineComponent({
  setup() {
    return () => {
      return (
        <div>
          <h1>My Component</h1>
        </div>
      )
    }
  }
})

Upvotes: 0

Related Questions