50: The Release of Nuxt 3 with Daniel Roe

Robbie Wagner: [00:09] Hey, everybody. Welcome to another Whiskey Web and Whatnot with myself, Robbie Wagner, and my co-host, Charles William Carpenter III, with our guests today, Daniel Roe. How’s it going, Daniel?

Daniel Roe: [00:23] Yeah, it’s a pleasure to be here. Thank you.

Robbie Wagner: [00:25] Yeah. Thanks for coming on.

Chuck Carpenter: [000:27] Thanks for staying up late for us. That’s nice.

Daniel Roe: [00:31] Yeah, it’s really a pleasure.

Chuck Carpenter: [00:35] Yeah.

Robbie Wagner: [00:36] So, uh, yeah. I guess before we jump into anything if you want to give a brief intro into who you are and what you do.

Daniel Roe: [00:42] Goodness. A brief intro into who I am? Throw the existential questions at me straight off the bat.

Chuck Carpenter: [00:48] That’s right.

Daniel Roe: [00:49] So I’m an open source developer, I have a background in the agency world as well as the start-up world, and at the moment, I’m one of the core team of Nuxt, which is a framework for building web applications. It’s built on top of Vue, and we’re spending a lot of time on Nuxt 3 at the moment. Which has a particular focus on serverless and hybrid rendering and lots of really interesting things like that that aren’t just because it’s built on Vue. But are powered by lots of new tech that we’re building that is framework independent and I’ll really happily talk about any of that. But based in the UK. In the northeast of England. I have three cats, a dog, a two and a half-year-old son. I live in the countryside on the banks of a river, in an ancient forest with fields all around me, and I’m about a mile and a half away from a city called Durham.

Chuck Carpenter: [01:49] The famous English town of Durham. Everybody’s heard of Durham.

Daniel Roe: [01:54] Bill Bryson is, I don’t know if you’ve come across as a travel writer. I love him personally, but he’s, I think, British, went to the US, came back to the UK, and it was written about losts of places. Check him out. I genuinely find him hilarious, but in one of his books, he said that Dorian was the most perfect small city in the world, something like that. And as a result, Durham said, we love you, Bill Bryson, and they named him Chancellor of the local university. But Durham University is a big deal. It’s one of the top universities in the UK and even to this day, if I drive out down the road, I’ll pass the Bill Bryson Library, which is the main university library, because you recognize Durham for the most perfect city, small city in the world. So that’s our claim to fame.

Chuck Carpenter: [02:41] That’s one hell of an intro, really.

Robbie Wagner: [02:44] Yeah.

Chuck Carpenter: [02:44] You live in the perfect city.

Robbie Wagner: [02:46] Podcast is over.

Chuck Carpenter: [02:47] Yeah. I don’t know how we can do any better. We’re going to drag the quality of content down from there on, I’m certain of it.

Daniel Roe: [02:57] No, I love taking American friends to visit around Durham because you see beautiful buildings that are older than the establishment of US as a current nation-state, which is interesting.

Chuck Carpenter: [03:12] Yeah, that’s one of the things I love about visiting England or just lots of European cities is they’ll say, oh, this is a relatively newer town. It was established in the 17th century or something. And you’re like, oh, older than my country. Yes. Got it. You should start with some of this whiskey, though, before we get too serious.

Robbie Wagner: [03:32] Yeah, I’m in a building that was built in 1800, so I’m a little bit closer but still pretty new, I guess. But anyway, whiskey.

Chuck Carpenter: [03:42] You’re saying whiskey. All right. So today we are trying the Laphroig Lore.

Robbie Wagner: [03:48] The richest of the rich.

Chuck Carpenter: [03:50] Yeah, that’s what it said. It was like a real upgrade on regular Laphroig, I guess. So. 100% malted barley as are many Scotches, 48% ABV age anywhere from seven to 21 years, which that’s respectable. And then it is a complex blend of small batch Scotch whiskey matured in five different casks. And I know one of those was like experiment barrels, but that’s pretty common for whiskey or Scotch in general as well. So it’s all like technical notes.

Daniel Roe: [03:50] Interesting.

Chuck Carpenter: [04:25] There’s the pop. Once you pop, you can’t stop. That’s what they say.

Robbie Wagner: [04:29] Pringles.

Chuck Carpenter: [04:30] Yeah. Pringles.

Robbie Wagner: [04:33] Well, that’s a campfire.

Chuck Carpenter: [04:39] So, Daniel, do you prefer peaty or smoky Scotches, typically?

Daniel Roe: [04:44] Oh, gosh, I love smoky honesty. And there’s something I don’t know if you ever capture the whiskey for the following day. I’m guessing you probably do after you’ve savored the whiskey, just covering the top of it with something, so nothing escapes and the next morning you come and just drink it at room is amazing. And I think smoky whiskey, particularly the next day when you take that off, it’s like there was a campfire, there was something amazing. And to pull some of the different notes out of it then the following day is incredible.

Chuck Carpenter: [05:24] Yeah. Oh, man.

Daniel Roe: [05:26] What about you guys?

Chuck Carpenter: [05:27] Well, I am a bourbon drinker primarily, so I guess some people would say I like a sweeter whiskey. But we have been drinking a lot of ryes, so a little bit of that like peppery kind of spice to it is a nice punch and away from the corn-based whiskies out of those two. Peaty or smoky? I think I would also prefer a smokier whiskey. Yeah, the peaty ones kind of remind me, I’ll say a lot of times it kind of reminds me of IPAs of whiskey where you get like that hoppy kind of bittery flavor, and I feel like a peated whiskey is more like that for me. And this whole mossy kind of mildewy kind of thing. I don’t know, it’s interesting, but then it feels very one note while the smoky, you get like that smoke on it, but then you still get like the various notes of the whiskey a little more.

Daniel Roe:[06:24] I mean, I completely agree, but I’m a bit worried though that peaty whiskey is going to be the thing of the past because to save the planet, I think there’s going to be a lot of restrictions imposed on the use of peat in the making of whiskey. So I guess you’ll be fine.

Chuck Carpenter: [06:42] Yeah, I don’t think I’ll be sad at all. In fact, I guess you can’t really do that with hops to get rid of IPA beers. But for me yeah, sorry. This has got a little like I’m used to, a little more burn and bitter on the finish, and I feel like I’m getting a little sweet on the finish.

Daniel Roe: [06:59] For me, that the sort of minerality of it, which I don’t know that’s exactly what you’re saying, because there is a sweetness as well, but something about it doesn’t have that burn. You’re detecting different notes of some interesting minerals, I think.

Chuck Carpenter: [07:16] Yeah. Minerality. That would be a word that I think I would use on it.

Robbie Wagner: [07:20] Probably the water, right?

Chuck Carpenter: [07:22] It’s definitely the water they use. Yes. All spirits producers think that theirs is the most unique due to the water source.

Chuck Carpenter: [07:30] Which could be, yeah. I’m having a hard time picking specific flavors because it’s just huge campfire, but.

Daniel Roe: [07:37] It’s so smoky.

Robbie Wagner: [07:37] It’s tasty.

Chuck Carpenter: [07:39] It is very smoky. But I like smoked cocktails. I’ve had smoked cocktails, and I think those are really interesting. And they add, like, a light air of this smoky flavor to it, too. I don’t know if you’ve ever had one of those.

Daniel Roe: [07:51] It’s one of my least successful gifts to my wife ever. And I got this little smoking gun, I think it was called, and you can put shavings of oak in the base, and you press a trigger and smoke comes out the front, and you got a tube. You can put it into drinks. You can put it into sealed containers and put some cheese in or something and smoke it. And I’m sure that thing is not even used twice, but the concept of it the concept is great, I think, and I should probably try it a bit more. Smoky cocktails. Sounds nice.

Chuck Carpenter: [08:24] Yeah. Smoky cocktails. I feel like we might be up your alley. Well, let’s get to the rating portion of our segment. So we rate them from one to eight tentacles. It’s a pretty arbitrary system, but we just kind of like one being, I would never touch this again, and I can’t pick zero kind of thing. And eight being like, this is the most amazing whiskey. I never want to drink anything else. It’s all very subjective and whatever else. Anyway, Robbie will start it off.

Robbie Wagner: [08:54] Okay.

Chuck Carpenter: [08:55] Give you an idea.

Robbie Wagner: [08:55] We’ve had a lot of whiskey, so we’re kind of segmenting them based on types. So in the types of Scotch or Scotch style, like including Japanese and some things that are kind of similar, I would give this one a seven. I typically am not a big Scotch drinker, so I tend to not like them as much. But I actually really like this one. So I’m going to say seven.

Chuck Carpenter: [09:17] Yeah, I’m feeling like this one hit it out of the park. For me as well. The more I drink it, the less I’m focused on the smoke aspect and the more I’m picking up some of the other flavors in it. And I actually am picking up a small bit of peat now, but not anything like, oh, that’s way too much. It’s overwhelming. It feels a little light to me. A little sweet little peat, like you, said. Now, you’ve influenced me with the minerality comment. Like a little minerally yeah, even refreshing. Like a mineral water can be. So I think I’m going to go seven as well in this category of things I’m like. I would definitely have this some more.

Daniel Roe: [09:52] I’m going to give it a six. I was tempted to follow you guys on the 7th because I do love it. I’m also starting to pick up. I don’t know if you agree, a bit of vanilla or something from the casks. Probably just on the nose, not on the palate. But I really like this because the mix, the fact it’s not an age-specific whiskey. So it’s just that promise of who knows what it is that we brought out. I think you can definitely pick up the sort of the legacy of some of those older whiskey bands that have made it into that, and I really like that. I think I would definitely have this liquor again. It would be the Laphroaig I think I would go to, to try. But I mean, six is a solid compliment, not a negative at all. It’s only eight tentacles. How can I give anything?

Chuck Carpenter: [10:40] Yeah, we’ve only got only so many shots at it, and I’m imagining that you probably drank a lot more Scotch or scotch-style whiskey than I do, so you could have a pretty diverse selection. I mean, I’ve tried a number of things, but not a ton. And then on the show, I think we’ve only had one other Scotch and then a few couple of Japanese, something like that.

Robbie Wagner: [11:02] I’m not sure where you’ve been because we’ve had at least four Scotches.

Chuck Carpenter: [11:06] Well, I’m drinking these, and then I forget about them. That’s what happens.

Robbie Wagner: [11:10] Fair.

Chuck Carpenter: [11:10] Yes. Yeah. So it’s hard to say. Yeah, not bad.

Robbie Wagner: [11:15] Yeah

Chuck Carpenter: [11:16] Should we talk tech? Yeah. Serious things.

Robbie Wagner: [11:18] Yeah, I guess so. Yeah, you talked a little bit about what Nuxt is in general. I’m trying to think of which order we want to go in these questions for. Let’s just jump into Nuxt 3. So you talked a little bit about it. It’s around the corner. What are some of the new features coming? How close are we to having it done? Tell us about it.

Daniel Roe: [11:36] So we’re in release candidate at the moment for Nuxt 3, which means that most of what I’m talking about is built and usable today. And there are people, in fact, there are quite a lot of sites with Nuxt 3 in production, but it will graduate to stable when we feel the API is complete. We’re not going to be changing things. I think that’s the main thing that’s going to take us to stable. It’s not that we will never have any bugs in the stable version, but it’s more that this is what we’re committed to. In terms of the stable release, you can expect that any changes will follow. You’ll have a minor bump if there’s a significant change. If there’s a breaking change, it will be major. So that is what we want. We want to avoid breakage. So some of the things that Nuxt 3 brings, well, it’s been rewritten from the start, so it’s given us an opportunity to do, I think, what we really wanted to do with Nuxt and to learn from some of the mistakes we made for Nuxt 2 and adapt Nuxt for a new world. That sounds a bit crap, but more and more I think we’re looking to take advantage of different kinds of hardware for rendering HTML. So we’re thinking about rendering on edge networks rather than on a standalone server. So rather than have a Nuxt server with maybe a couple of instances running somewhere, we’re thinking of the server that we produce for Nuxt has to be able to start in a couple of milliseconds, render a page, and then shut down because it might be on a serverless function and you can’t have performance bottlenecks at the start, for example. So Nuxt 2 out of the box is like a bare minimum package. I did some checking on this. The cold start for the server was 300 milliseconds. With Nuxt 3 it is three milliseconds. So obviously we work quite hard to make that possible and we’ve also worked really hard to make it really small in terms of dependencies and the production server bundle. So in Nuxt 2, the production server bundle, minimal. So not any of the build dependencies, but only the production was about 50 meg. In Nuxt 3 it’s something like 500, 700 kilobytes, something like that. A lot of things we’ve sort of reimagined from that point of view, from a server point of view in terms of user experience, and particularly on the front-end piece. So obviously it’s built in Vue 3. The move from Vue 2 to Vue 3. There’s a bit of a change in philosophy more broadly than just Nuxt. So a move to extracting units of compute into composables. So this is a feature. It does stuff under the hood. I don’t need to know about that. I just need to consume it in my app. And even if that’s a feature you’ve built yourself, the idea that you just expose the things that you need to use, the API that you need to use. So a lot around Nuxt has been around making that really possible. So we auto import composables throughout the application. We expose them and lots of other helper functions to TypeScript as auto as globally available. But then we work behind the scenes to import them just where they needed in your code. And a lot of that kind of work has been powered by Vite, which is the new default bundler for Nuxt 3. There are actually two builds in Nuxt 3. There’s the build with Vite or Webpack. You can choose Webpack for the Vue part of your app. And then there’s a separate roll-up build that turns the whole thing into a server if you’re using that. And Vite provides lots and lots of capability to do transformations. So to inject code, auto import components, remove whole sections of code that aren’t being used, perform all kinds of interesting optimizations, we really leaned heavily on that. I think the other main thing that I haven’t mentioned so far is TypeScript. So we’ve tried to do some really cool things with TypeScript. So for example, if you have an API in your app that returns something like an object, we can then actually infer that for you. So when you’re using the fetch API in your app, it will be automatically typed as the kind of thing that that endpoint returns and lots of other kinds of things like that. So you can inject something in a plug-in, for example, and then that will automatically be inferred and available throughout your app. So when you access that injected property, it’s the correct type. So things like that where you really don’t even have to think about TypeScript, which writing a module augmentation by hand is a bit scary. And anyway, we make it, so you don’t need to. It just happens in the background. So there are lots of really cool DX improvements powered by TypeScript. I could just keep on giving examples but.

Chuck Carpenter: [16:45] That’s a good sell right there, like simplifying TypeScript types and better inference there, rather than trying to wedge things in and around and pick and omit and partials and blah blah, blah, make this thing here also be the thing that I’m expecting there, instead of those two things clashing with each other. Yeah, that sounds really nice from a developer experience standpoint.

Robbie Wagner: [17:09] I’ve been trying it the big thing for me, as Chuck knows, from the React side of the world, and I guess composables are a little different. I’m not a huge fan of like hooks and React and this is kind of the same kind of thing like with composables because I like magic and I can define this object with these properties and it grabs my async data and stuff for me automatically. It’s not that it’s any harder necessarily. It’s just a switch of the mind. But that being said, I have been using it and I’ve been working on converting our website to use it, and everything mostly works out of the box except for images because we’re using the Nuxt image stuff and it doesn’t support static images yet, or static sites, I guess. I mean, all images are static except.

Chuck Carpenter: [18:01] Except for the gifs that I add as Easter eggs all over.

Daniel Roe: [18:07] Absolutely gifs are great things. Well, I mean, expect progress on Nuxt image pretty soon.

Chuck Carpenter: [18:14] You heard it here, folks.

Daniel Roe: [18:16] Yeah.

Chuck Carpenter: [18:16] Now you’re on the hook. So I think today is August 23. Just giving you a hard deadline.

Robbie Wagner: [18:22] Well, it won’t be when this airs. It’ll air in a couple of weeks, so by then it’ll be ready, right?

Chuck Carpenter: [18:27] Yeah. Perfect.

Daniel Roe: [18:28] There is an edge version of Nuxt image. I don’t know if you’ve used it.

Robbie Wagner: [18:33] Yeah, I think I’m using it.

Daniel Roe: [18:34] And it does work for some static providers, but I think you’re looking for the static generate version with spans that will generate images. Just exactly the key thing that we need. There are actually two PRs pending right now. We basically need to be able to render binary data. To pre-render binary data. We can render it, and I think those should do it. So it should be pretty soon we’ll see this coming through.

Chuck Carpenter: [19:03] There we go. That’ll take us over the edge. Get us there.

Robbie Wagner: [19:06] Yeah, but yeah, I guess I tried Nuxt Bridge a little bit, but I couldn’t do that because it didn’t work with Nuxt Content. So I didn’t fully go down that path. But for the person that’s trying to convert to Nuxt 3, can you talk a little bit about that process? Like, should you use Nuxt Bridge for a while and kind of do it a little bit piecemeal? Or should you try to jump all in or what’s the best path forward?

Daniel Roe: [19:30] It’s tricky. So I’ve migrated projects from Nuxt 2 to Nuxt 3, and I’ve done it both ways, so I’ve moved to Bridge. Bridge is intended to make it easier. It’s not intended to add an additional hurdle in moving to Nuxt 3. So if you want, you can adopt Nuxt 3 straight away. But Bridge can be a way for you to test and see what bits of your code might need to change or might need to be adapted. And it might give you a way of testing that without fully jumping ship. Because Bridge has a number of parts to it, so you can flip the switches on and off. So you can start by installing Bridge with all the switches flipped off and then just one by one, flip them on and see has anything broken. Is there any issue here? It’s a useful tool for figuring out what might need to change as you migrate to Nuxt 3. I think I would probably migrate one team to Nuxt Bridge over lunch. So we doing a day of consulting. We took a break for lunch. I had migrated that stuff to Bridge and put a PR up and they were ready afterwards. So it can be quite quick, and migrating to the Nuxt 3 can be fast also In all my code bases, when I’ve done that, it’s resulted in a net loss of line of code, lines of code, because again, everything can be auto imported. If you’ve been using the composition API, then you can pretty much. If it’s pure view composition API, everything should work. You just remove the imports. Yeah. Even between Nuxt 2 and Nuxt 3, there might be some differences when it comes to the behavior of stuff like watch between Vue 2 and Vue 3. And so there may be a couple of edge cases to look into, but generally speaking, I think you’ll face some issues regarding modules, maybe. So there are some modules, depending on what you’re using, so Nuxt 4th is stated to be released soon, I think likely either just before the stable release of Nuxt 3 or just after. But there’s no reason not to move to Nuxt 3. You can implement off quite quickly independently of the next module, but that will be mostly what people face. They’re using some dependency that’s still in Vue 2 or Nuxt 2, and that’s what’s going to hold them back rather than the framework, I think. If you are wondering, check on Discord. I’ve heard the Nuxt Discord is a great place to ask, and I’ve heard stories that really varied from people finding it, it took them a long time, to people finding it was pretty instant. That leads me to think it’s very dependent on the project.

Robbie Wagner: [22:09] Yeah, I think it probably is mostly dependent on other modules, especially if you’re using some of the not kind of Nuxt.js slash whatever, like things that might not be 100% what’s the word? Endorsed, I guess, by the team would be potentially stuck because they don’t update it as much or whatever. I think that’s probably where you get into the most trouble. Or if you had your own modules updating, those would be important because otherwise, it would not work.

Daniel Roe: [22:42] I do love writing modules as in a code base. It’s one of my favorite things of building, I guess. You experience it all the time when you’re writing code and you write it, you make it work, and then you start abstracting it and making it simpler and making it usable. And ideally not too soon, right? You never go direct for the abstraction. Always implement it. Personally, I would say always implement it, always have it working, even if it’s in a couple of lines in your node modules directory, or just hacking in and hard coding whatever in the line it needs to be. And then when it’s working, and you’re pretty sure it’s all good, you start abstracting and making it beautiful and lovely. I know not everyone does it that way, but that’s my preferred way, and I love doing that as well for features. So building in. Okay, how do I make a sitemap work in my app? Okay, let’s extract that into a module. How do we embed this chat widget? Okay, well, what do we need to do to make that generic so I can use it anywhere? And that process is quite fun. So pretty much any project I would be working on would have a sort of list of internal local modules, and I guess you probably would be the same, Robbie?

Robbie Wagner: [23:52] Yeah. It depends on the project, but we use modules a lot for and I don’t know if this is valid in the new world as much or if there are other thoughts around it. But for like splitting an app into basically maybe not each page. But like a page or two of the app logical sections so that a team could work on that module and add features to it and not mess with another module. And we had a common one as well for common components and things, but.

Daniel Roe: [24:25] You are going to love the feeds feature of Nuxt 3, then. Have you looked at Extends at all?

Robbie Wagner: [24:30] I don’t think so.

Daniel Roe: [24:31] It’s a really common use case that somebody will want to have a module that say register some components or some styles or some pages, some plugins, and then there might be another module that does the same, but rather bits of the app. Now you don’t need to make a module. You can point to any directory that contains a partial Nuxt project or a full one. In fact, multiple such directories and they get merged into a final Nuxt project for you. Which means you need to write no code. You just create a directory. Create a plugins directory. Stick a couple of plugins in and point to that directory that extends from this. It will be like those plugins were part of your project to start with, and all the autocomplete works still as well, again just like they were and you can distribute that as an NPM package and again do exactly the same thing, point to it, which I think that might make life a little bit nicer as well.

Robbie Wagner: [25:24] Oh yeah, that simplifies a lot of things.

Chuck Carpenter: [25:27] Yeah, it’s like a much simpler like microfront architecture just extending from others, and then it sounds pretty nice that it compiles into one project too and that’s all just smart happens behind the scenes and gets done for you. It’s interesting. I wonder like how does that work from a testing perspective though? Too right.

Daniel Roe: [25:47] Well, Nuxt is always interesting. From a testing point of view. So component testing, the idea of testing is just an individual thing that you create really only works if there is no framework. So it works at its simplest form. I’m not saying it only works, but in its simplest form it works when you have no framework. So you’re only using utilities from Vue, or you’re only using libraries which are pure Vue, and you can use view test details, and you can test it. But the moment you stick that into any kind of framework, particularly something like Nuxt, you’re relying on things that Nuxt puts in place. If you’re using data fetching utilities from Nuxt, well, they’re not going to work on their own. They tie into a server and client lifecycle and they depend on flags being set in the broader environment. So we’re working with Nuxt to improve the testing experience and actually get rid of a lot of the things that people have been having to create over the years, like marks that people basically construct bits of Nuxt in their tests in order to avoid having to depend on Nuxt. But that can be fragile. People can implement them slightly differently from the app, and you can have educators. So with Nuxt, we’ve built a version of Nuxt test details that lets you run a Nuxt project and lots of them in your tests. Now Fires up the Nuxt server, provides the context, it can return the HTML to you, so you can make assertions about it, and it can actually do browser testing as well on top of it, so you can make assertions about that and all of that without necessarily opening up a port on your machine. So it’s just done in code. That’s quite useful. What’s coming? So Anthony Fu has created a great little PR, and I have one as well, which is related. What’s coming is the concept of rendering components on the server. So we can actually say in a testing environment, render me this component with these props and it returns just that component with those props rendered and that can then be hydrated directly in the test runner. So it’s end to end in a sense, in that there is a server, but it’s also a component in that it’s just testing this component, it’s not testing everything around it, it’s not a. And then you can perform all the normal kinds of things that you would want to do in terms of just what happens with this individual component and stuff that I do. So that is coming very soon. There’s an open PR, and you can expect as soon as orchestrating the order of the PRs is a difficult task. And Pooya, who is also head of the framework, he is his doctor orchestrator, it’s a tricky one, but we have a pending PR at the moment, which is for Island Rendering. So the idea that you can render individual components, but only on a server at the moment, and we’ll have client islands as well, and those can then be reactive and work part of the rest of your app, but they always get rendered on the server. So that island renderer is probably coming in first and then adapting that. So it works with this idea of testing individual components in dev mode because obviously in production you don’t want someone to say, hey, render this individual component, right? So you have to be very much more specific about it. But yes, that would be a very interesting thing when those two PRs are out.

Chuck Carpenter: [29:07] Yeah, so abstracting away from the ideology of unit testing and of testing like Jest style component render testing, but instead, actually it’s closer to integration testing wherein your app can completely be fired up for you to, like, maybe test flows, and you can boil that down one level to the component itself, but it’s still the real thing. And the context is how a user would interact with it, rather than, did you render? What were your props? What are the underlying things oftentimes tend to be less important in terms of protecting critical paths of your application?

Daniel Roe: [29:46] Yeah.

Chuck Carpenter: [29:47] Okay. Got you. And then the island thing just made me think Astro. I don’t know. They haven’t trademarked that, right? But you know.

Robbie Wagner: [29:55] No, it’s a generic term I believe.

Daniel Roe: [29:57] There’s lots of really interesting stuff coming out around this idea, which I think I can certainly get behind the idea of, despite the fact that obviously, Nuxt is a JavaScript framework, the aim is as little JavaScript as possible. Absolutely. And that is consistent with good user experience I think. You can have zero JavaScript and have a worst user experience because clicking to go from one page to another is not as smooth, or because of the JavaScript framework, you can prefetch things in the background and lots and lots of other reasons too. Right. I happily get into this, but I’ve seen some really bad takes on Twitter about this. But yes, we want to make it as optimal as possible, reduce JavaScript. And it’s not only about that. It’s also sometimes about security. Some things you don’t want to be rendered on the client side. You don’t want to expose API keys, but you do need to make live API requests. In some cases, it’s about performance mix, like rendering markdown and highlighting it. Do you really want to have a markdown renderer in the browser? Do you really want to have an entire library of code highlighting again in the browser? It feels like that could be better done on the server. But interestingly, the concept of Nuxt islands that we have, we’re working with at the moment, is almost the opposite of Astro islands. There are other islands of deferring to the server, whereas with Astro, the concept is almost the opposite and the islands of client interactivity. But we’re definitely exploring similar kinds of things, right? Maybe coming out from different directions. And there are lots of other frameworks. So I think it’s a very interesting space to be in and we all learn from each other. It’s great.

Chuck Carpenter: [31:37] Yeah, I definitely think that’s a positive to be taken from all of the newer or not even always newer, but popularizing, additional options. And then sharing some of those concepts, like, obviously by the name Nuxt. Next had some influence early days. We have Remix now and Astro and Solid. Even though that’s been around for a while, it feels like it’s building a lot of momentum. It’s a lot of different takes on addressing various problems. But some of these frameworks will say, oh, Redwood JS I got to say that. Tom Preston Warner, anyway.

Robbie Wagner: [32:20] Got to say his name every episode.

Chuck Carpenter: [32:22] Every episode. Yeah, exactly. Just to see if he’s paying attention. So yeah, all of these different frameworks and their intentions of solving some similar and some different problems, there’s some positioning too, like, oh, our framework is really great for startups are really great for having a server-rendered really fast, static content site, that kind of thing. So I’m wondering, Daniel, do you think that and it might change because based on how many things have changed with Nuxt now coming into N3, but is there like a target for the kinds of apps that you think Nuxt is best suited for and Nuxt 3 specifically?

Daniel Roe: [33:04] That’s an interesting question. I think I would never want to say that something is best for in all use cases. You always have to weigh up a project and figure out what it’s meant for. But we are as much as possible, trying to make Nuxt work for a pretty wide range of use cases. So it was Nuxt 2. I think the targets that you’d be aiming for were maybe the top level targets would be they could have a static site. And there are two kinds of static. You could have a static site that is a static site that is just rendered in advance, but all the API calls are live. And you could have a static site that was full static site which is rendered in advance. And then also all of those API calls are rendered down to JavaScript payloads. You could have a full server-rendered site, and you could have a client-side app. And I guess mostly Nuxt was usable right across from enterprise, right down to hobby bloggers of people who just wanted to get something up. Nuxt 3 has a focus on hybrid. So the point of that is that you can be very granular if you want to be. You can say, I want to prerender these pages. These pages I want to statically pull out the payloads so that you don’t have to refresh on demand. These pages I want to be client-side only. These pages I want to have core sellers for. And you can create these root rules either on individual paths, but also as a whole. We already have caching rules applied that basically mean you can have virtually out of the box, just enabling a flag. You can have amazing performance with a fully server-side rendered app. And that’s even if you have costly API calls because we can use something like we validate strategy for it, that kind of granularity means I don’t really feel there’s a red line where you think actually Nuxt can’t serve this audience. Nuxt has always been workable for enterprises, but I think a lot of features we’ve been working on increase that particularly e-commerce sites that are needing to really benefit from that kind of server-rendered. It has to be personalized, it has to be very much, but also it has to be really fast, and it can’t be some server somewhere else. It has to be to take best advantage of some of the networks that are out there at the moment. But I mean, the idea is also it’s really accessible and easy to get started with, and I think a lot of the auto imports and the TypeScript stuff, this hopefully makes it even easier for someone to get started with it.

Chuck Carpenter: [35:50] Yeah, okay. Yeah, I can see the DX improvements make it very approachable for someone who is familiar already with you and Nuxt maybe in general and say like, well, this is the tool that I’ve got. I’m just making a content site, but it’s very simple, and this tool is also simple. And then just improving the process for me, but then being able to have a diverse set of options and performance-based things and so on and so forth for I think I kind of nailed you on a vertical, a little bit enterprise e-commerce sites. Like, oh, it’s a great framework to choose for those things because we’re solving abc problems that you might be seeing now. And an upgrade is great because we’ve made it even more robust for you. So we improved your DX, and we’re improving the performance of the application side, too, especially when you’re talking about the serverless application side of things, where you might need to fire up a server to quickly render a page for cash moving forward. Well, you’re paying a play there. So if you’ve made it cheaper for my organization to use this, and there is an impetus for moving up right there, and there’s an impetus for exploring the framework from somewhere else as well, too. If it’s a cost control change, then why not?

Daniel Roe: [37:13] I think another interesting thing which I have not mentioned so far, is that the Nuxt server is meant to be cross-platform in terms of where it can be hosted. So it can be obviously hosted in a purely static environment. So that goes without saying. If you have a statically rendered site, but if you have any kind of server components, even if you’re saying we statically render all the HTML in advance, but we also deploy an API alongside it, or you’re saying we render some pages or whatever combination it is, we can deploy to Vercel and Netlify I’ve to their normal platforms, but also the edge rendering ones. We can deploy to Cloudflare. We can deploy to DigitalOcean app service and AWS and anywhere, basically. And the aim is that it should work. You should not be locked in. You should be able to use all the features that Nuxt offers anywhere, which I think is a big I hope it’s a big reason to adopt it because you can use a platform without being locked in. Obviously, you want to take advantage of the platform you’re on, but I think that’s also a plus.

Robbie Wagner: [38:21] Yeah, it’s nice to have options that are not Vercel all the time. Nothing wrong with them. But they’re kind of the big player that has sponsored everything and tried to get everyone over to their side. And that’s fine because they’re a good product, but you never know what the future might hold. So not being locked in is super nice.

Daniel Roe: [38:41] I love Vercel. Nothing against Vercel at all, but absolutely, you don’t want to be locked in anywhere. In general, I think I always like working with personally using suppliers that win me over because they have the best of whatever it is. They’re able to meet my needs. It feels great, it’s magical, whether that’s experience or price point or whatever it is. But they’ve won me over. I don’t have to stay with them. I’m not forced or coerced into it. I didn’t make an early choice, and now I’m reaping the whirlwind and having to pay the price for it. I’m with them because I want to be. I think that’s the best scenario. Right. You have the power to choose if you’re choosing the platform you feel is the best. And I can’t think of any platform that shouldn’t want that. Right. I can’t think of any platform that wouldn’t want that free choice.

Chuck Carpenter: [39:32] Yeah, I’m not sure AWS wants that. I don’t know if you’ve been on their dashboard any time recently, but it’s like everything is really hard to do. To get information is hard to do when you have an issue and an error.

Robbie Wagner: [39:45] That’s what they want, though. They want it to be hard so that they can charge you lots of money without you knowing its secret.

Chuck Carpenter: [39:51] Well, that’s what it is. Yeah, it’s hard. And there’s an error, and you’re still triggering a charge and you didn’t realize because you didn’t spin down the right stuff or, yeah, had that happen once or twice.

Daniel Roe: [40:01] It’s so difficult, actually, the console and there’s sort of different regions as well. You think you know what you’re going on and then you realize actually there was another region because when I clicked to sign up the provisioning for that domain, it actually needed to be in a different region and its produced VPCs and stuff over there as well. And yes, I bought it down some of those rabbit holes too.

Chuck Carpenter: [40:26] Yeah.

Robbie Wagner: [40:26] I still can’t even sign up because my account got banned forever ago because I got charged a lot of money and was just like, no, not going to pay that. So.

Daniel Roe: [40:35] How much? I want to know how much at this point.

Robbie Wagner: [40:38] Well, no, this was before I was doing big client work. This was like hobby projects, like out of school kind of thing. And it was like a thousand or two, I think, but it was way more than I had at the time. And I was like. I’m not paying this, I’m just going to stop.

Chuck Carpenter: [40:54] Based on a mistake. Because they have a complicated interface, right?

Robbie Wagner: [40:58] Yeah.

Chuck Carpenter: [40:59] That’s why when you have like, Vercel built on top of AWS as like sugar to give you a nicer interface and keep you within guardrails, then. Oh, okay. Now it’s worth paying for because now I don’t make that mistake. It’s cheaper in the end.

Daniel Roe: [41:15] Yeah, I think there’s definitely something to think there also in terms of how incentive structures within Amazon have created this because when you have individual teams who are motivated and who have ownership of individual pieces, you don’t necessarily have the incentive of that single vision. That’s going to make things integrated and easy to use from that point of view. Instead, you have competing projects which have every incentive to make their individual offering better, but not necessarily the sort of big picture. I say this was very little knowledge of how AWS works internally, but I think that is how it goes. Whereas Vercel is the opposite. It’s absolutely top-down. Single vision. I mean, even the logo is a triangle, and I would totally read it, but it is that simplicity. How do we have a single vision and then implement it?

Chuck Carpenter: [42:14] Yeah, there you go. That’s like basically how every startup should work. It doesn’t always play out that way, but any startup single vision and implemented. Robbie and I don’t even have a single vision, so I don’t know.

Robbie Wagner: [42:26] Well, now we do. We’re going to be a Vercel competitor and make ours a square.

Chuck Carpenter: [42:30] Simple.

Daniel Roe: [42:32] The next dimension. I see it now.

Chuck Carpenter: [42:36] Octagon. That’s it, or I’m out.

Robbie Wagner: [42:39] Oh Octagon. Like octopus eight and eight. There we go.

Chuck Carpenter: [42:42] Exactly. It’s a natural move forward. We’ve trademarked the octopus, and so we actually have some ongoing litigation with GitHub.

Robbie Wagner: [42:51] We don’t.

Chuck Carpenter: [42:53] I feel like we got a chance.

Robbie Wagner: [42:54] There’s an Octocat anyway.

Robbie Wagner: [42:57] Right. It’s not an octopus. It’s mixed. Yeah, ours is technically not either, but we won’t talk about that controversy. Yeah.

Robbie Wagner: [43:05] Anyway, let’s get into some whatnot. Do you guys want to revisit some of the things you’re talking about before we started recording or do you want to jump into some of these bullet points here?

Chuck Carpenter: [43:14] Well, like about beautiful Durham, North Carolina.

Robbie Wagner: [43:19] Well, not North Carolina.

Chuck Carpenter: [43:21] The same. Right?

Robbie Wagner: [43:22] Durham, North Carolina is not the same.

Chuck Carpenter: [43:24] No. I thought by his accent, clearly he’s from North Carolina, but I guess I got that wrong. Well, I will ask the question, because I always ask British people and I’m usually disappointed with the answer, but do you watch follow football? Proper football?

Daniel Roe: [43:39] Well, first, I just want to correct you on something.

Chuck Carpenter: [43:42] Okay.

Daniel Roe: [43:43] Actually, I am American.

Chuck Carpenter:[43:44] Okay.

Daniel Roe: [43:45] I was in fact born in Alabama.

Chuck Carpenter: [43:49] Yeah, see, I got the accent.

Robbie Wagner: [43:51] Would not have guessed.

Daniel Roe: [43:51] North Carolina is not entirely wrong.

Chuck Carpenter: [43:54] Not entirely. Not far off all things. You are from the south.

Daniel Roe: [43:58] Absolutely. I mean, I am also British. Do I follow football properly? No, I don’t. I follow it when it’s the World Cup. Of course. I love watching a game of football. That’s fun. But I’m.

Chuck Carpenter: [44:13] Yeah, not like an avid fan. Got you.

Daniel Roe: [44:15] No.

Chuck Carpenter: [44:15] You’re not Sunderland until you die.

Daniel Roe: [44:17] I’m not Sunderland til I die. Absolutely not. And I do have a friend who is an avid fan of Manchester United. So we’ve started watching.

Chuck Carpenter: [44:29] That’s Eric Cantona right here.

Robbie Wagner: [44:32] How can you tell from the little rendering there, like, who it is?

Chuck Carpenter: [44:36] Because I know it’s like they’re still from a famous game in, like, 97, I think. Okay. And he’s the king. Eric is the king, but that’s his nickname. And they sing the Twelve Days of Cantona at Old Trafford But I digress here for a moment. So you’ve been watching. Did you watch yesterday?

Daniel Roe: [44:57] I did not, because my friend is traveling and wasn’t around. So that shows you how uncommitted I am to the concept.

Chuck Carpenter: [45:05] It’s still open for you. I always say, if you haven’t been to the stadium yet, you could really end up supporting anyone.

Daniel Roe: [45:11] Yeah, it’s true. You might be chatting in a few weeks time, and I won’t be able to stop talking about it.

Chuck Carpenter: [45:18] I don’t know. I’ll be pleasantly surprised. So I got to bring anyone I can on board. Plus yanks, which you are. You’re a rare yank who even just watches at all.

Daniel Roe: [45:29] Absolutely.

Robbie Wagner: [45:31] So some of the things you mentioned that I might be more interested in, you talked about you had a holiday in Portugal sometime recently. Tell us about that.

Daniel Roe: [45:41] So, basically, a lot of things have changed in my life with having a two-and-a-half-year-old and also before he was two and a half, things changed as well. But definitely holidays make a little bit of a different thing. We actually spent some time going to a conference. I was at Vuejs Amsterdam, whilst also staying with family in Holland. The only problem is we came back, and my wife was more exhausted than before we went on holiday, owing to the fact that I was absent a fair amount of the time for the conference and the fact that holiday isn’t necessarily stressless. So we took the decision to go a couple of weeks later for a proper holiday in Portugal. So we went to the south coast. It was lovely at a time when the rest of Europe was boiling up. The Algarve was wonderful, temperature-wise. The wind from the sea brings it right down, so it was probably high 20s, early 30s degrees centigrade, which was very pleasant. So it was just nice. And we were at a place where my little son could run around at great speed, even managed to get I think it was there that I wrote the server components PR, and not sure if it was the full static implementation as well, but it was definitely conducive to good work, both for coding and also for writing which is what my wife does. So it was a great time, and it was holiday, but we tacked on an extra week because it was so nice. A week of work, but just in a great environment and a little taste of nomad life, I guess. A week.

Chuck Carpenter: [47:27] Yeah.

Daniel Roe: [47:28] But it was totally worth it. You see why Portugal is drawing in the digital nomads?

Robbie Wagner: [47:33] Yeah, it’s very popular right now.

Chuck Carpenter: [47:35] Yeah. They have the digital nomad visa, so then Germany currently. And I know some other places are starting to do it more along Eastern Europe, and Italy is supposed to at some point, too.

Robbie Wagner: [47:46] It’s also cheaper than some other places because I know I’ve seen a lot of people someone posted on Twitter. I don’t know if it was anyone that anyone else would know, or just someone random, but they were like, yeah, my gas bill and I don’t know, certain things for the next three months are, like, the cost of just living in Portugal entirely for those three months. So I’m going to do that and just left and do that.

Chuck Carpenter: [48:12] Yeah. That’s funny. Yeah, I’ve always heard good things.

Daniel Roe: [48:17] Such an indictment, though isn’t it. Great do that if saves energy, I guess, which is good for all of us and gets you the chance to live in Portugal, then why wouldn’t you do it?

Chuck Carpenter: [48:29] How was the food?

Daniel Roe: [48:30] The food was lovely. Let’s see. It was near the sea, so there were obviously interesting fishy crustaceany type things to have. I particularly like this dish. What do they call it? Something like black pork. Black pork. Does that ring any bells at all?

Chuck Carpenter: [48:48] It doesn’t.

Daniel Roe: [48:49] Basically, it was like it had the taste of bacon ish, so it had this sort of very rich, very fatty, very creamy, and utterly moorish cut of pork. And it was on this sort of risotto with green vegetables and things, so I felt terribly like I didn’t feel too bad about myself. That was amazing. And the way to even try to dissuade me from it, he’s like, well, not everyone likes this, but it was delicious. I highly recommend it.

Chuck Carpenter: [49:17] Yeah. Okay. I’m going to have to look up that recipe. I can’t say that I’ve had any Portuguese food that I can think of. I mean, I’ve been to Brazil. Maybe they have some flavor of it. And I’ve been to Spain.

Robbie Wagner: [49:27] There’s some crossover.

Chuck Carpenter: [49:29] Yeah. Which I found Spanish food kind of bland. Sorry. It’s a beautiful country, but I found they don’t like a lot of very much seasoning. And I was saying to you earlier. I liked the British food. I like hardy things, like the bangers and mash, good. Bubble and squeak good. The Indian food is obviously amazing. Yeah. I liked everything there. In Spain I don’t know what it was. When they put wet tuna on pizza. I don’t know. I don’t know what they know about food. Yeah.

Robbie Wagner: [50:00] Yeah. That does not sound.

Chuck Carpenter: [50:01] They always give you a salad with meals, and then in the salad, there’ll be, like, a scoop of wet tuna, and it’s just a can of tuna that didn’t drain, and they scoop it. I don’t know. So I’m glad to hear that Portugal has got a better grasp of delicious culinary options. And I like pork. Why not?

Daniel Roe: [50:23] Absolutely. Some nice dessert wines as well. Even the not port ones. I think my favorite dessert wine in the world is from Hungary, though I think I’m a big fan of the sort of Tokaji grape and particularly the dessert wines made from it, Aszú is.

Chuck Carpenter:[50:43] Lovely, not had it. We could really go off script and try what is it? Wine Web and Whatnot?

Daniel Roe: [50:50] Absolutely.

Chuck Carpenter: [50:50] Some episode or.

Robbie Wagner: [50:52] Still W’s.

Robbie Wagner: [50:52] Yeah, still works.

Daniel Roe: [50:54] I can get out of bottles tonight, I’ll tell you. The only issue is obviously I could describe it to you, and you could have to sort of appreciate it.

Chuck Carpenter: [51:02] Yeah. We won’t be sharing any experience. We’ll have to do a follow-up episode with that. We can do like a special edition follow-up episode.

Robbie Wagner: [51:10] It’s all dessert wines.

Chuck Carpenter: [51:12] Yeah, all dessert, plural.

Daniel Roe: [51:14] All. That’s a very very big offer.

Chuck Carpenter: [51:17] That’s right. Turns out, so we tend to do these because I’m on the west coast, in Arizona, so west coast time, so we tend to do these a lot of times at two. My time today is a special bumping it up. Even one. So I’m having some lunch whiskey. I can’t imagine if I just had multiple bottles of wine. Oops. Turns out I’m good.

Robbie Wagner: [51:40] Your day will be over.

Chuck Carpenter: [51:41] Yeah, it’d be over. I need a cot here under this desk and then.

Daniel Roe: [51:45] Good afternoon nap. Definitely.

Chuck Carpenter: [51:48] Then back at it.

Robbie Wagner: [51:49] Yeah. All right, we’re about at time here. Before we end, is there anything we missed about Nuxt? Anything you would like to plug that doesn’t even have to be Nuxt-related or projects you’re working on? I don’t know. Anything you want to say that we didn’t get to?

Daniel Roe: [52:03] So it’s just a bit of fun. But I had Covid about a month and a half ago and basically I was sitting around thinking, even though I love working on Nuxt any and all hours, I thought, I’m going to do something different. I’ve got Covid. I’m ill. I just want to do something. So I wrote this little library called Magic Regexp and it lets you write regexps in human-readable format. So you can say something like create regexp. Exactly. And any of row, carpenter, whatever you can write. It’s sort of natural language, and it compiles down to a pure regexp, so there is no performance hit in your project. And it provides you with type-safe access to that regexp, so you get access to named groups. For example, the response from a dot match is typed fully. We have an incoming PR which has type-safe access to anonymous groups. So even like 0123 is type-safe. You can’t access something that isn’t produced by the regexp. And you can even see in a hover when you’re accessing that individual element of the match, which bit of the regexp it’s coming from when you hover over the create regexp core. Not only have we built or have I built the regexp builder in code, but I’ve also built it in TypeScripts so you can see in the hover what the generated regexp looks like. So anyway, it was a fun challenge. Check it out. Its regexp.dev is the website.

Chuck Carpenter: [53:42] Oh, man, I would definitely use that. I hate writing regex.

Robbie Wagner: [53:46] Yeah, I’m terrible at it. I can do start and end is about all I know in regex. Like, start with this and end with that and the rest. I used to use a thing called Regexper, I think, or something like that. But it sounds much easier.

Daniel Roe: [54:01] So, yeah, check it out. I should say another guy as well has joined me on the project, and he’s been doing some really cool stuff called David Tai. But yeah, check it out. Really fun things.

Chuck Carpenter: [54:11] Awesome. Thank you so much.

Robbie Wagner: [54:13] Yeah. All right, well, thanks, everyone, for listening. If you liked it, please subscribe, and we will catch you next time.

Chuck Carpenter: [54:22] Thanks for listening to Whiskey Web and Whatnot. This podcast is brought to you Ship Shape, and produced by Podcast Royale. If you like this episode, consider sharing it with a friend or two and leave us a rating, maybe a review, as long as it’s good.

Robbie Wagner: [54:37] You can subscribe to future episodes on Apple, Spotify, or wherever you get your podcasts. For more info about Ship Shape and the show, check out our website at shipshape.io.