DejaVue

Welcome to the fifth episode of DejaVue! While Michael is on paternity leave after becoming a father, Alex is joined by a special guest, Patrick van Everdingen, Full Stack Developer, Speaker, Panel Host an Co-Founder of CareerDeck.

In this episode, we talk about how Patrick started his Vue- and Nuxt-based side project, CareerDeck - and how it grew from an idea at a pool in Italy to a full-fledged application. From the initial idea to the current state of the application, we discuss the tech stack, the challenges, and also the future of CareerDeck.

Learn why Patrick chose Vue and Nuxt, why decided to rebuild the application again and how he uses AI to create real value for the users of CareerDeck.

Eventually, Patrick turns the tables and asks Alex about his thoughts on the future of Nuxt and how it compares to other frameworks like Laravel or NestJS, as well as the role of plain Vue in the ecosystem.

Enjoy the episode!

Chapters
  • (00:00) - Chapter 1
  • (00:00) - Intro
  • (01:29) - The backstory of CareerDeck
  • (06:17) - What makes CareerDeck more than just a GPT wrapper?
  • (11:00) - Rebuilding the application again with Nuxt UI
  • (14:39) - The tech stack of CareerDeck
  • (19:29) - Building a job interview simulator
  • (25:07) - What are Server-Sent Events?
  • (26:47) - The difference between WebSockets and Server-Sent Events
  • (29:38) - Implementing SSE with Nitro
  • (31:59) - New folder structure in Nuxt 4
  • (34:02) - How does Nitro compare to other frameworks?
  • (36:14) - Will Nuxt be the next Laravel or NestJS?
  • (41:17) - Why would you choose vanilla Vue over Nuxt?
  • (47:06) - Your benefits as a newcomer to a framework
  • (49:44) - Where can people reach Patrick
  • (51:22) - Outro

Links and Resources


Links marked with * are affiliate links. We get a small commission when you register for the service through our link. This helps us to keep the podcast running. We only include affiliate links for services mentioned in the episode or that we use ourselves.

Creators & Guests

Host
Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
Editor
Niki Brandner
Sound Engineer
Guest
Patrick van Everdingen
Speaker, Panel Host, Full Stack Developer

What is DejaVue?

Welcome to DejaVue, the Vue podcast you didn't know you needed until now! Join Michael Thiessen and Alexander Lichter on a thrilling journey through the world of Vue and Nuxt.

Get ready for weekly episodes packed with insights, updates, and deep dives into everything Vue-related. From component libraries to best practices, and beyond, they've got you covered.

Alex:

Hey, everybody. Welcome back to Deja View, your favorite Vue. Js podcast. You just don't know it yet. Or maybe do it because, well, we're quite some episodes in already and maybe you've seen, well, where where is Michael?

Alex:

Right? If you haven't joined, usually, it's podcast Michael and me doing, sometimes with both of us, sometimes with some guests. And somehow, Michael is not here today, and that's because he became a father recently. So congrats to him. He has a well deserved break.

Alex:

And instead of Michael, I have someone else right to this side, this side, wherever my finger's pointing on. And, well, he's a speaker. He's a panel host and also a full stack developer. Welcome, everybody. Patrick van Eweddingen.

Patrick:

Woo hoo. That's a good pronunciation.

Alex:

Thanks. Yeah.

Patrick:

Very good.

Alex:

But my Dutch is getting there at some point. So how are you doing, Patrick? How how are things?

Patrick:

Yeah. Things are pretty well. Just got back from a, holiday, a short trip to Naples, Italy with my mom. It's really great. Yeah.

Patrick:

You always, have have so much fun in Italy. Good food, good weather, and it was good to be away from all the dreary, gray weather we have in Amsterdam right now.

Alex:

Just want to say, like, oh, looking outside, it's, like, cloudy, rained a few, minutes before, like, Italy, sunny, warm. Yeah.

Patrick:

It's good for them. I mean, it's such a crazy difference from what we had, like, a couple of weeks ago. 24 degrees. It was the start of summer, apparently, but now

Alex:

it's all Back to winter.

Patrick:

Back to winter. Yes.

Alex:

Yes. Oh, but that's how it's going sometimes. But, yeah. Okay. So today, the 2 of us are here.

Alex:

And, Patrick, you've you've been involved in lots of things. I mentioned before, okay, you you gave a big talk on meetups. You were a panel host at the DevRel conference, so we saw each other there too. And you are also building a side project. So I've seen it especially when you, like, hit your, for example.

Alex:

It's like the first and maybe also the only link popping up there. So tell us a bit more what you're doing there.

Patrick:

Yeah. That's a very good question, Alexandre. I'm, yeah, for starters, I am a full stack developer in Nuxt, but I'm also very passionate about, career and personal development in regards to, how do you advance your career, what can you do to improve yourself on technical interviews. And my passion for this topic started, I think a year ago, when my girlfriend and I were on a holiday in Italy again.

Alex:

I see a pattern. Yeah.

Patrick:

Yeah. And we talked about, her work because she works as a, a real counselor, a personal development counselor at the university in, in Holland. And we talked about, how can we help your students improve writing cover letters and resumes using generative AI? It was the the the wave of generative AI. AI was everywhere.

Patrick:

And we experimented a bit, at the pool we were staying at, at the holiday house. We, we had we were doing experiments with JetGPT and she was like, hey, this is a very good way, a very easy way to help students with their writing because, if I'm honest, writing a good resume with the correct bullet points, using the correct ATS keywords, writing a good profile description about yourself, It's something that most people are not super good at or they're not enjoying writing things about themselves, you know? Sure. Most of the, people I know, my friends, when they're writing a resume, they write things as on their work experience, and they say, like, I worked as a, manager in this in this company. But you also need to list your achievements, list your responsibilities.

Alex:

It shouldn't be too long it shouldn't be too long or too short either. Right? That's that's another thing. Like, it should hit the perfect line for all the achievements of not like in 10 sentences, but bullet points. And, yeah, I I see the point.

Patrick:

Yeah. And and and most people think, alright, a resume or CV is a biography. You need to write everything you did in your entire life. But, actually, it's not. It's a, marketing tool designed, yeah, to gauge your the attention of a recruiter, of a hiring manager.

Patrick:

And this person has only 10 seconds to scan your resume briefly. So what generative AI is very good at, in my opinion, is as is writing these things based on the prompts you provide. So long story short, we, found out that it's a really great way of, empowering and helping students with writing cover letters and, resumes. So the thing is, at first, we wanted to build something that would look and resemble a Notion app a little bit. At first, our first MVP was a word Notion like clone that you could use to edit your cover letter.

Patrick:

We soon figured out, well, this is just a GPT wrapper. It's just it calls the OpenAI API and it gets a response, but everybody can do that. Everybody can go to JettyPT and write their user on prompts and write a resume and cover letter. So we want to expand this experiment. It slowly started to turn from an experiment to a real product that we didn't intend to build, but There you are.

Patrick:

Building. Yeah. It always goes like this. And what we build is a tool that helps you get a cover letter, resume, but also help you prepare your job interview, help you with negotiating your salary. It's actually, it's a career platform where we aim to help you from the moment you find a job description or a job listing till the moment you signed your contract with the company.

Patrick:

And this side project turned into a huge monster.

Alex:

So many do. Yeah. Fair.

Patrick:

Yeah. This turned into a product that we're currently testing with, an audience of about 50 testers. It's called Career Deck, if you're interested.

Alex:

Link is in the show notes, of course. Very important.

Patrick:

Yes. Yes. Put it in there. Shameless plug. But, yeah, it's it's it's, really cool to start with a small MVP at the pool in Italy, and we now end up with something that, we might see as a permanent side hustle.

Alex:

Yeah. Really nice. And, like, 2 questions came up straight away from you. You said that, okay. 1st, that Notion like clone was, like, more of a GPT wrapper.

Alex:

You said you don't, like, you don't want that because I mean, to be fair, especially with the whole, like, hey. I I hype. We've seen so many, like, just gpt wrapper, and then when, I don't know, plug ins came along and people developed more and more, all, like, these, like, businesses or side hustles slowly died. So what makes the platform, let's say, the app different than just a GPT wrapper?

Patrick:

That's an excellent question, Alexander. That's very good. So what our platform does differently are a couple of things. First of all, it uses retrieval augmented generation, a technique in large language models, to come up with answers based on a custom knowledge base. So what I like to tell to my friends at parties and birthdays like, Okay, I'm doing the technical procedures, building the entire application.

Patrick:

But my girlfriend, who is a real expert in personal development and career coaching, she knows what to put in the prompt that we're sending to GPT. She knows what the first paragraph of your cover letter should look like, the second part. So, we use our own markdown files, which contain all of the business logic, so to say, and we use that to generate, content. So, yes, our product is partially a GPT wrapper, but it uses custom knowledge base. It uses web loaders, which means that we can turn a URL into a embeddings vector store.

Patrick:

We use that to compare answers. We can even use that to give recommendations about job listings if a job is good for you or might not be a good idea for you. So what I'd like to tell people, generative AI is a augmentation of a web app. That's my big philosophy. Use it to improve existing software, use it to come up with content, but not just use the Revver itself, use it to augment your user experience.

Patrick:

That's the important part. So what we're also doing is not just generating content on the fly for cover letters and resumes, but we're also providing our users the possibility to practice a job interview before you have to actually interview yourself.

Alex:

-Oh, okay.

Patrick:

-So this ties in with the concept generative voice samples generative voice samples to do things. So what we're actually doing is replicating what my girlfriend actually does for her job at university. In there, she also performs mock interviews with her students. She helps them out with, all kinds of things, prepare them for a certain role by acting as a certain manager in the company. So there's much more than just using GPT to generate documents.

Patrick:

It's also possible to do all kinds of crazy things, and and that's exciting.

Alex:

It sounds like. Yeah. I mean, also, you're I already sense you're really passionate about it and that that's always amazing. And I think in here, like, I I want to highlight that. It's very important.

Alex:

Like, it's a nice symbiosis of, like, somebody who is, like, an expert in a expert in a certain area, in this case, your girlfriend,

Patrick:

and with someone who

Alex:

who can use

Patrick:

that knowledge and

Alex:

enable to, like, build a product with that. And I think that combination is, like, really valuable for people starting their own things that, like, you have, like, one person ensuring that the technical side goes well and the other person ensuring, okay. Awesome. But here here's my domain knowledge. Here's what I know, and to to make that even bigger because, I mean, technically, how it sounds like right now when, like, more training and with more data, even go further and say, okay, what your girlfriend's doing at university, then she could technically say, okay, students, here's the tool, fill it out.

Alex:

And for any questions, consult me. And that's, of course, way more scalable.

Patrick:

Yeah. That's true. That's true. Yeah. I mean, she gives, workshops and, and lessons, college lectures to a group of 10 to 20 students, and but she has no time to help them out individually on their own.

Patrick:

And she actually told some of her students like, hey, go to our projects and try to see what you can come up with and use that instead. And, feedback so far has been quite, quite positive. There's always room for improvements. I'm also currently going through a major refactor. I'm actually building the entire application all over again because, yeah.

Alex:

The tech depth got surreal. Sorry. What? The technical depth got surreal or what?

Patrick:

Technical depth was also, there has been one big, game changer that didn't cross my path when I initially started this whole journey. Last year in the summer when I started, I thought, well, let's build my own UI library. I can surely do that. Right?

Alex:

Yeah. Of course. Of course. And then we end up with, lots of more problems than before.

Patrick:

Yes. Yes. Let me come up with more states that you didn't foresee. Let me come up with all these obstructions I do not need. So I try to build a lot of things myself.

Patrick:

I think it's a very enjoyable experience and you learn most out of it, but it also is a massive waste of time.

Alex:

Time consuming for sure. Yeah. Especially if you wanna ship features. I understand it. Like, I don't know.

Alex:

I've worked in like those e commerce shops and people are like, okay, we have our corporate design. Things should go well. But even then, like, there might be some primitives you can use and then just style it. Right? You don't have to reinvent the wheel again and again and say, like, hey.

Alex:

Shoot. A slide or a carousel again. Yeah.

Patrick:

Yeah. Yeah. Yeah. I, I have I've I I initially, I started using a couple of, UI libraries. I experimented with them, but some of them were not really up to my taste or I didn't really like design or the developer experience.

Patrick:

So I think it was around, 2 or 3 months ago when Nuxt UI came across my path. Of course, you know

Alex:

about it. You're there. Yeah. Yeah.

Patrick:

It is such a game changer. It's, I can get stuff much quicker done than initially with my first UI monster. And not just the like the primitives and the components that are provided in the, base NuestUI libraries, I'd say, but also the, the pro components are a huge time saver. I mean, if you have these things in marketing websites, you always end up roughly the same kind of thing. So hero section, a logo, our sale pricing and, what their feedback was from our testers initially was, hey.

Patrick:

We need, I want would like to see what Career Deck does before I create an account and sign up and go through all this hassle. And, yeah, NUX UI Pro just gave me that like, hey, here's this thing you can build for your marketing, page and get it up and running within an hour, literally. I was amazed how quickly this went. Yeah. Super

Alex:

happy, super happy to hear that. Like, we had Harlan, on a couple episodes earlier, and he also said, like, yeah, for his, like, open source software as a service, he also used Nux UI Pro. I also tried a little bit here and there, and I I can only agree it's, it's really worth it. And at that moment, it's not planned at all, but there is a coupon code right now that Sebastian gave me a a couple of days ago, which is just my last name, Lichte. It's also in the show notes again, where you can get 20% discount on Nuxt UI Pro until the end of the month.

Alex:

So if you wanna snag it, there you go. That's your chance. Yeah. Really worth it.

Patrick:

Go for it. It's, I was a bit a bit skeptical at first. I thought, well, there we go. Another, or another, PrimeView. Yeah.

Patrick:

What's what's this next thing? But it's, it's great. It's really great.

Alex:

Especially if you use Vue and Nuxt. Right? I mean, it's it's Nuxt UI. So Yeah. Maybe speaking more of the technical side, you already mentioned, okay, Nuxt UI, we we already, like, got a bit into the detail.

Alex:

Tell us a bit more of the tech stack you used in general to build career deck from, like, 0 to where you are right now or what you will use for for the, like, big revamp and refactor. So, yeah, I'm very curious about that.

Patrick:

I would say that, the tech stack I use is in what I would call in my mind the happy Nuxt Stack, super base because of all these nice things out of the box of database Postgres. It's a blessing to work with. I use Nuxt, of course, Nuxt 3 with Nuxt UI, Tailwind. Yeah. Although, I would say everybody uses this

Alex:

in

Patrick:

tech land, I'd say.

Alex:

I mean, there there are some people not liking it, but, also as someone who follows Adam Webin back to my Laravel times, yeah, I I definitely second that. I still remember where it was just, like, a bunch of less files. But Yeah. Like, whoever likes, BAM more should use BAM. There are no no heartstrings attached to that.

Patrick:

Just build stuff with whatever you like. And, yeah, don't don't get too much into the echo chamber that can be social media and and tech. Just build stuff with whatever you like. That's the the the biggest lesson.

Alex:

Not always like chasing the newest thing. Like, of course, if you have a project, trying out new libraries, I think it's super important because you also want to advance, evolve and see what maybe new things are about. But on the other hand, you want to get things done. So switching out things for the 3rd or 4th time is a bit is a bit tricky, especially if you don't know if you don't know if they really serve the purpose you plan to.

Patrick:

Precisely. Precisely. Yeah. Yeah. It's it's and it's always it's always a matter of hitting the sweet spot of, like, knowing what to use and using the tools that you love.

Patrick:

But also be on the lookout for things on the horizon that could be a possible innovation for your tech stack in the nearby future. There are always these new things going on, especially in AI land. That's what I also learned. Maybe it's interesting to mention, last year when we started, we had GPT 3.5, which was also pretty good. Its context window was a little bit limited, so I could explain what's been going on within Career Deck.

Patrick:

The idea is that you submit a job vacancy, whether it's a PDF or a URL, and then this whole chain of events will happen and generates all your contents and help you write a preparation plan, resume, cover letter, etc. But the problem was that when I started and you would enter a URL, I would have this so called web loader provided by LangChain and AI LLM framework, and it will fetch the HTML and tries to parse it and generates your contents that originates from the original job vacancy. But sometimes this page content would be too long, so it exceeds the token, context limits and it would crash the entire application and you end up with nothing. So at first, I thought, well, what should I do? Should I chunk the page and split it into several, parts and try to come up with, like, a strategy to summarize each of these chunks and then put them together.

Patrick:

But in the end, you end up with more hallucinations than possible initially. So I thought, well, I give up. I'm not gonna do this. I want people just to copy paste it and enter it in a, an input field, but then GPT 4 came out, which has a bigger context window. I think it was like 64 k tokens or 128 k, and it immediately solved my problems.

Alex:

Perfect.

Patrick:

But then I ended up with another problem because then the costs for using OpenAI's API and GPT-four could exceed my Yeah, the cost of generating all these contents and I was like, should I use this? So right now as we speak, I'm currently busy, using another LLM, an open source. It's LAMA 3, just came out this, this week. It is quite on par with OpenAI's GPT 4 in the LLN arena benchmark, and I intend to use this rather than using the OpenAI API. But like with all things in AI, you have to experiment, you have to set things up, and we'll find out in the next episode around the guest if this will succeed.

Alex:

Oh, yeah. Definitely. I also we probably also find it out on, your Twitter and and socials where we can follow you and you share updates over the project. But in the next episode, you'll tell us. No doubt here.

Patrick:

How it went. Yeah. So, one interesting problem I had to tackle, and that also ties in with what we're going to talk about, I think, was, we provide a job interview simulator in, as a module in career deck. And, this is quite hard because you need to do 3 things. You have to do the actual voice recognition, you have to transcribe whatever the user is telling, to the AI assistant, so to say.

Patrick:

This AI assistant needs to generate a response, which is text originating from an LOM, but you also need to generate audio on the fly. So there are 3 things happening, 3 problems I had to solve within CareerDeck to enable a user to talk to the browser, and the browser would talk back. So the problem with these kind of things is that you want to make the conversation feel as natural as possible. It must feel like you're talking to a human, so this means low latency. You need to be able to stream your inputs and send it to the API and then make sure that as soon as OpenAI generates a voice file, it needs to stream it and then start talking.

Patrick:

So initially I thought, all right, sure. I'll try to come up with an MVP, talk to the browser. The browser uses the and then the first iteration of my MVP uses the voice recognition API, which is really good. It's able to transcribe your voice in a quite decent way. You don't need to check whether it made mistakes.

Patrick:

It's pretty good. It was pretty good. The problem was you needed to wait for it to finish transcribing it and then it would send it back. So the latency of in this, it was super high. It was, I think, 3, 4 seconds.

Patrick:

So imagine talking to someone, imagine I was having this conversation and then waiting 4 seconds before I would reply to whatever you have to say. So that didn't work out, didn't really work out that well. So what I did then was use another API. I think it was called 11 Labs. And they have a pretty good API that was able to, start streaming an audio response as soon as the response from the AI would start.

Patrick:

So latency, I could, yeah, decrease it to, I think, a second, second and a half.

Alex:

That's pretty decent down from, like, 4 seconds. Yeah.

Patrick:

Yes. Yeah. That's that's great. Still, you of course, you you always know that you're talking to an AI, so expect, some some bumps along the way. But, there was also I needed to make the user or the client browser to know when is the AI talking, when what updates are we getting out of state of the of the server, so to say.

Patrick:

So I did something really hacky. I, think I returned a stream with Nuxt server routes and then set a custom header and use, a base 64 encoded transcription of the AI response and send that back to the browser. So you would have a, an audio stream getting back to the clients as well as the content written, but you had to mingle it together and it was not really nice.

Alex:

Especially if it's like too long maybe or yeah.

Patrick:

Too long, character encoding, sometimes

Alex:

it

Patrick:

just completely, breaks things. And I also wanted to, yeah, provide a user with a chat gptvike experience. So if the user would click on show transcription, I would want it to make it show up just like you have in chat GPT, like word by word, token by token, and that's such a big mess to do so. So after a while, I thought, what's the what's the possible solution? Would it be WebSockets?

Patrick:

And then I, stumbled across a I think it was a GitHub gist made by Daniel Rowe about servers and defense. And I was like, this is it. This is like I used to, yeah, help the client get a better state recognition. Then I figured out, well, wait, I can also use this to create a nice loading UX for the job applications that I'm fetching. Don't forget, I need to fetch actual live information from a web page.

Patrick:

I need to generate structured output out of this using an AI tool. I I need to generate a networking plan, an interview plan, a preparation plan, a resume, cover letter, and recommendations. All these things can run-in parallel, but they take, well, 3, 4 minutes and there's no way I think you can catch off the state of what's going on on the server route using traditional REST, if I'm not mistaken.

Alex:

I mean, probably you could put it to some kind of like in between cache or, like, Redis or KB or so. So there Yeah. There might be, like, some way to store that and update that and then, like, do some pulling, but it that doesn't sound that nice, let's say.

Patrick:

Yeah. I think I've I I tried to read more about this in my own time. And then, yeah, like you say, it's it's it's quite a hassle to to set up. And with service at events, you can just, yeah, enable clients to receive automatic updates, by using the event source. And then, yeah, you just you have a really nice way of transmitting the state of your back end.

Patrick:

And let's

Alex:

let's, step in there straight away. So maybe let's start one one step earlier because you mentioned service and events multiple times now. Maybe you can give give a rundown just, like, very briefly what exactly service and events are, like, just general overview.

Patrick:

Yeah. So it is a transmission or communication protocol that allows for real time communication by streaming text based data from a server to the client as soon as this becomes available on the server. So the client does not need to constantly pull the server updates, but the server transmits updates over the same connection between the clients and itself. I think that is the gist for the back end and, yeah, you need to subscribe to event source interface on the client. So I think it listens to these, server updates.

Alex:

So basically, the the client like, any kind of client could, like, hit the server out, but the server would send service events and, like, okay. Hey. I'm registered. Please, if there's an update, tell me. And then whenever there is something, then the server will just send it, and the client doesn't have to do, like, as I said, the polling, like, every 30 seconds, every minute, every 10 seconds, get a get new information if there are some.

Patrick:

Okay.

Alex:

Yeah. Okay. And that that all works through HTTP. Right? Like, you don't need it's it's the same protocol.

Patrick:

Yeah. You need to set content type to text event stream, and then it will, encode your event data to your clients. I think also the you can listen for event messages, and then you can use whatever is in the message to optimistically update your UI or set state or whatever. In a certain way, it's sort of resembles WebSockets, but it's not WebSockets.

Alex:

That will be the next question. Like, you mentioned also WebSockets earlier. Like, what would be the difference? Because I, like, I know WebSockets, of course, as well, and probably audiences use them too, like, especially for, like, this I don't know, classic, like, chat, saying, like, hey, send messages, receive messages, and so on so on. So what are the difference what is the difference between SSE and and WebSockets there?

Patrick:

If you ask me, I'm honest, I have no idea. They conceptually look to me as I've never worked with WebSockets in great detail. My younger brother does.

Alex:

Shout out here. Yes. Big shout

Patrick:

out to my younger brother. And he also, by the way, came up with, WebSockets as a possible solution. But I have to cheat. I have to look it up. I have no

Alex:

Like, I I think I I also I don't use servers and events regularly, but I use WebSockets quite a bit. And think SSER only you need like, not bidirectional. They're only one directional. Right? Like, the server can send info, but the client can't send info to the server that way.

Alex:

Right? It's like more like a subscription.

Patrick:

Yes. That is correct. Yeah. And that's also what JetGPT tells me.

Alex:

Yeah. There we go.

Patrick:

Yeah. But, yeah, maybe this was interesting. I stumbled upon WebSockets on numerous amount of, occasions in my career, but that's more because certain technologies already implement WebSockets in the hood. For example, Supabase, you can listen to the real time, updates and that uses WebSockets under the hood. But I've never implemented WebSockets myself.

Patrick:

And I think also when I came to think about possible solutions to this problem, WebSockets just didn't appeal to me at all. No.

Alex:

Makes sense. By the way, talking about that is also now possible in Nitro also for a while, but still to implement WebSockets on the server side, link to one of the videos and the the docs in the description because that's, like, fairly new. Let's say, View just Amsterdam News, so a couple months. But, yeah, I mean, especially if you only need one direction, if you only need, like, okay. The the server has to send it to the client, then then we're fine.

Alex:

Then you don't need, like, to spin up, like, a full duplex connection, do, like, this handshake and then upgrading process. Like, that seems really that's this doesn't seem that lightweight compared to just like, okay, I subscribe. If there's something, let me know.

Patrick:

I think, yeah, that's also the brilliant simplicity of server side events, I would guess. I mean, there's no way for the clients to interfere with whatever the service is broadcasting. Right? Yeah. Yeah.

Patrick:

Exactly. Yeah.

Alex:

And so you said you you're using Service Hunt Events and you found the gist, of Daniel, which is then also linked in, in the show notes if if you still have it, but probably. Otherwise, we'll we'll dig it up. And so you you implemented them in Nitro itself then? Like, you you use them in a in a Nitro, like, Nuxt server route?

Patrick:

Yes. That's correct. Yeah. Yeah. Yeah.

Patrick:

Using that. And then

Alex:

Did did you have, like, any difficulties implementing that? Was it straightforward based based on the gist Or

Patrick:

If I am honest, I think most of these solutions that are not explicitly mentioned in either the Nuxt or Vue docs, it will take a seasoned developer not a lot of time to implement it using Nitro, but I think you have to do a little bit of puzzling yourself initially. And that's another observation I have, in my experience with Nuxt, Nitro. As someone who's not initiated with Vue Ecosystem, for example, my younger brother who's very much into React. When I asked him, hey, can you, provide some comments on my code? Can you check out would you like to check out what I'm doing with Career Deck?

Patrick:

At first, he was puzzled like, hey, next. Alright. Cool. This is this meta framework for Vue. But how does Nitro and, H3 all tie in with this?

Patrick:

So if as soon as you start to understand that Nuxt servers are backed and powered by Nitro and H3, you'll probably find out very quickly how to implement things like server side events yourself easily. But I can imagine it might take a little bit more time for those who are not, among us in our world of view.

Alex:

Understandable. Especially, I I think with the fragmentation, which is not really fragmentation, but, like, with the the sectioning of functionalities in different packages in, for example, on JS, it's I think in a way, it's really helpful for, like, making it available to whole JavaScript community and sharing that among different frameworks and make it easier to test and to isolate. But I see the point on the other hand. If you jump into it, then it might be a bit daunting to say, okay, I have all these different packages, and there's Nitro, but there's also a 3, how they are related, and then what is RedX 3 and this and that. So I I definitely understand that this is a little barrier if you hit it the first time.

Alex:

Or as you said, Nux and Nitro, how are they how do they work together? What is Nitro? What is Nuxt? Like, I've experienced it multiple times as well when doing consultancy and explaining. And, also, that's why, actually, I also did a video about that saying, hey.

Alex:

These are the 2 parts, and and here's where they work together. But I I hope, for example, with that problem, we can change something with the new proposed, default project structure in Nxt 4 where we have the server folder outside of the app folder to say, okay. These are, like, the 2 separate parts, like, the the front and the back end, and they still work together doing SSR. But other than that, like, you can just take the server folder and more or less deploy it as a Nitro standalone. That's great.

Alex:

Yeah.

Patrick:

Alright. Is this proposed, directory structure, is this a definitive, proposal will be implemented for sure? Or is this something that you cannot share, some details on?

Alex:

There is an issue about that. So if anybody has some opinion on that, please share that along also in the in the show notes down below because it's planned for next 4, and we were also thinking about naming. So if anyone has an opinion on that, and please feel free to share that. Very important for us is it won't be, like, a huge change because, first of all, you can already do that more or less already. You can say, in Nuxt, you can set a source directory and all your source files on there.

Alex:

The only difference is that the server can also be outside now. And if you don't want it, you don't have to use it. That's always the nice part. We also will have backwards compatibility. So if you have that, like, flat structure all in one folder, that will still be fine.

Alex:

But, yeah, as I said, it's worth worth checking out also a bit of the reasoning, and there is still discussion of how to name the folder. It's not server, but right now, it's called app. But, yeah, naming things is hard, and there were some some suggestions because kind of the server is also part of the app. It's it's a bit tricky. So if you have any amazing name for that, your chance to shine there too.

Patrick:

But Awesome.

Alex:

With regards to Nitro as well, I also often get, like, the question, how does it compare to, like, other server frameworks? I mean, for, like, I don't know, Connect or Express, which are also more barebone, I think, it's a bit easier to say. But then it starts with, like, okay, we have Nest. Js. But sometimes also saying, okay, how does it work, like, Next.

Alex:

Js server routes? Or how then even going further away from the the JavaScript ecosystem of, like, Fastify and HONO and so on, maybe you're saying, oh, yeah. How does it compare to Laravel? And I I think they are giving that that Nitro and, a 3 have, like, a different model of, like, okay, more composability, what the front end has too. But also given that it's quite young compared to, like, I don't know how old, Express feels like forever, also like a Laravel that's on also for forever, there's still, like, some, let's say, some convenience modules, up should be there at some point.

Alex:

Or what's an easier start than, like, building a silver bullet is, some kind of cookbook saying, hey. This is how you can set up WebSocket. This you can set how I set up service at events. Here's how you can do, I don't know, some logging. Yeah.

Alex:

So it's a bit of an easier introduction saying, oh, yeah. Server part. Cool. Here, you read more. Here are 50 examples.

Alex:

If there's something that fits, Awesome. Yeah. So I think that would help a lot too. And, like, now with Nitro and H3 having having doc size that can be edited, I I think that will also come in the near future.

Patrick:

Yeah. Yeah. I agree. I agree. I think, yeah, providing your developers or users or people with interest in Nuxt h three or Nitro or whatever.

Patrick:

Show them what is possible. Show them I mean, we have all the nice goodies in Nuxt and in Nitro. It would be a shame to get all the possible solutions for your problems buried underneath the whole mountain of technicalities. What I really like about the next docs is that they're very thorough, they're well written. Sometimes I'm missing a bit like, okay, what can you do with this?

Patrick:

Same goes for ACE 3, like, oh, kvstorage. It's it's awesome. But if you don't

Alex:

No. When you've never heard

Patrick:

of this before and you're like, okay, sure. Someone has made this, has written this library, but why should I care?

Alex:

Yep. Fair point. So,

Patrick:

yeah. But, I mean, Nox is is awesome. And, so so I was wondering, do you you as a insider in the Nox core team, does Nuxt have the ambition to become the next Laravel or the next NestJS? Is that, I mean, next is a batteries included framework, you can progressively enhance your app with all these nice goodies. But is the the ultimate goal, you think, to become a major competitor to the other major frameworks like Nest and Laravel?

Alex:

So my my personal opinion on that, that doesn't reflect the opinion of the team, just a little disclaimer. I think what I really enjoy using Nuxt and also coming from from NAREL eventually is the simplicity of, like, okay, you can just put things in. They work. You like, file system based routing and everything. But, of course, these are what lots of meta frameworks have.

Alex:

And I think now that things are also like, server and client are moving closer and closer together, we talk on the performance side of, like, oh, yeah, partial hydration and server components and so on. And I think if we have a strong and, like I say, powerful framework that can give us the the flexibility on the front end and all the convenience and the options on the back end, but, like, making them accessible to us but don't enforce them on us, let's say, that would be pretty sweet. And I think Nux and Nitro are in a good spot there. Of course, it's a bit more difficult given that Nitro and all the NGS packages are planning to be runtime agnostic. So it is, of course, let's say, more time consuming to not just say like, okay.

Alex:

It's Node, and that's it. But also, oh, yeah. We have another 14 plus run times right now, and, ideally, things should work everywhere. And, otherwise, you have to mark them as experimental. Like, for example, WebSockets don't work on certain vendors because, okay, this is just simply not possible technically, or how do we have a long living connection there and so on and so on.

Alex:

And and, of course, we're also in touch with them, figuring out the solution if if there's something possible. But I don't think of it necessarily as competition because what, like, Nuxt has in the front end is not necessarily what Laravel has in the front end, given that it's Of course, you can use, like, inertia, let's say, which also uses can use Vue or React under the hood in Laravel and say, I write my things only in PHP, and then they're in the front end, back end, or, like, LiveWire or whatever. But I think, ideally, we would have something that's really unifying both pieces. I think Nox is going a pretty pretty good way there. So I wouldn't be surprised seeing more convenience around that, seeing more, more, like, batteries included if you need them and still stick with composability.

Alex:

So still saying if you don't use something, it's not in the bundle. It's, it will be tree shaken. It won't hurt performance and so on and so on.

Patrick:

Yeah. Yeah. That is a good one. It's very, thorough and insightful response from, from your view. Nice.

Patrick:

Yeah. I mean, of course, you can't have everything. So I'm currently looking at the Nest JS docs and you see all these things like queuing and, these things. And, yeah, if it's I would rather have Nuxt having less feature ship, but all were good and have all these, possibilities to host it wherever you want rather than having it being broken and not working at all. Yeah.

Patrick:

Never half as a thing, always whole as a thing.

Alex:

Then it might be a smaller thing. Yes, exactly. But I mean, for example, let's say queuing, or or let's go back to storage that you mentioned before. Like, okay, then there was a new Andres package called unstorage. Then we had all the integrations with the different drivers, and they can still add more and more to that.

Alex:

So I think especially with with these things, if there is a need for that and then if there is time for that, that's the other thing because Yeah. I mean, all the maintainers are are busy, being it Daniel, Puya, anyone else from any of the core teams. Right?

Patrick:

We have to allocate time and resources, and, other things.

Alex:

Sometimes it's also like it's not only building new things. Of course, also the big thing is maintaining the old ones. Right, like bug fixes and so on, so on. So in the end, important things, they definitely will come at some point. I know Harlan was was thinking about some queuing package also when when he was on the episode saying, like, oh, yeah, that would be amazing.

Alex:

And he's still working on that. Saw saw on pinged him even Twitter recently, on on another post, which is then also linked down there. Maybe there's already more info there. So all in all, I I think it's more about, okay, on JS has some packages that you can use in any kind of project. It doesn't have to be Nuxt, Nitro.

Patrick:

It can be That's true.

Alex:

Just even, like, a plain Node. Js project or a very small cloud framework or whatever. And, ideally, we, like, in in Nuxt, we and also, like, Nitro, you have a nice way of using them if you need them.

Patrick:

True. Yeah. That's very much true. Yeah. Yeah.

Patrick:

Yeah. And what do you think oh, we were we were talking about, all the nice goodies from from Nuxt and, yeah, Moon. Js, h three. Well, how do you see the the role that Vue takes in the Vue ecosystem if Nuxt has all these good things, ships with it. I mean, what I mean is that why would a developer start a new Vue project and opts for using vanilla Vue, but having to set up all these things yourself, having to set up the router, having to set up your own state, having maybe you also want to, create your own custom fetch instance.

Patrick:

But why would you do that if there was an ax with all these, nice things and composables built in? Is there a role for few, if Nuxt is, I wouldn't say better, but has more things included. I intend to see Vue as a Swiss pocket knife and Nxt is a even bigger Swiss pocket knife because there's so many more things built in. What do you think about this?

Alex:

Of course, I'm a bit biased there. Yeah. But, yeah. So it's let me start with a bit of a bigger picture. I think it's interesting that, for example, React says, hey, don't use React without a framework anymore.

Alex:

Oh, yeah. And I don't necessarily think that's like for the Vue ecosystem. I personally wouldn't go that way, mainly because one thing that Vue like, one thing that helped Vue gaining a lot of traction is that you can say, okay. I have a script tag in any kind of application. Can be just plain HTML, can be like Laravel, Django, and so on.

Alex:

I smash Vue in there, and I can just start using it. It might not have single file components in that way. It might not have the best ID support, but it will work. And I can, let's say, replace Jake there or do, like, tiny things with it. So a lot of use flexibility, and you can't do that with Nuxt, of course.

Alex:

If if you don't build your whole application in Nuxt, that's tricky. Well, at least at least a part of it, then, like, proxied out or whatever. So you kinda just, like, slowly, like, sprinkle Nuxt on top of things. Yeah. And I I think it's really nice with you that you have that option.

Alex:

And when I when I was talking about Petite View in previous conferences, I was always wondering how many people use, like, Vue in a script tag. And there are quite some. Like, I've seen so many projects by now doing that, even if it's just like, okay, at some point, we want to rebuild the front end, but we can't right now. We are more or less stuck on the LAMP stack, or, hey. Maybe our people prefer that, but we still need something for, well, the JavaScript in the front.

Alex:

And instead of saying, okay. I want to have some kind of render lock in by choosing, like, inertia or LiveWire, so on. So I'm saying, okay. I have to stick with exactly that. I just plug in Vue, and and go with that.

Alex:

And in in these cases, I think Vue is Vue is a perfectly fine tool. But if you start with, like, okay. I have a green field. Should I use view or Nuxt? Then okay.

Alex:

My my take is easy on that. Yeah. Yeah. I think that's that's also an important part. Maybe people are afraid of using Nuxt because they're no.

Alex:

Okay. Nuxt is used for server side rendering or maybe static site generation, but I don't need either. I don't need anything there. I just wanna build a plain old single page application. And you can do that too.

Alex:

It's pretty easy because you just generate one site, which is an index HTML. So as I said, rendering is off, and then you have your your your SPA. And whenever you say, okay. I want to switch maybe server side rendering on for certain pages, generate some landing pages in the front, or, maybe you want Nitro as a as a back end server running as well, you can easily do that. So I see the point of you saying, we can just use Nuxt for for, like, greenfield projects.

Alex:

The other problem with that, I think, is learning Because if people know of you, it's really easy. It can start, like, okay. They know of your router. They know of you. It's all good.

Alex:

Not too much magic around that, and then you don't have to learn how data fetching in in NuxtraWorks. Things are a bit let's say, they might be less well structured, sometimes, depends also, but they're also less magical, and sometimes they're easy to grasp, especially for new people because then they only have to learn Vue, and they don't have to learn Vue and context based.

Patrick:

Yeah. Yeah.

Alex:

So, from that perspective, I get that too. And if you say, like, I don't know. File system based routing, well, there is unplug in also coming from funnily, Anthony Anthony Fu's main credit for that. Outplay, there there, like, is a plug in to say, okay. Unplug in, I think, if you're out or unplug in, to actually enable type pages and file system loading and so on in VueProject.

Alex:

So parts of the, let's say, quote unquote, Nuxed magic, you can already have in your Vue projects or same with, like, auto imports and stuff. Yeah. So in some degree

Patrick:

a way to to get to get these things working in a Vue that originate from Nux. Yeah. I I like that. Yeah. I didn't know about this unplugging and route router package, by the way, but I'm looking

Alex:

at it. Yeah. Look into it. It's it's really cool. That's why, like, you you can have some of these goodies already.

Alex:

And I also understand people saying, like, okay. We all know Vue. We can't we we, like, we have to ship features. We can't rebuild everything in Nuxt. And, of course, for, like, a new a smaller project, it makes sense like, okay.

Alex:

Let's let's get into it. Let's see what we can get, especially if you also know already, I might need a server. I need might need this and that. But even if you don't, in my opinion, it makes sense to bet on the meta framework, but I can also understand people who don't. I would just encourage people giving it a try.

Alex:

And then I think very important, like, I say that almost every meetup I go to every conference, If you start using Nuxt, and it applies to any kind of, like, library or framework, you have that unique view of being, like a newbie. And that's pretty cool because then you know nothing, and we can improve based on your feedback saying, okay. This was not really understandable. Or like like your brother coming from React Universe saying, oh, I have no idea where to go now. I don't know how, like, Nitro and Noxetine is 3, how they work together.

Alex:

And these pieces are missing for us who work with that on a daily base because we have all that knowledge already. Right? So we could improve the documentation and the learning process and the onboarding based on that feedback, and I think that would be pretty cool.

Patrick:

Yeah. Yeah. Yeah. Yeah.

Alex:

So share that with us, everyone. Send send me a DM. Send right in Nux Discord. Hit any of the team members up because we we wanna take that serious. We want to improve that as well so more people have an easier time being onboarded.

Patrick:

Yeah. I think, that's those are very valid points. And I also remember, like, hey. Of course, you, people like working with you if they're working with Laravel. I think that ties in very nicely.

Alex:

Yes.

Patrick:

And there's of course, I remember now as we're talking about it, I was on a client a couple of years ago and they had both Vue and Nuxt 2. Yeah, Vue 2 and Nuxt 2, in the same project, one for one product, one for another product, both for dashboards, I believe. There were many more people on the team that knew about Vue and not that many people who ever worked with with NUC. So, yeah, I think it's yeah. It depends on where you're working at and what everybody is using and what's their preference.

Patrick:

And yeah. All in fairness, I mean, it's not that you will it will take you much more time to get up and running with Vanilla Vue if you're coming from Nuxt. You probably know how to set a Vue router yourself or implement things that are only in Nuxt present.

Alex:

At least you can, like, figure it out, right, like step by step or, yeah, worst case, you do it yourself. Yeah. But, yeah, once again, I think the state where more and more people try not to even say, okay. Look. This is overkill for my project.

Alex:

I just need a very simple tiny app. I get it. Sure. You don't have to, but it gives you lots of flexibility because and, also, I've seen it multiple times. Oh, yeah.

Alex:

There's a Vue application. Now they need partially server side rendering, or now they need the site generation. And then starting to move everything over is tedious.

Patrick:

Yes. Yes. That is. That is. Yeah.

Patrick:

All

Alex:

right. I think they sourced really nice questions, really nice answers as well. So I have one more question, Patrick. Where can people follow you? Where can people follow you more about your project?

Alex:

Where can people follow you more about updates with regards to, where you maybe give your next talk? Who knows?

Patrick:

Or Oh, wow. Wow. Wow. Well, if you would like to follow me on the app formerly known as Twitter X, you can follow me on my Twitter handle. It's rec x parser.

Alex:

That's a cool one.

Patrick:

Yeah. Thank you. I don't I don't know how I came up with it. I think it was in my beginning of my developer career, and I thought, hey, this is cool. You guys will be there.

Patrick:

I'm also organizing a couple of Vue meetups in Amsterdam in the coming year. You'll find me for sure, Vue. Js Amsterdam where the brilliance Alexander Lichter is also there.

Alex:

Every now and then. Here. Yep. Every since 2018 or 1919. Yeah.

Patrick:

Always. You're always there. Yeah. If you would like to check out what I'm working on, you can check out career deck dot nl, which soon will be, moved to career deck dot ai. I think I already bought a domain or did I?

Alex:

How do I store it now? Quick quick. Yeah.

Patrick:

How do how do I store people, buy it and will swap my domain. Oh, cool. Check out. My aim is to launch by the end of June. And, yeah, let me know what you think of, the project.

Patrick:

I'm always curious to hear people's opinions and, what they think of, career and personal development and AI.

Alex:

Okay. Then, yeah, I would say thanks a lot for for sharing your knowledge, for coming on to the podcast, and we're all super curious where the journey goes. We'll definitely have you onboard one more time, giving a little update how things went, how things go. And, yes, it's always nice to see people using, like, Vue and Knox in real life with some experience, how they use things, and to learn more things around that. So thanks a lot, Patrick, for coming.

Alex:

Talk to you very soon, definitely in person as well. I'll swing by. And, that's for that week's episode of Deja View. So see you next week, everybody, where we have another very curious topic lined up. And mentioned BGS Amsterdam conference will also come in a few episodes together with some interesting releases.

Alex:

So stay tuned, and, see you all very soon.