What is the proper way to define props for a component to match those of an "img" element in TypeScript using Vue?

Is there a way to implement type inference for a component that passes all its props to an img element?

I attempted the following methods:

defineProps<ImgHTMLAttributes>()
// and
defineProps<HTMLImageElement>()

However, both resulted in the error message:

[plugin:vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

This is how my component looks like:

<script setup lang="ts">
import type { ImgHTMLAttributes }  from 'vue'

defineProps<ImgHTMLAttributes>()
// or defineProps<HTMLImageElement>()


</script>

<template>
  <div>
    // Some other elements here
    <img
      v-bind="$attrs"
    />
  </div>
</template>

Answer №1

It appears that this may not be exactly what you're looking for, but here is the method for indicating how you anticipate receiving a property in a customized component:

interface Props {
  exampleProp?: string;
}

const props = withDefaults(defineProps<Props>(), {
  exampleProp: undefined,
});

Answer №2

Ensure that your vue version is at least 3.3. (https://github.com/vuejs/core/pull/8083)

Alternatively, you can attempt the following:

<script setup lang="ts">
import type { ImgHTMLAttributes }  from 'vue'

interface IProps extends ImgHTMLAttributes {

}

defineProps<IProps>()


</script>

<template>
  <div>
    // Other elements go here
    <img
      v-bind="$attrs"
    />
  </div>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Vuex to modify information in the database

I've been facing some challenges while trying to incorporate an EDIT_DETAILS feature in vuex. Although I can achieve this without using vuex, I'd rather utilize vuex as a means to enhance my skills in it. Here are the code snippets that I am cur ...

Exploring the concept of rest arrays within a destructured object

Is there a way to declare c as an optional array of any type in this code snippet? const a = ({ b, ...c }: { b: string, c: ? }) => null ...

What is the best way to initiate a dialogue (updating component state) using Vue Router?

I am looking to enhance page state management using vue router. For instance: / should navigate to the home page. /login will keep the user on the home page while triggering a dialog with the login form. /register will also trigger the dialog, but this t ...

Tips for passing props in Vue 3 and Vue Router 4 when utilizing router-view exclusively for a particular component

My routing and props are functioning properly, but I am facing an issue where the msg prop is being sent to every component loaded by the router. Is there a workaround for this situation? In App.vue, which serves as my base component, I have: <templat ...

Exploring the effectiveness of utilizing Vue and Vuex for storing data within a filter component

Trying to get the hang of Vue and struggling with some basic concepts. Currently, I have a Vuex-based store where I fetch the USDEUR currency rate from an API every 15 seconds. Within my component, I have a fixed price in dollars that needs to be replaced ...

How come I am able to use array.some() but not array.every() when working with union array types?

Imagine a scenario where there is a (silly) function like this: function doSomething(input: number|string): boolean { if (input === 42 || input === '42') { return true; } else { return false; } } Question arises as to why array.som ...

Exploring the money library in typescript after successfully installing it on my local machine

I've been struggling to set up a new library in my TypeScript project for the first time, and I can't seem to get it functioning properly. The library in question is money. I have downloaded it and placed it in the root of my project as instructe ...

Typescript enhances Solid JS by using the "as" prop and the "component" prop

Hey there, I've been experimenting with solid-js lately and I'm facing a challenge integrating it with typescript. My objective is to make my styling more modular by incorporating it within my components. type RelevantTags = Exclude<keyof ...

Utilizing computed properties to implement table filtering in Vue.js

I am currently working on a table generated from an array of objects in VuE.js and struggling with implementing computed properties for filtering. I need help figuring out the correct way to use filter() within my computed properties to filter the table ba ...

Vue.js is updating state, yet the view remains static and does not re-render

My experience with learning Vue.js has been great, but I keep encountering a problem where setting a data property based on state doesn't update the component when the state changes. For instance... Check out these code snippets <router-link v-i ...

What is the reason for Object.keys not returning a keyof type in TypeScript?

Wondering why Object.keys(x) in TypeScript doesn't return the type Array<keyof typeof x>? It seems like a missed opportunity as Object.keys outputs that by default. Should I report this on their GitHub repo, or should I just submit a pull reques ...

The JSX component cannot use 'Router' as a valid element

Error Message The error message states that 'Router' cannot be used as a JSX component because its return type 'void' is not a valid JSX element. TS2786 import App from './App'; 5 | > 6 | ReactDOM.render(<Router ...

The proper way to cancel useEffect's Async in TypeScript

I'm facing an issue with this straightforward example: useEffect(() => { axios.get(...).then(...).catch(...) }, [props.foo]) warning: can't perform a react state update on an unmounted component After some investigation, I found this ...

Can one inherit under specific conditions?

I have just started exploring the OOP paradigm and I am curious to know if it is possible to have conditional inheritance in TypeScript. This would help avoid repeating code. Here is what I have in mind. Any suggestions or recommendations are greatly appre ...

Developing interfaces for complex data structures in Angular and TypeScript使 can greatly improve code readability and

Lately, I've been investing a significant amount of time attempting to apply interfaces to the JSON response received from the API. Surprisingly, it works perfectly fine in the browser after compilation, but my IDE, VS Code, keeps throwing this error ...

Vue fails to properly watch object properties that are set within a for loop

During a for-loop, I am attempting to set an object property and monitor those changes. However, Vue seems to be ignoring some of the changes made to the watched property. To better illustrate my problem, here is a simple test code (https://jsfiddle.net/h ...

Angular - Dividing Values within Input Arrays

In the input field available to users, they can enter multiple inputs separated by commas. <div class="container"> Enter your values:<input type="text" multiple #inputCheck> <input type="submit"(cli ...

Dealing with a situation where different functions need to be called based on a condition while using unique button names. This is

<button type="button" class="btn btn-primary ms-4" (click)="update()">Save</button> <button type="button" class="btn btn-primary ms-4" (click)="create()">Add</button> B ...

How to Modify React Components Without Changing the Original Source Code

I'm eager to experiment with my current component by transforming it through an overrides template. Learn more: While attempting to write the getComponents function, I encountered issues with typescript recognizing the return types accurately. How c ...

Customizing MUI V5 Variants

I'm having trouble customizing the variant options in MUIPaper, and I can't figure out what mistake I'm making. The available types for the component are: variant?: OverridableStringUnion<'elevation' | 'outlined', Pape ...