Awesome Vue Slots
An awesome list of components and resources for vue slots.
Note: This is this is heavily inspired by awesome-react-render-props by Jared Palmer. Thanks Jared!
PRs welcome!
What are slots?
Vue supports slots, which provide a way distribute content between components. They're an outstanding way to make your components truly reusable.
📚 Read the documentation for motivation and overview!
What are scoped slots? 🔬
As of Vue version 2.1.0, scoped slots extend the capability of slots. One can now pass a template to a slot; the template is rendered in the parent scope, but it has access to child data.
This is a more advanced pattern, but that doesn't mean you can't learn them!
Note: We'll use a 🔬 to indicate items that have to do with scoped slot
Here's some material to help motivate scoped slots:
- 📚 Scoped Slots Documentation
- 🐦 Scoped slots are vue's version of render props.
- 🎤 Full Stack Radio: Evan You - Advanced Vue Component Design
Videos 📺
- Named Slots in a Nutshell by Laracasts
- 💵 Place Content in Components with Vue Slots by John Lindquist
- 💵 Create Layouts with Named Vue Slots by John Lindquist
- 🔬 Scoped Slots by Laracasts
- 🔬 💵 Pass Props Between Components with Vue Slot Scope by John Lindquist
Articles 📘
- Intro to Vue.js: Components, Props, and Slots by Sarah Drasner
- Creating Reusable Transitions in Vue by Cristi Jora
- 🔬 Getting Your Head Around Vue.js Scoped Slots by Anthony Gore
- 🔬 Understanding Scoped Slots in Vue.js by Cristi Jora
Examples 💻
- 🔬 Getting Your Head Around Vue.js Scoped Slots by Anthony Gore
- 🔬 Mouse Position Example by Darren Jennings