Vue - Composing Components

myposter GmbH
myposter GmbHmyposter GmbH
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
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
Vue Composing Components | @vannsl
months later…
Vue Composing Components | @vannsl
Relaunch / Redesign
Vue Composing Components | @vannsl
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
one week later…
Vue Composing Components | @vannsl
🤔
CTA.vue
Vue Composing Components | @vannsl
CTA.vue
CTAGhost.vue
😁
Vue Composing Components | @vannsl
DRY
😭
Vue Composing Components | @vannsl
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 Composing Components | @vannsl
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
DRY
😭
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
1 of 47

Recommended

Vue - State Transitions by
Vue - State TransitionsVue - State Transitions
Vue - State Transitionsmyposter GmbH
1.1K views49 slides
Vue.js Component Tools by
Vue.js Component ToolsVue.js Component Tools
Vue.js Component ToolsVanessa Böhner
392 views48 slides
Pain Free Frontend Development by
Pain Free Frontend DevelopmentPain Free Frontend Development
Pain Free Frontend DevelopmentVanessa Böhner
181 views30 slides
Creating BananaJS with Angular 2, Angular CLI, and Material Design by
Creating BananaJS with Angular 2, Angular CLI, and Material DesignCreating BananaJS with Angular 2, Angular CLI, and Material Design
Creating BananaJS with Angular 2, Angular CLI, and Material DesignTracy Lee
538 views31 slides
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes by
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesUsing Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 Minutes
Using Angular-CLI to Deploy an Angular 2 App Using Firebase in 30 MinutesTracy Lee
857 views44 slides
A Tale of 3 CLIs - Angular 2, Ember, and React by
A Tale of 3 CLIs - Angular 2, Ember, and ReactA Tale of 3 CLIs - Angular 2, Ember, and React
A Tale of 3 CLIs - Angular 2, Ember, and ReactTracy Lee
810 views52 slides

More Related Content

What's hot

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions by
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSébastien Levert
44 views23 slides
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct... by
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...Sébastien Levert
97 views23 slides
A Practical Approach to React Native at All Things Open Conference by
A Practical Approach to React Native at All Things Open ConferenceA Practical Approach to React Native at All Things Open Conference
A Practical Approach to React Native at All Things Open ConferenceTracy Lee
480 views67 slides
Novidades Angular 4.x e CLI by
Novidades Angular 4.x e CLI Novidades Angular 4.x e CLI
Novidades Angular 4.x e CLI Loiane Groner
720 views26 slides
Techical Workflow for a Startup by
Techical Workflow for a StartupTechical Workflow for a Startup
Techical Workflow for a StartupSébastien Saunier
8.3K views63 slides
The Power of RxJS in Nativescript + Angular by
The Power of RxJS in Nativescript + AngularThe Power of RxJS in Nativescript + Angular
The Power of RxJS in Nativescript + AngularTracy Lee
1.9K views66 slides

What's hot(20)

SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions by Sébastien Levert
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure FunctionsSharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Fest Chicago 2017 - SharePoint Framework, Angular & Azure Functions
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct... by Sébastien Levert
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
A Practical Approach to React Native at All Things Open Conference by Tracy Lee
A Practical Approach to React Native at All Things Open ConferenceA Practical Approach to React Native at All Things Open Conference
A Practical Approach to React Native at All Things Open Conference
Tracy Lee480 views
Novidades Angular 4.x e CLI by Loiane Groner
Novidades Angular 4.x e CLI Novidades Angular 4.x e CLI
Novidades Angular 4.x e CLI
Loiane Groner720 views
The Power of RxJS in Nativescript + Angular by Tracy Lee
The Power of RxJS in Nativescript + AngularThe Power of RxJS in Nativescript + Angular
The Power of RxJS in Nativescript + Angular
Tracy Lee1.9K views
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az... by Sébastien Levert
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
Sébastien Levert100 views
Demystifying Web Performance by Atlassian
Demystifying Web PerformanceDemystifying Web Performance
Demystifying Web Performance
Atlassian1K views
Multilingual Vue Apps without a plugin by Katia Smet
Multilingual Vue Apps without a pluginMultilingual Vue Apps without a plugin
Multilingual Vue Apps without a plugin
Katia Smet230 views
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct... by Sébastien Levert
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
Sébastien Levert123 views
Fast Track introduction to ASP.NET MVC by Ankit Kashyap
Fast Track introduction to ASP.NET MVCFast Track introduction to ASP.NET MVC
Fast Track introduction to ASP.NET MVC
Ankit Kashyap937 views
Working with APIs as a no-coder - No Code Conf 2019 Demo Theater by Webflow
Working with APIs as a no-coder - No Code Conf 2019 Demo TheaterWorking with APIs as a no-coder - No Code Conf 2019 Demo Theater
Working with APIs as a no-coder - No Code Conf 2019 Demo Theater
Webflow403 views
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct... by Sébastien Levert
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
Sébastien Levert821 views
Finding the sweet spot - blending the best of native and web by Shawn Jansepar
Finding the sweet spot - blending the best of native and webFinding the sweet spot - blending the best of native and web
Finding the sweet spot - blending the best of native and web
Shawn Jansepar2.9K views
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions by Sébastien Levert
SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
Sébastien Levert197 views
Prerendering with Nokogiri by Alyss Noland
Prerendering with NokogiriPrerendering with Nokogiri
Prerendering with Nokogiri
Alyss Noland256 views
Agile project management with green hopper 6 blueprints by Jaibeer Malik
Agile project management with green hopper 6 blueprintsAgile project management with green hopper 6 blueprints
Agile project management with green hopper 6 blueprints
Jaibeer Malik3K views
Ember.js - Harnessing Convention Over Configuration by Tracy Lee
Ember.js - Harnessing Convention Over ConfigurationEmber.js - Harnessing Convention Over Configuration
Ember.js - Harnessing Convention Over Configuration
Tracy Lee408 views
Angular js full stack development by Darius Riggins
Angular js   full stack developmentAngular js   full stack development
Angular js full stack development
Darius Riggins3.4K views

Similar to Vue - Composing Components

Java spring mysql without hibernate(2) (1) by
Java spring mysql without hibernate(2) (1)Java spring mysql without hibernate(2) (1)
Java spring mysql without hibernate(2) (1)AmedJacobReza
92 views39 slides
SPA Flask Vue by
SPA Flask VueSPA Flask Vue
SPA Flask VueVanessa Böhner
696 views30 slides
VueJS Best Practices by
VueJS Best PracticesVueJS Best Practices
VueJS Best PracticesFatih Acet
3.5K views58 slides
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod... by
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...Gavin Pickin
252 views60 slides
How to Build ToDo App with Vue 3 + TypeScript by
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScriptKaty Slemon
407 views56 slides
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V... by
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...Ortus Solutions, Corp
603 views60 slides

Similar to Vue - Composing Components(20)

Java spring mysql without hibernate(2) (1) by AmedJacobReza
Java spring mysql without hibernate(2) (1)Java spring mysql without hibernate(2) (1)
Java spring mysql without hibernate(2) (1)
AmedJacobReza92 views
VueJS Best Practices by Fatih Acet
VueJS Best PracticesVueJS Best Practices
VueJS Best Practices
Fatih Acet3.5K views
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod... by Gavin Pickin
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 VueJS cod...
Gavin Pickin252 views
How to Build ToDo App with Vue 3 + TypeScript by Katy Slemon
How to Build ToDo App with Vue 3 + TypeScriptHow to Build ToDo App with Vue 3 + TypeScript
How to Build ToDo App with Vue 3 + TypeScript
Katy Slemon407 views
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V... by Ortus Solutions, Corp
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
ITB2019 ColdBox APIs + VueJS - powering Mobile, Desktop and Web Apps with 1 V...
Migrating from AngularJS when you can't use the word "Big Bang@ by Asim Hussain
Migrating from AngularJS when you can't use the word "Big Bang@Migrating from AngularJS when you can't use the word "Big Bang@
Migrating from AngularJS when you can't use the word "Big Bang@
Asim Hussain2.2K views
Web driver selenium simplified by Vikas Singh
Web driver selenium simplifiedWeb driver selenium simplified
Web driver selenium simplified
Vikas Singh574 views
Deploying & operating microservices by Thoughtworks
Deploying & operating microservicesDeploying & operating microservices
Deploying & operating microservices
Thoughtworks1.3K views
WordPress-like plugins for Next.js - Sanket Sahu by Kumar Sanket
WordPress-like plugins for Next.js - Sanket SahuWordPress-like plugins for Next.js - Sanket Sahu
WordPress-like plugins for Next.js - Sanket Sahu
Kumar Sanket75 views
Angular 7 Firebase5 CRUD Operations with Reactive Forms by Digamber Singh
Angular 7 Firebase5 CRUD Operations with Reactive FormsAngular 7 Firebase5 CRUD Operations with Reactive Forms
Angular 7 Firebase5 CRUD Operations with Reactive Forms
Digamber Singh300 views
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default by JSFestUA
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by DefaultJS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JS Fest 2019. Minko Gechev. Building Fast Angular Applications by Default
JSFestUA420 views

More from myposter GmbH

Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter by
Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposterConcepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter
Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @mypostermyposter GmbH
969 views43 slides
Clean(er) Code - Tech'n'Drinks @myposter by
Clean(er) Code - Tech'n'Drinks @myposterClean(er) Code - Tech'n'Drinks @myposter
Clean(er) Code - Tech'n'Drinks @mypostermyposter GmbH
754 views59 slides
ReRxSwift by
ReRxSwiftReRxSwift
ReRxSwiftmyposter GmbH
481 views70 slides
Vue - the Progressive Framework by
Vue  - the Progressive FrameworkVue  - the Progressive Framework
Vue - the Progressive Frameworkmyposter GmbH
707 views22 slides
Microservices - Do one thing well by
Microservices - Do one thing wellMicroservices - Do one thing well
Microservices - Do one thing wellmyposter GmbH
373 views27 slides
Optimising Image Loading by
Optimising Image LoadingOptimising Image Loading
Optimising Image Loadingmyposter GmbH
1.8K views31 slides

More from myposter GmbH(9)

Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter by myposter GmbH
Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposterConcepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter
Concepts of Clean Code adapted for JavaScript - Tech'n'Drinks @myposter
myposter GmbH969 views
Clean(er) Code - Tech'n'Drinks @myposter by myposter GmbH
Clean(er) Code - Tech'n'Drinks @myposterClean(er) Code - Tech'n'Drinks @myposter
Clean(er) Code - Tech'n'Drinks @myposter
myposter GmbH754 views
Vue - the Progressive Framework by myposter GmbH
Vue  - the Progressive FrameworkVue  - the Progressive Framework
Vue - the Progressive Framework
myposter GmbH707 views
Microservices - Do one thing well by myposter GmbH
Microservices - Do one thing wellMicroservices - Do one thing well
Microservices - Do one thing well
myposter GmbH373 views
Optimising Image Loading by myposter GmbH
Optimising Image LoadingOptimising Image Loading
Optimising Image Loading
myposter GmbH1.8K views
Warum Affen die besseren Softwaretester sind by myposter GmbH
Warum Affen die besseren Softwaretester sindWarum Affen die besseren Softwaretester sind
Warum Affen die besseren Softwaretester sind
myposter GmbH2K views

Recently uploaded

Democratising digital commerce in India-Report by
Democratising digital commerce in India-ReportDemocratising digital commerce in India-Report
Democratising digital commerce in India-ReportKapil Khandelwal (KK)
18 views161 slides
SUPPLIER SOURCING.pptx by
SUPPLIER SOURCING.pptxSUPPLIER SOURCING.pptx
SUPPLIER SOURCING.pptxangelicacueva6
16 views1 slide
Piloting & Scaling Successfully With Microsoft Viva by
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft VivaRichard Harbridge
12 views160 slides
"Surviving highload with Node.js", Andrii Shumada by
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada Fwdays
22 views29 slides
Melek BEN MAHMOUD.pdf by
Melek BEN MAHMOUD.pdfMelek BEN MAHMOUD.pdf
Melek BEN MAHMOUD.pdfMelekBenMahmoud
14 views1 slide
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdfDr. Jimmy Schwarzkopf
20 views29 slides

Recently uploaded(20)

Piloting & Scaling Successfully With Microsoft Viva by Richard Harbridge
Piloting & Scaling Successfully With Microsoft VivaPiloting & Scaling Successfully With Microsoft Viva
Piloting & Scaling Successfully With Microsoft Viva
"Surviving highload with Node.js", Andrii Shumada by Fwdays
"Surviving highload with Node.js", Andrii Shumada "Surviving highload with Node.js", Andrii Shumada
"Surviving highload with Node.js", Andrii Shumada
Fwdays22 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10300 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely25 views
Igniting Next Level Productivity with AI-Infused Data Integration Workflows by Safe Software
Igniting Next Level Productivity with AI-Infused Data Integration Workflows Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Safe Software280 views
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe by Simone Puorto
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe
Simone Puorto12 views
Case Study Copenhagen Energy and Business Central.pdf by Aitana
Case Study Copenhagen Energy and Business Central.pdfCase Study Copenhagen Energy and Business Central.pdf
Case Study Copenhagen Energy and Business Central.pdf
Aitana16 views
Future of AR - Facebook Presentation by ssuserb54b561
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
ssuserb54b56115 views
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors by sugiuralab
TouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective SensorsTouchLog: Finger Micro Gesture Recognition  Using Photo-Reflective Sensors
TouchLog: Finger Micro Gesture Recognition Using Photo-Reflective Sensors
sugiuralab21 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views

Vue - Composing Components