Two core features of Vue.js are Single File Components and Declarative Rendering. Vue.js gives us flexible ways to reuse code and distribute functionalities for components. These slides will show you how we can encapsulate logic while still keeping our components customisable without having to override styles. We will use Tools like Mixins and Slots and learn why we should not extend components like one might know it from class inheritance of object oriented languages.

1. Vue.js Component Tools | @vannsl
Vue.js Component Tools

2. Vanessa Böhner
Frontend Developer, Munich
@vannsl
@vannsl
vannsl.io

3. Vue.js Component Tools | @vannsl
Core Features
• Single File Components
• Declarative Rendering

4. Vue.js Component Tools | @vannsl
CTA Button
active disabled

5. Vue.js Component Tools | @vannsl
CTA Button HTML
active disabled

6. Vue.js Component Tools | @vannsl
CTA Button CSS

7. Vue.js Component Tools | @vannsl
CTA Button JS

8. Vue.js Component Tools | @vannsl
Project structure
styles.css
index.html
script.js

9. Vue.js Component Tools | @vannsl
Project structure
styles.css
example1.html
example2.html
example3.html
example1.js
example2.js
example3.js

10. Vue.js Component Tools | @vannsl
Relaunch / Redesign

11. Vue.js Component Tools | @vannsl
+ CSS & JS changes

12. Vue.js Component Tools | @vannsl
Project structure
styles.css
example1.html
example2.html
example3.html
example1.js
example2.js
example3.js

13. Vue.js Component Tools | @vannsl
Single File
Components

14. Vue.js Component Tools | @vannsl
Single File Component
Vue.js - Single File Component

15. Vue.js Component Tools | @vannsl
SFC - Template
curly braces
v-if / v-else
v-for

16. Vue.js Component Tools | @vannsl
Declarative Rendering
Vue - Reactive Data Binding

17. Vue.js Component Tools | @vannsl
SFC - Template - Alternatives
Vue.js - Render function
Use render functions or JSX

18. Vue.js Component Tools | @vannsl
SFC - Script
imports
name
components
props
data
methods
render
…
Lifecycle Hooks:
created
mounted
updated
destroyed

19. Vue.js Component Tools | @vannsl
Component Lifecycle
The Vue Instance

20. Vue.js Component Tools | @vannsl
SFC - Style

21. Vue.js Component Tools | @vannsl
Project structure
styles.css
example1.html
example2.html
example3.html
example1.js
example2.js
example3.js
CTA.vue

22. Vue.js Component Tools | @vannsl
Small Reusable Components
Vue - Composing with Components
Single File Components

23. Vue.js Component Tools | @vannsl
CTA.vue - Template

24. Vue.js Component Tools | @vannsl
CTA.vue - Script

25. Vue.js Component Tools | @vannsl
CTA.vue - Style

26. Vue.js Component Tools | @vannsl
One week after Relaunch
CTA.vue
CTAGhost.vue

27. Vue.js Component Tools | @vannsl

28. DRY
🤔
Vue Composing Components | @vannsl

29. Vue.js Component Tools | @vannsl
Code
Reusability

30. Vue.js Component Tools | @vannsl
Vue Extend
😐

31. Vue.js Component Tools | @vannsl
Extends

32. Vue.js Component Tools | @vannsl

33. Vue.js Component Tools | @vannsl
Vue Mixins
😍

34. Vue.js Component Tools | @vannsl
cta-mixin.js

35. Vue.js Component Tools | @vannsl
CTA.vue with cta-mixin

36. Vue.js Component Tools | @vannsl
Mixins: Merging & Overlapping
CTA.vue, using cta-mixin.js

37. Vue.js Component Tools | @vannsl
Dynamic Content in Parent
Box with CTA.vue Component Box with CTAGhost.vue Component

38. Vue.js Component Tools | @vannsl
Box.vue BoxGhost.vue

39. DRY
🤔
Vue Composing Components | @vannsl

40. Vue.js Component Tools | @vannsl
Vue Slots
😍

41. Vue.js Component Tools | @vannsl
Composing Components

42. Vue.js Component Tools | @vannsl
Box.vue

43. Vue.js Component Tools | @vannsl
Slots (Parent)

44. Vue.js Component Tools | @vannsl
Slots
• Named Slots

45. Vue.js Component Tools | @vannsl
Slots
• Named Slots• Named Slots
• Default Content

46. Vue.js Component Tools | @vannsl
Tools
Extend (nope)
Mixins (if appropriate)
Slots (yeah!)

47. Vue.js Component Tools | @vannsl
More Tools / Pattern
Filter
Plugins
Directives
*
Compound Components
Scoped Slots (Renderless Components)

48. Advanced Vue.js Component Tools | @vannsl
Thanks 🙏Thanks 🙏