Vue - Composing Components

•

2 j'aime•720 vues

myposter GmbH

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

Technologie

Vue - Composing Components
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
github.com/myposter-de/vue-composing-components

Vue Composing Components | @vannsl
Let me tell you a story…

Vue Composing Components | @vannsl
Let me tell you a story…
…about CTA Buttons

months later…
Vue Composing Components | @vannsl

Relaunch / Redesign
Vue Composing Components | @vannsl

Component CTA.vue
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
CTA.vue - template

Vue Composing Components | @vannsl
CTA.vue - script

Vue Composing Components | @vannsl
Parent component

Vue Composing Components | @vannsl
one week later…

Vue Composing Components | @vannsl
🤔
CTA.vue

Vue Composing Components | @vannsl
CTA.vue
CTAGhost.vue
😁

DRY
😭
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
LIVE DEMO
Oh no, oh no, oh no….

Code
Reusability
Vue Composing Components | @vannsl

Tools:
Extend
Mixins
(Scoped) Slots
Vue Composing Components | @vannsl

Vue Extend
😐
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
DON’T do this
Extend

Vue Mixins
😍
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
Mixin - cta-mixin.vue

Vue Composing Components | @vannsl
Mixin - Cta.vue

Mixins - Merging & Overlapping
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
Box with CTA.vue Component Box with CTAGhost.vue Component

Box.vue BoxGhost.vue
Vue Composing Components | @vannsl

Vue Slots
😍
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
Child: Box.vue

Vue Composing Components | @vannsl
Parent: MixinSlotWrapper.vue

Vue Composing Components | @vannsl
Parent: MixinSlotWrapper.vue Child: Box.vue

Slots
• Named Slots
Vue Composing Components | @vannsl

Slots
• Named Slots

• Default Content
Vue Composing Components | @vannsl

Next time:
Renderless Components via
Vue Scoped Slots
😍😍😍
Vue Composing Components | @vannsl

More Tools:
Directives
Plugins
Filter
Vue Composing Components | @vannsl

Thanks 🙏
Vue Composing Components | @vannsl

Renderless Components via
Vue Scoped Slots
😍😍😍
Vue Composing Components | @vannsl

Vue Composing Components | @vannsl
Child: Todos.vue Parent

Vue Composing Components | @vannsl
Child: RenderlessTodos.vue Parent

Recommandé

Vue - State Transitionsmyposter GmbH

Vue.js Component ToolsVanessa Böhner

Pain Free Frontend DevelopmentVanessa Böhner

Creating BananaJS with Angular 2, Angular CLI, and Material DesignTracy Lee

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesTracy Lee

A Tale of 3 CLIs - Angular 2, Ember, and ReactTracy Lee

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee

Recommandé

Vue - State Transitionsmyposter GmbH

Vue.js Component ToolsVanessa Böhner

Pain Free Frontend DevelopmentVanessa Böhner

Creating BananaJS with Angular 2, Angular CLI, and Material DesignTracy Lee

Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesTracy Lee

A Tale of 3 CLIs - Angular 2, Ember, and ReactTracy Lee

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

RxJS: A Beginner & Expert's Perspective - ng-conf 2017Tracy Lee

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSébastien Levert

SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

A Practical Approach to React Native at All Things Open ConferenceTracy Lee

Novidades Angular 4.x e CLI Loiane Groner

Techical Workflow for a StartupSébastien Saunier

The Power of RxJS in Nativescript + AngularTracy Lee

North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...Sébastien Levert

Demystifying Web PerformanceAtlassian

Multilingual Vue Apps without a pluginKatia Smet

Building a Headless ShopPascalKaufmann

SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...Sébastien Levert

Fast Track introduction to ASP.NET MVCAnkit Kashyap

Working with APIs as a no-coder - No Code Conf 2019 Demo TheaterWebflow

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

Finding the sweet spot - blending the best of native and webShawn Jansepar

SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSébastien Levert

Prerendering with NokogiriAlyss Noland

Agile project management with green hopper 6 blueprintsJaibeer Malik

Ember.js - Harnessing Convention Over ConfigurationTracy Lee

Angular js full stack developmentDarius Riggins

Java spring mysql without hibernate(2) (1)AmedJacobReza

SPA Flask VueVanessa Böhner

Contenu connexe

Tendances

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSébastien Levert

SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

A Practical Approach to React Native at All Things Open ConferenceTracy Lee

Novidades Angular 4.x e CLI Loiane Groner

Techical Workflow for a StartupSébastien Saunier

The Power of RxJS in Nativescript + AngularTracy Lee

North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...Sébastien Levert

Demystifying Web PerformanceAtlassian

Multilingual Vue Apps without a pluginKatia Smet

Building a Headless ShopPascalKaufmann

SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...Sébastien Levert

Fast Track introduction to ASP.NET MVCAnkit Kashyap

Working with APIs as a no-coder - No Code Conf 2019 Demo TheaterWebflow

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

Finding the sweet spot - blending the best of native and webShawn Jansepar

SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSébastien Levert

Prerendering with NokogiriAlyss Noland

Agile project management with green hopper 6 blueprintsJaibeer Malik

Ember.js - Harnessing Convention Over ConfigurationTracy Lee

Angular js full stack developmentDarius Riggins

Tendances (20)

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions

SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...

A Practical Approach to React Native at All Things Open Conference

Novidades Angular 4.x e CLI

Techical Workflow for a Startup

The Power of RxJS in Nativescript + Angular

North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...

Demystifying Web Performance

Multilingual Vue Apps without a plugin

Building a Headless Shop

SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...

Fast Track introduction to ASP.NET MVC

Working with APIs as a no-coder - No Code Conf 2019 Demo Theater

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...

Finding the sweet spot - blending the best of native and web

SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions

Prerendering with Nokogiri

Agile project management with green hopper 6 blueprints

Ember.js - Harnessing Convention Over Configuration

Angular js full stack development

Similaire à Vue - Composing Components

Java spring mysql without hibernate(2) (1)AmedJacobReza

SPA Flask VueVanessa Böhner

VueJS Best PracticesFatih Acet

ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...Gavin Pickin

How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon

ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...Ortus Solutions, Corp

Nuxtjs cheat-sheetValeriaCastillo71

Vuejs for Angular developersMikhail Kuznetcov

Rails enginesJosh Schramm

Migrating from AngularJS when you can't use the word "Big Bang@Asim Hussain

Vue+railsRabin Gaire

Web driver selenium simplifiedVikas Singh

SharePoint 2010 Training Session 5Usman Zafar Malik

Deploying & operating microservicesThoughtworks

WordPress-like plugins for Next.js - Sanket SahuKumar Sanket

Getting started with #NoestimatesScrum Breakfast Vietnam

Level up apps and websites with vue.jsVioletta Villani

Level up apps and websites with vue.jsCommit University

Angular 7 Firebase5 CRUD Operations with Reactive FormsDigamber Singh

JS Fest 2019. Minko Gechev. Building Fast Angular Applications by DefaultJSFestUA

Similaire à Vue - Composing Components (20)

Java spring mysql without hibernate(2) (1)

SPA Flask Vue

VueJS Best Practices

ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...

How to Build ToDo App with Vue 3 + TypeScript

ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...

Nuxtjs cheat-sheet

Vuejs for Angular developers

Rails engines

Migrating from AngularJS when you can't use the word "Big Bang@

Vue+rails

Web driver selenium simplified

SharePoint 2010 Training Session 5

Deploying & operating microservices

WordPress-like plugins for Next.js - Sanket Sahu

Getting started with #Noestimates

Level up apps and websites with vue.js

Angular 7 Firebase5 CRUD Operations with Reactive Forms

JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default

Plus de myposter GmbH

Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @mypostermyposter GmbH

Clean(er) Code - Tech'n'Drinks @mypostermyposter GmbH

ReRxSwiftmyposter GmbH

Vue - the Progressive Frameworkmyposter GmbH

Microservices - Do one thing wellmyposter GmbH

Optimising Image Loadingmyposter GmbH

Warum Affen die besseren Softwaretester sindmyposter GmbH

Reactive xmyposter GmbH

How Browsers Work myposter GmbH

Plus de myposter GmbH (9)

Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter

Clean(er) Code - Tech'n'Drinks @myposter

ReRxSwift

Vue - the Progressive Framework

Microservices - Do one thing well

Optimising Image Loading

Warum Affen die besseren Softwaretester sind

Reactive x

How Browsers Work

Dernier

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays

Architecting Cloud Native ApplicationsWSO2

DBX First Quarter 2024 Investor PresentationDropbox

A Year of the Servo Reboot: Where Are We Now?Igalia

MS Copilot expands with MS Graph connectorsNanddeep Nachan

Ransomware_Q4_2023. The report. [EN].pdfOverkill Security

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software

Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...apidays

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWERMadyBayot

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10

Why Teams call analytics are critical to your entire businesspanagenda

FWD Group - Insurer Innovation Award 2024The Digital Insurer

TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@

2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz

Dernier (20)

Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe

Architecting Cloud Native Applications

DBX First Quarter 2024 Investor Presentation

A Year of the Servo Reboot: Where Are We Now?

MS Copilot expands with MS Graph connectors

Ransomware_Q4_2023. The report. [EN].pdf

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME

Data Cloud, More than a CDP by Matt Robison

Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...

EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...

Why Teams call analytics are critical to your entire business

FWD Group - Insurer Innovation Award 2024

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...

2024: Domino Containers - The Next Step. News from the Domino Container commu...

"I see eyes in my soup": How Delivery Hero implemented the safety system for ...

Vue - Composing Components

1. Vue - Composing Components Vue Composing Components | @vannsl

2. Vue Composing Components | @vannsl github.com/myposter-de/vue-composing-components

3. Vue Composing Components | @vannsl Let me tell you a story…

4. Vue Composing Components | @vannsl Let me tell you a story… …about CTA Buttons

5. Vue Composing Components | @vannsl

6. Vue Composing Components | @vannsl

7. Vue Composing Components | @vannsl

8. Vue Composing Components | @vannsl

9. months later… Vue Composing Components | @vannsl

10. Relaunch / Redesign Vue Composing Components | @vannsl

11. Vue Composing Components | @vannsl

12. Component CTA.vue Vue Composing Components | @vannsl

13. Vue Composing Components | @vannsl CTA.vue - template

14. Vue Composing Components | @vannsl CTA.vue - script

15. Vue Composing Components | @vannsl Parent component

16. Vue Composing Components | @vannsl one week later…

17. Vue Composing Components | @vannsl one week later…

18. Vue Composing Components | @vannsl 🤔 CTA.vue

19. Vue Composing Components | @vannsl CTA.vue CTAGhost.vue 😁

20. Vue Composing Components | @vannsl

21. DRY 😭 Vue Composing Components | @vannsl

22. Vue Composing Components | @vannsl

23. Vue Composing Components | @vannsl LIVE DEMO Oh no, oh no, oh no….

24. Code Reusability Vue Composing Components | @vannsl

25. Tools: Extend Mixins (Scoped) Slots Vue Composing Components | @vannsl

26. Vue Extend 😐 Vue Composing Components | @vannsl

27. Vue Composing Components | @vannsl DON’T do this Extend

28. Vue Composing Components | @vannsl

29. Vue Mixins 😍 Vue Composing Components | @vannsl

30. Vue Composing Components | @vannsl Mixin - cta-mixin.vue

31. Vue Composing Components | @vannsl Mixin - Cta.vue

32. Mixins - Merging & Overlapping Vue Composing Components | @vannsl

33. Vue Composing Components | @vannsl Box with CTA.vue Component Box with CTAGhost.vue Component

34. Box.vue BoxGhost.vue Vue Composing Components | @vannsl

35. DRY 😭 Vue Composing Components | @vannsl

36. Vue Slots 😍 Vue Composing Components | @vannsl

37. Vue Composing Components | @vannsl Child: Box.vue

38. Vue Composing Components | @vannsl Parent: MixinSlotWrapper.vue

39. Vue Composing Components | @vannsl Parent: MixinSlotWrapper.vue Child: Box.vue

40. Slots • Named Slots Vue Composing Components | @vannsl

41. Slots • Named Slots • Default Content Vue Composing Components | @vannsl

42. Next time: Renderless Components via Vue Scoped Slots 😍😍😍 Vue Composing Components | @vannsl

43. More Tools: Directives Plugins Filter Vue Composing Components | @vannsl

44. Thanks 🙏 Vue Composing Components | @vannsl

45. Renderless Components via Vue Scoped Slots 😍😍😍 Vue Composing Components | @vannsl

46. Vue Composing Components | @vannsl Child: Todos.vue Parent

47. Vue Composing Components | @vannsl Child: RenderlessTodos.vue Parent