Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Vue - Composing Components

Download to read offline

Meetup Talk by Vanessa Böhner about Vue - Composing Components

Related Books

Free with a 30 day trial from Scribd

See all

Vue - Composing Components

  1. 1. Vue - Composing Components Vue Composing Components | @vannsl
  2. 2. Vue Composing Components | @vannsl github.com/myposter-de/vue-composing-components
  3. 3. Vue Composing Components | @vannsl Let me tell you a story…
  4. 4. Vue Composing Components | @vannsl Let me tell you a story… …about CTA Buttons
  5. 5. Vue Composing Components | @vannsl
  6. 6. Vue Composing Components | @vannsl
  7. 7. Vue Composing Components | @vannsl
  8. 8. Vue Composing Components | @vannsl
  9. 9. months later… Vue Composing Components | @vannsl
  10. 10. Relaunch / Redesign Vue Composing Components | @vannsl
  11. 11. Vue Composing Components | @vannsl
  12. 12. Component CTA.vue Vue Composing Components | @vannsl
  13. 13. Vue Composing Components | @vannsl CTA.vue - template
  14. 14. Vue Composing Components | @vannsl CTA.vue - script
  15. 15. Vue Composing Components | @vannsl Parent component
  16. 16. Vue Composing Components | @vannsl one week later…
  17. 17. Vue Composing Components | @vannsl one week later…
  18. 18. Vue Composing Components | @vannsl 🤔 CTA.vue
  19. 19. Vue Composing Components | @vannsl CTA.vue CTAGhost.vue 😁
  20. 20. Vue Composing Components | @vannsl
  21. 21. DRY 😭 Vue Composing Components | @vannsl
  22. 22. Vue Composing Components | @vannsl
  23. 23. Vue Composing Components | @vannsl LIVE DEMO Oh no, oh no, oh no….
  24. 24. Code Reusability Vue Composing Components | @vannsl
  25. 25. Tools: Extend Mixins (Scoped) Slots Vue Composing Components | @vannsl
  26. 26. Vue Extend 😐 Vue Composing Components | @vannsl
  27. 27. Vue Composing Components | @vannsl DON’T do this Extend
  28. 28. Vue Composing Components | @vannsl
  29. 29. Vue Mixins 😍 Vue Composing Components | @vannsl
  30. 30. Vue Composing Components | @vannsl Mixin - cta-mixin.vue
  31. 31. Vue Composing Components | @vannsl Mixin - Cta.vue
  32. 32. Mixins - Merging & Overlapping Vue Composing Components | @vannsl
  33. 33. Vue Composing Components | @vannsl Box with CTA.vue Component Box with CTAGhost.vue Component
  34. 34. Box.vue BoxGhost.vue Vue Composing Components | @vannsl
  35. 35. DRY 😭 Vue Composing Components | @vannsl
  36. 36. Vue Slots 😍 Vue Composing Components | @vannsl
  37. 37. Vue Composing Components | @vannsl Child: Box.vue
  38. 38. Vue Composing Components | @vannsl Parent: MixinSlotWrapper.vue
  39. 39. Vue Composing Components | @vannsl Parent: MixinSlotWrapper.vue Child: Box.vue
  40. 40. Slots • Named Slots Vue Composing Components | @vannsl
  41. 41. Slots • Named Slots • Default Content Vue Composing Components | @vannsl
  42. 42. Next time: Renderless Components via Vue Scoped Slots 😍😍😍 Vue Composing Components | @vannsl
  43. 43. More Tools: Directives Plugins Filter Vue Composing Components | @vannsl
  44. 44. Thanks 🙏 Vue Composing Components | @vannsl
  45. 45. Renderless Components via Vue Scoped Slots 😍😍😍 Vue Composing Components | @vannsl
  46. 46. Vue Composing Components | @vannsl Child: Todos.vue Parent
  47. 47. Vue Composing Components | @vannsl Child: RenderlessTodos.vue Parent
  • CamilloAngelozzi

    Aug. 4, 2018

Meetup Talk by Vanessa Böhner about Vue - Composing Components

Views

Total views

579

On Slideshare

0

From embeds

0

Number of embeds

289

Actions

Downloads

8

Shares

0

Comments

0

Likes

1

×