--- title: Vue "as" Prop using TypeScript | daily.dev description: A practical guide on implementing the 'as' prop pattern in Vue Single File Components with TypeScript support. Covers using Vue's `` API to... canonical: https://daily.dev/posts/vue-as-prop-using-typescript-fb78db6aa twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Vue "as" Prop using TypeScript | daily.dev og:description: A practical guide on implementing the 'as' prop pattern in Vue Single File Components with TypeScript support. Covers using Vue's `` API to... og:url: https://daily.dev/posts/vue-as-prop-using-typescript-fb78db6aa og:image: https://api.daily.dev/og/posts/fB78Db6aa.png og:image:alt: Vue "as" Prop using TypeScript og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Vue "as" Prop using TypeScript **[Playful Programming](https://daily.dev/sources/playfulprogramming)** · [@crutchcorn](https://daily.dev/crutchcorn) · 3 min read · 0 upvotes · 0 comments ## Summary A practical guide on implementing the 'as' prop pattern in Vue Single File Components with TypeScript support. Covers using Vue's `` API to dynamically render different HTML tags, passing props with `v-bind`, and leveraging TypeScript generics with `HTMLElementTagNameMap` to enforce type-safe props based on the chosen tag. Also notes a current bug in Vue's language service affecting this pattern. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Typed Polymorphic React Component](https://daily.dev/posts/typed-polymorphic-react-component-qwqrzo59w) · Kitty says hi. · 68 upvotes · 1 comments - [Vue Example](https://daily.dev/posts/vue-example-l5blxbacm) · Larablog · 0 upvotes · 0 comments - [React for Vue Developers, 1: Components, Props, Mental Reset](https://daily.dev/posts/react-for-vue-developers-1-components-props-mental-reset-hvn1ca7um) · Telerik · 6 upvotes · 0 comments - [Beyond the basics: 21 TypeScript features you might not know about](https://daily.dev/posts/beyond-the-basics-21-typescript-features-you-might-not-know-about-oivxxtrie) · DEV · 27 upvotes · 0 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#typescript](https://daily.dev/tags/typescript), [#vuejs](https://daily.dev/tags/vuejs) [View this post on daily.dev](https://daily.dev/posts/vue-as-prop-using-typescript-fb78db6aa) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Vue \"as\" Prop using TypeScript","url":"https://daily.dev/posts/vue-as-prop-using-typescript-fb78db6aa","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/vue-as-prop-using-typescript-fb78db6aa"},"datePublished":"2026-03-16T21:48:31.126Z","dateModified":"2026-03-17T18:01:34.019Z","description":"A practical guide on implementing the 'as' prop pattern in Vue Single File Components with TypeScript support. Covers using Vue's `` API to...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4069c3b109057f6d7065a366eac60269?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/4069c3b109057f6d7065a366eac60269?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Playful Programming","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Corbin Crutchley","url":"https://daily.dev/crutchcorn","image":"https://avatars.githubusercontent.com/u/9100169?v=4","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":400}},"commentCount":0,"discussionUrl":"https://daily.dev/posts/vue-as-prop-using-typescript-fb78db6aa","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"webdev,typescript,vuejs","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Playful Programming","item":"https://daily.dev/sources/playfulprogramming"},{"@type":"ListItem","position":3,"name":"Vue \"as\" Prop using TypeScript"}]} ```