Enterprise Plugin Patterns In Nuxt

Josh Deltener Nuxt Ambassador / Instructor / Breaks Stuff deltener.com @JoshDeltener

Enterprise Plugin Patterns

Third Party Code Is Poison Problem 1

Third Party Code It has many names • Re-marketing Tracking Pixels • Widgets (Chat, Reviews, Popups, Payments) • Integrations (Analytics, Tag Containers, A / B Testing) • All want to be the first to load and claim they don’t affect site performance (wink)

index.vue Third Party Poison Starts To Leak In

index.vue Then it gets worse..

• Poisons the purpose of your pages and components • Confusing Object Structure • Error Prone • Not Maintainable at Scale Josh, why is this so bad?

? t i if x e w o d w o H

Plugins

Plugins Are • Injected Javascript functions • Ran per hit (server) and when app starts (client) • Exposed to all components, pages and layouts • Included in the context object

Third Party Javascript in a plugin

This Rocks! Focused One integration per file Natural It’s just Javascript Flexible Easy to extend and optimize

Changing Service Providers Is a Pain Problem 2

Providers Change It’s a matter of when, not if Chat Live Person -> Drift Payments Stripe -> Bolt Tag Containers GTM -> Segment

Ho wd ow ef ix i t?

Abstractions! Using plugins..

• You have external integrations that may change • You have a feature that is fulfilled by different providers • You want a clean line of separation between your code and third party code Are Abstractions Right For You?

1. Map out the basic interface 2. Create a plugin using the interface 3. Update Vue components to use the plugin How Do I Create One?

1. Map Out The Interface • Try not to think about the current implementation • Think generically, “what would all [whatever] need?” Simple Example: Chat Provider open() - Tells the chat provider to show the chat panel

2. Create The Plugin Using The Interface /plugins/chat.client.js

3. Use The Abstraction • No more vendor specific code in the component(s) • Switch chat providers without changing any of this code ChatButton.vue

Marketing Wants To Track Everything Problem 3

Track All The Things.. Pr o du c d Ct site evi er R Us d e w l i e P c Price RVie Pro k w o e d e y d a i r A s ngetFVi du ego B i d a i t l t c n e a i t r c o n C a t P l i e c C Lis me odu n k r e t r m d a o C C r r t a o F T P V l P d N e i i e c e a d m d w d k g a A n e e e C a d d S r c B d roll

Multiple Third Parties Want To Know Not only do they want to track all the things, but want multiple providers to know about it. Segment Chat Clicked Full Story Optimizely

? t i x fi e w o d w o H

The Event Bus Still using plugins..

How It Works Button Clicked Hey everyone, they clicked ‘Chat’ • Integrations subscribe to events they care about • Your code emits events to the bus • Subscribers send info to their overlords ChatClicked Purchased NavClicked Segment Segment FullStory FullStory Ok Sweet! The Event Bus

How Do I Make One?

Step 1: Create The Bus (Yep, That’s It)

Step 2: Setup Plugins To Listen To Bus Events

Step 3: Emit Events To The Bus From Components

Caution This Is NOT For Component Communication! This is not a replacement for standard emits for cross component communication. That would be horribly bad, this is just for emitting UI events to your third party providers. With great power comes great responsibility, do not take this warning lightly. Not available in all areas. Terms are subject to change without notice. All rights reserved. Only one winner per entry. No animals were harmed creating this presentation. Ok fine there was an incident with a goat, but he’s totally fine and honestly he had it coming.

• Over 95 video lessons • Over 10 hours of content • Exclusive Discord Channel • 25% of Sales Go To Nuxt! • Codebase will be updated to Nuxt 3 (when stable)

The End! Josh Deltener Nuxt Ambassador / Runs With Scissors deltener.com @JoshDeltener