---
title: "Cable management for Nuxt 3"
description: "My conference talk from VueConf Toronto! Cable management for Nuxt 3. Compose pages with multiple headless sources and never re-platform again… Now that companies are starting to use multiple different headless sources to create their digital experience platforms, a real problem is forming."
date: "2021-11-23T18:16:39.000Z"
url: "https://timbenniks.dev/videos/tim/041-ry60wvg0fzq"
youtube_url: "https://www.youtube.com/watch?v=RY60wVg0FZQ"
playlist: "tim"
image: "https://i.ytimg.com/vi/RY60wVg0FZQ/maxresdefault.jpg"
tags: ["composable-architecture", "cms", "content-ops", "frontend"]
---

# Cable management for Nuxt 3

My conference talk from VueConf Toronto! Cable management for Nuxt 3. Compose pages with multiple headless sources and never re-platform again… Now that companies are starting to use multiple different headless sources to create their digital experience platforms, a real problem is forming.

Watch on YouTube: https://www.youtube.com/watch?v=RY60wVg0FZQ

## Transcript

[Music] [Applause] [Music] [Applause] [Music] hello and welcome to the studio i wish we could have done this in person but we're just not there yet so let's do it the video way so today i want to talk to you about nuxt and how you can set up its internals to actually cable manage it very neatly right and to make sure it's maintainable and reusable for the future and so i want to talk to you a little bit about the history of why we are here now and what we need to do to tackle the modern issues that are different headless systems that you have to combine together and then map it their data to your components and then run it at a jam stack for example but what happens if there's another system you have to integrate with or change up what happens then well if you have good cable management it's actually pretty easy so before we dive in let's talk a bit about me my name is tim beniks and you can find me here on twitter i was born and raised in amsterdam and now i live in france but i work in english so there's all these weird accents going on feel free to ridicule me because it sounds probably pretty funny anyways here we go i work at uniform where i'm the principal developer advocate and at uniform we build tools to deal with these modern problems that we will be talking about so you'll see uniform come back later on in the talk to help us solve some of these issues for the rest i work with cloudinear is a media developer expert i'm a nextgs ambassador and i'm a tech council member of the mac alliance and so on top of all of that i also make videos but you probably already knew that if you follow me for a while so if you like this feel free to visit the channel and maybe even click subscribe but you don't have to obviously so to start this talk i want to talk about sandwiches and i know i talked about sandwiches in my last talk on the fjs global conference but the thing the analogy still stands and sandwiches always work in my opinion i like sandwiches right and so this is a bit of the history lesson so what we used to have in software were monolithic sweets and you can think about a sweet as a pre-packaged sandwich that you get from the bakery right so the bakery knows what you need or it knows what most people need you grab a sandwich and you go you don't have that much choice you have maybe have two or three sandwiches there right and if something is wrong with sandwich you can just go to the baker and say hey something was wrong but if you want to change something out it's pretty hard right you can open it up and do stuff yourself that takes a bit of effort but you can also go to the baker and say can you put more cheese please and you see if you come if you convert that to what software is doing um you have to add a ticket you have support and there's all these things if you want to customize it it takes a bit more effort and so this is what we used to have but nowadays the whole thing with the mac alliance in the center is actually going this way everything is much more composed you have your assist your sandwich but you have deconstructed it and so you can choose which peanut butter and which jam and whatever flavor of bread you want and that is actually super great for developers but it also gives a bit of issues and let's talk about those in a sec and so to continue the history lesson and then finish it up after this slide is we started with the suite right where everything was in one big software vendors bundle from front end to hosting to cms everything and then a bit later we're talking four or five years ago now the front end needed to be just separated so we needed to use our modern tools but the rest was still in this suite and then most recently you've seen that only the cms remains in the suite and everything else is outside like if you wanted to do personalization you just take a third party if you want to do images you go to cloudinary things like that and nowadays everything is completely decentralized so you don't really have a center anymore and so developers love it right because you can choose your own stack i'm going to go next with few and i'm going to go to for cell and i connect to whatever apis i want because as a developer i get to choose the awesomeness and we love that but there are some challenges that come along with this choice and let's address two of them for this talk and those are the two biggest ones anyways so if you want to compose pages with different headless sources it's pretty challenging for both developers but also content creators think about this story right so you just finished version one of the website and you're back into it as a developer for the next sprint for v2 or 1.1 whatever and then one of the content editors or marketers calls you and says hey can you make me this campaign page and then connect five products add some personalization based on the products add some content from this cms and some content from that cms well in my career i've had that all the time and then you as a developer probably say no i have no time for that i'm a mid-sprint why are you calling me and so what happens then is a developer feels a bit of frustration because their software doesn't seem to be flexible enough for people to just use it and of course they're mid-sprint so you're not supposed to challenge whatever happens in the sprint right but then the content editor is like yeah but i want to do my marketing stuff the stuff that pays the bills and i can actually not just make a new page and put all these things together and so we need to solve the issue of how you can compose pages with all these different sources that big brands are dealing with and make that fun for both developers and content editors and in this talk i'll show you that you can actually pull that off and then the next bit is a little bit more with the cable management is how can you maintain code like that because lots of different sources are coming in and how do you get the developer experience to be a great right it needs to be fun to work on even if there are so many different connections coming in and then you get things like future proving it and not having to re-platform every time a new thing comes along so that's challenge number two that we'll address and so what you see nowadays which is kind of fun you see lots of websites that look amazing on the front right you go to the site it looks great it even performs well but then the back end of that of how the code was built it's kind of like homer here kind of putting his back fat together and then not showing that off right and so you see this all the time and this is not super maintainable and you kind of go to okay we have all these cables we have to put them together but let's put some more on and let's add some other third parties and let's add some analytics and then suddenly you have this mess and you kind of have to deal with it and once that happens your releases are going to be a little bit yolo like and you can probably like let's try we'll see and you're kind of creating even if you have new tools a complicated way of moving forward and developers just don't like complicated ways of moving forward we want to have it simple we want to be able to change things quickly without having so much trouble right and so what we need is cable management and when you actually look at this picture it's ridiculous right all these cables but there's also some sort of cooling fan in the right bottom that is probably quite futile for this anyways we need cable management and so we want to go from something like this to something like this this is what we want to see right and so i've worked a while back on this website and um i was kind of in charge of delivering it and making sure that everybody understood the tech and don't get me wrong i didn't build everything we hired an amazing team we hired a full team for this project basically to build this and this is actually innuxed and it is cable managed to perfection this thing is amazing but it took us like oh yeah this is how it looks from the inside this is where how you want the things to work but the thing is it took us like six months to even have one component on a pitch so we said look ma we cable managed to our bosses and everybody's like yeah but at what cost right we literally spent six months of doing dx figuring out what was the best way for people to work with all these complicated systems and not every project has this amount of money and this amount of availability of amazing people to figure that out and so we kind of need to normalize it a little bit and so we have to normalize it because everything is going to be api first from now on there will be no more origin servers there will be no more centers of the universe that you connect to tells you what to do and then you render it will just not exist and so because of that there is not really an architecture blueprint right um i work with the mac alliance and we're in the technical council and we get a lot of questions of what are the best headless tools to put together what is the best best of breed architecture blueprint and we're always saying there is none that's a feature and so it becomes a little bit complicated and so because of that complicated thing of what are the things that work well together and what do developers need to know new product categories are emerging right and because there is no more center of the universe you can see all these tiles they're laying next to each other not on top of each other and so they need to be orchestrated together how do they connect how can developers make the most of this but also how can make content editors make the most of it and how is this maintainable things like that and so we need a platform to help you with this and once you have that platform in place you can start moving forward right and so the platform need to have no opinion we don't want to tell you you have to use react or you have to use view or you have to use that cms that shouldn't happen and because of that it should also have no fender lock in right if you want to use jquery just use jquery you probably should use few but you know that's out of the question here you you should not be forced you should make your own opinion as a developer choose the right thing and move forward and with that in mind you also shouldn't have some sort of constraints on the roadmap because if you would go to these what a little bit older systems the monoliths they would say okay in six months we're gonna make everything sass or in six months we're gonna do everything in docker containers and you have to follow what if you choose that side but it goes that direction and suddenly you spend a lot of cash there's no free there's no freedom no flexibility nothing so it shouldn't have some sort of constraints like that so total freedom is what we're talking here right and of course the sdk on the developer side needs to be friendly to you developers so basically in my opinion this is what this should look like right so you have a cms and maybe some commerce stuff it goes into a thing where you can make compositions or an interface and then you port it to your framework of choice from probably in this case it's going to be next and then you have some preview opportunities for content editors and then you publish it on netlify and so you can kind of change it out right you can do commerce tools you can do content full you can have for sale you can even go a little bit crazy and use next gs with for cell in sight core whatever you want um you can also use prismic or you have prismic and contentful it shouldn't matter right because basically these compositions is where the data comes in then it goes to your framework in one way and then you render it in one way to the gem stack or something mixed right with edge handlers or something like that and that becomes a very interesting way of working but it also sounds a little bit magical it may be a little bit too magical but let's look let's let's address the challenges and have a look if with that model that i just showed you if we can actually make it happen and so first let's have a look at composing pages with different headless sources because that's what the thing that is complex for both developers and content editors right you need good cable management but you also need kind of no code like tools for these content editors to deal with all these different headless systems and just they shouldn't need developers really and so i have rebuilt my website again i know lots of talks that i do on the bigger view conferences i would rebuild my site and show you how that works and why and this is yet again something that i did and it's lots of work but i get to use these fancy new technologies there's a reason i went to this startup because i can use these technologies and so how about i show you a demo of the platform that i just illustrated and then once that works i'll show you a bit of extra magic fairy dust that we can also sprinkle on top for like personalization and fun stuff like that and then after let's dive into the code to see how that cable management is actually working all right we are in the browser and before we show some code i actually want to show you how you can compose pages with different headless sources and how to put that on one simple interface for content editors and i think it's important to show this in context to how the code would work later on so you can see here this is our uniform dashboard and let me just add a page and call it home and in a homepage you're going to add a slug and a composition doesn't have to be a page but in my case it is and you can see here this is an empty canvas and there's a page and there's a slot and so if you relate this to few we also have components and slots where you can put components in again and that's the same concept here and in this case the page is actually a composition component is connected to a content for item and so i do that to actually add patch metadata seo stuff or gtags and stuff and so i connected that to a contentful item and so let's actually add a hero component that is also a contentful item and but i i think i want an exclamation mark behind my name so when you actually do edit you then go to content full and you can just edit it here hit publish go back and it's now updated and so let's save this and let's have a look what we just built and so what you see now here this is a my header and footer are actually hard coded because this is just my personal blog and i'm still kind of working on it but this hero with the exclamation mark actually came from contentful and so that way it's relatively easy to start composing because i have other components let's say my video highlights because i like to make videos right so i want this to be dark and i want it to be videos i don't actually need a description right now but let's add a featured video and there's another slot feature right let's add a single video that also comes from contentful and i want my next three favorite features that's a fun video for you to watch by the way and i want it to be the big variant rather than the featured one just because we can and we can also add some other videos let me just do that and so i'm literally just composing with contentful items without actually storing anything contentful related in here this thing is only just pointing to sources and so we just created this component and these front-end components know really nothing about the fact that it's from contentful or whatever it just knows i'm getting data i fill out my props and i show what i need to show and i hear you thinking but tim didn't you just wrap something around contentful and this is now the system well no it's actually a little bit more because it's twofold right so you kind of extract compositional data on how you do your layout from the real data like this video doesn't know it's my latest video it doesn't know it's variant it doesn't know it's featured no it's just a video if you now want to make a mobile app or an apple tv app you can still get that contentful item that doesn't know about anything it's just data so you separate these two sources and that's actually very interesting and on top of that it's not just contentful what happens a lot is when you make a page that also needs products but you don't want to have those in content full why it's just a cms so let's add my products from big commerce that's another headless system so let's call this products and let's select a couple of them bennex products by the way these are not real products they are just for the demo just so you know so you cannot buy these actually and let's save and let's have a look what i just added and so to the front end this is exactly the same stuff it just gets some props renders some components and these are my products now and so in the same interface i just work with multiple sources and if i had another cms or i had algolia search stuff or i had third party stuff i could add that in here and then compose with it and you can get all these really fun options and because of having everything in here new things arise because if you wanted to do personalization back in the day or even now if you don't have this it's really hard developers have to code it in and there's all these things going on and so what if i wanted to personalize this inside here well i can just click personalize and let's call this product personalization and then let's choose all the variations and so these are just my default products right if you don't personalize but now let's actually show you some products specifically for if you're interested in nuxt which most of you will probably be and so if you look for my products related to nuxt i have nox 101 course tip and what else do we have let's have a look next image and learn view 3. okay so this is now for the people with the next interest and what i can do is i can tag this component with the next interest you can see that here below and what that means is our sdk on the front end tracks what people do so you click around on the website or you come in from from a certain url and we figure out what your intent on the site might be and this is not a video where i explain all that but you can tag against the intent that a person might have based on their actions and then show that so this is for the next interest but let's also add some products for conference interest because i also have a bunch of courses on how to present yourself as your brand or how to record yourself things like that and so let's have a look and let's only add two products now so we have a webinar and tips and tricks and this is for if you have a conference interest okay so let's save this and let's have a look what happens so there's a little bit of code already that i've built that will track the user so let's go when you go to my speaking page you are most likely interested in how i would be as a speaker so these are my talks and stuff and when i go back to the home page these products just became conference interest that's pretty fun right what you can also do is let's use our quick developer tools to totally forget everything what if i now went to a next video so i could search on the next tag so all the next items and then even go to the next video so i watch this video i go back to the home page and suddenly these are now nox products and this is a very arbitrary simple way of doing this but that was really simple and there's not that much code in it so now that you know how we composed and did all the magical fun personalization stuff let's let's have a look at the code and how that would work all right let's have a look at our second challenge which lies a little bit closer to the code so what we need is like composability in our code and how can we can reroute all the cables nicely so it just works for your future how to have a good developer experience and how to have like hyper flexibility with how you deal with stuff and i wanted to actually start by showing you the basics of how this works inside nux3 because why not we are living on the bleeding edge right now so we're now here in the in the in vs code and basically the concept of using nux3 is that you can use these really cool serverless functions right and so if you use async data like i do here i'm fetching a composition i'm grabbing that from my api that fetches my composition you know the homepage composition that we just made previously in the talk and so what i actually am doing here i'm creating a simple setup function and i make a data variable that because of its and that gets returned and it's shown here in the template and so i'm fetching the composition and that composition fetching actually happens inside our api endpoint and so the basics of how this would work is basically we're loading the uniform canvas client and there's a bunch more functions there we'll show in a sec and so you make a client and you give it your api key and your project id and you use a very simple function called get composition by slug and in this case the slug i'm getting is just the slash for the home page you can also do get composition by id so you don't need a slug and so let me just start up next three and see how fast that is by the way and then what comes out of what i did here here we go yarn dev minus open this is going to be a yolo let's have a look what okay it started fast and there it is and so we now see our composition with the name home with the slug slash and with the slot components and so i've added a bunch of stuff in there right so remember adding the hero and we have some personalization with inside a bunch of products and when you go down you see some other parameters and so this is kind of a simple reflection of that composition which is basically this here however there's no data here from contentful or bigcommerce right there's just here in my hero i have a type contentful entry and the value is this id and that id is actually pointing to a contentful item and so the point is that this system here it would never save all that data because what happens if somebody unpublishes something on a headless source or something changes the system that is orchestrating everything shouldn't know about editing it should just orchestrate and compose and so what you do generally is you grab the composition and you get all these values here like for the big commerce product list i have product ids and so what you do we call this enhancing so you enhance for each of those items you enhance the content you grab the data from the different sources and that's what goes on your screen so let's have a look at that in the code how we do that so we have enhancers that we load and basically i have an enhanced function here and so basically what we're doing now is i'm giving it the initial composition i'm giving it the enhancers i'll show you those in a sec and we're not looking at the previous or not draft states and so this is basically a mutable property that gets updated and so now when we have a look at this and i refresh you see there's actually more data now so it enhanced the data by looking for that id in here this is hi i'm timbanics and this is the images and everything you want and so if you're doing something like jam stack doing these kind of calls one or two per component is really not a big deal because you're doing those as you are running your build and you kind of separate the enhancing from the composition itself and these enhancers are actually really solid so what you can do i'll show you some of it so these are my base enhancers and so for everything that is a contentful type like a content rule entry i will compose with my contentful enhancer and then this one is literally just creating a contentful client and then return doing some queries and returning it however from contentful if you get rich text you get json but what you want to do is actually morph that json json into html so you have another enhancer that grabs the content does something to it and returns it and then i didn't particularly like all the stuff that comes out of the of the the api endpoint like it has all these extra fields i didn't want those so i wrote a little model converter that grabs only the fields that i want for every component and so these enhancers can grab data they can morph data and they can map it exactly to the component that you need to its props and this is just javascript this is just raw node.js and so you can have it like i just showed you right you can do this on ssr on your own endpoint so you can do it like as a little api call or you can do it like in your async data function in x2 you can literally call it there but what you can also do is you can put this on another server somewhere in the cloud that would then become your api endpoint and then your front end doesn't need any of this code and so it's super flexible and for example if i now wanted to add let's say big commerce or something else to it you can just get like instead of the canvas contentful one i can just get the big commerce one and i can show you that here oh not there but where do i have it yes here so this is my other project and in here if you look at these enhancers this is a little richer and so i have big commerce ones and i have contentful ones and i have some other things going on and basically you can just separate out how that data is fetched in my case i chose to actually put this in for cell serverless functions right so i have a composition fetcher and i have some other things that basically just help me enhance this thing and so i could put this in a completely different project and have an api developer develop that for me and my front-end wouldn't know at all where this comes from it just queries that one thing and then you can cache it and if you cache it properly you can have an ssr app that is mixed maybe with some edge handlers and maybe with some static stuff but you only query one endpoint that you can control yourself and then get data that you want from these compositions and map the data exactly to how you want it and of course we've been adding because if you want to use vgs or react or whatever we've been adding things like a composition component and we have a slot content component and these do like little magical things to dynamically render the component for you that comes out of the slot and then just renders it for you and so these are all these little extra helpers and this should make you as a developer super happy because you can exactly choose how to set it up you can do everything in your project and you can you can do it in a micro um you know serverless endpoint whatever you want anything goes and so that's what i wanted to show you today and i hope this actually makes sense i personally think it does especially when you get to slightly bigger projects this is something that works really well and i wish we had this for the louis vuitton project but we basically built something ourselves that looks like this but now you have a product that is actually free to use all the stuff you just saw is completely free so thank you for watching feel free to subscribe to my youtube channel if that interests you at all and have a lovely conference cheers