Using Generics in Vue components

Skip to content

DEV Community

Powered by Algolia

Log in Create account

DEV Community

Copied to Clipboard

./types' defineProps<{ id: T list: U[] }>() </script>

Check out official documentation for more details here.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

Vue School Link

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to use Generics in Vue components.

Take care and see you next time!

And happy coding as always 🖥️

Vue (52 Part Series)

1 Better DX in Vue apps with Vite Devtools 2 Good practices and Design Patterns for Vue Composables ... 48 more parts... 3 Building accessible forms in Vue with Formkit ⚡️ 4 Using URL to store state in Vue 5 Build E-Commerce apps faster with Storefront UI 6 Building a Vue.js composable for handling Feature Flags 7 Useful Vue Utils with VueUse 8 Real-time updates in Vue apps with Polling 9 Best CMS for Vue & Nuxt = Storyblok 🚀 10 Implementing Debouncing in Vue 11 Building plugins in Vue 12 Handling internationalisation (I18N) in Vue 13 Dynamic page title and description with Vue Router 14 Using shallowRef in Vue to improve performance 15 Sharing composable state in Vue apps 16 Free weekend of Vue Certification Developer Training is coming soon! 17 Using two script blocks in Vue Single File Components 18 Implementing Prefetching in Vue apps 19 Checking if a slot is empty in Vue 20 Building Recursive components in Vue 21 Using Generics in Vue components 22 10 Tips to Write Cleaner Vue.js Code 23 Reactive vs. Ref in Vue 3: What’s the difference? 24 Christmas guide to Custom Directives in Vue 🎄 25 Top 10 Vue.js libraries you should be using in 2025 26 Testing Vue components with Vitest 27 Understanding the Vue 3 Composition API 28 Good practices for Vue Computed Properties 29 Understanding Vue’s Virtual DOM 30 How to Use Provide/Inject in Vue 31 Handling large lists efficiently in Vue 3 32 Optimizing heavy operations in Vue with Web Workers 33 How to Use Pinia for State Management in Vue 34 Building charts in Vue with D3 35 Render functions in Vue 36 Image Optimization in Vue with Unpic 37 What is `useSlots` in Vue? 38 Performant Vue applications with Vapor 39 Defining props in Vue 40 Dynamic Interfaces with Vue Directives 41 Optimized Videos in Vue with Cloudinary 42 Shadcn Vue – Elegant, Customizable UI Components for Modern Vue Apps 43 Using Vue’s Custom Renderer API to Build Interfaces Beyond the DOM 44 How to handle Async Rendering in Vue with Suspense? 45 Multiple Vue Components in a Single File with Vue Vine 46 What to Unit Test in a Vue App (And What Not to Touch) 47 Config-driven Vue Interfaces with Dynamic Components 48 Accessibility in Vue: Quick Tips for Building Inclusive Apps 49 Lesser-Known but Powerful Vue Features 50 How Vue Protects Your App Against Injections 51 When You Should Use Vue Teleport 52 State-Driven Animations in Vue: Create Smooth UI Transitions with Reactive State

Top comments (0)

Subscribe

pic

Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Code of Conduct • Report abuse

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Jakub Andrzejewski

Senior Fullstack Developer & Advocate • @GoogleDevExpert in Web Performance • @nuxt_js Team • Ambassador @Storyblok, @algolia, @cloudinary, @supabase • Teaching Vue | Nuxt | Perf