You Should Try Vue.js

Node much. Excited to talk about Vue. It's one of my favorite things that I don't get to use that often or talk about as often, so I'm super excited.

Sure. And I guess I'll start with what it is for anybody that's completely new to all of this. But it is a front end framework just like React or Svelte or Angular. You can use it to build front end websites.

And it's been around for a long time. It's been around almost as long as React Wow. Which many people may not know. It's it definitely has gone under the radar a lot. But I started using it back in 2016.

And, back then, I even gave a talk, an overview of Vue. Js. I gave it at a at a few different meetups and conferences. So, yeah, I've been using it a long time.

And it is a front end framework, and it has evolved over the years. So, they call themselves the the progressive JavaScript framework. So one of the things about them that is pretty cool compared to even, like, React or Svelte is you can use it with just a script tag if you really want to. So you can actually just add it to your site and then get some of the the features of creating components and having templates and things like that without even needing a build process or anything like that. I mean, these days, you probably are gonna have a build process. You're gonna have a more complex site. It's gonna have routes and multiple pages. And so they have an offering for that too. They have the CLI, which is also very full featured compared to the CLIs of a lot of these other front end frameworks. But, yeah, they build themselves as incrementally adoptable and progressive. They're approachable, performant, versatile. And one of the things, first, that I like about them is if you know HTML, CSS, and JavaScript, you're gonna have a very easy time picking up Vue. JS because their template syntax is very much HTML.

But then there's a few things sprinkled on top, like directives and then some handlebars. But for a lot of people, especially that people that have that have been using React for a long time, you forget how weird JSX is. Mhmm.

And, I I have some some gripes and complaints about just working in complex React code bases with complex JSX, and I've I've never had that experience in Vue.

A long time ago. Yeah. Yeah. Backbone to me always

So that that's, yeah. I I like that little background you gave for us here. Definitely. And I guess I can start to talk about some of the things that Vue has and why I like it. I guess, first of all, you're gonna start with how to get started.

So like I said, you could have a just an HTML page. You could add the Vue script tag from a CDN.

And then if you check out their docs, there is a built in function called create app. You create yourself an app, return an object that has some data on it that you wanna use in your view, and then you just reference it in the view. And so you can do just that. They also have a a CLI though. And so if you do, let me grab the the CLI command for you. Yeah. Npm create view at latest. That'll run the CLI. And if you're watching the the video podcast, I have just an example of this on the screen here. But this is one of the things that I I like about Vue as well is I I guess the Svelte CLI does this Node. The SvelteKit CLI does this. But there's a long time where, like like, for React create React app literally just it just spits out a React app, and there's nothing more customizable beyond that. And I think even the early days of Svelte was the same way, but Vue has had a CLI for a very long time, and it's it customizes the app that it generates. So it'll ask you, do you want TypeScript or not? Do you wanna support JSX? Which I'll show an example of because pretty interesting that you technically can use JSX with Vue if you really want to. They have a built in router. So this is something I'll talk about as well. There are libraries in the Vue ecosystem that just everyone uses. Right? There's not a debate about which one is better, which one should you use. If you're gonna do routing in Vue, you just use VueRouter.

The CLI will ask you to use that. Same thing for state management. In the world of React, there is Redux, Jotai, Immer.

Well, I think, I think I think it was the inverse. And and if the thing is that these libraries are from the core team. So Deno is from the the core team that works on it. It's not built into Vue. Js, but it is a separate library that you install. But people from the core view Vue. Js team are also working on Penia, which is their state management. And same thing, people from the core team are working on VueRouter. So Gotcha. All all of these kind of, like, existed, and then, like, the CLI kinda just pulls them all together. But JS for as long as I can remember, like, even back in 2016, these were the choices well, back in 2016, it wasn't Pena for state management. It was Vuex, which was, like, their equivalent to Redux. But they got a newer one. More people are adopting that in their in their newer code bases. But, yeah, I think kind of the libraries emerged out of the core team, and then that's just the thing that people use. And so with that, when you come across a Vue. Js app, there's not a lot of guesswork involved. Like, you know they're gonna be using Vue router. You know they're gonna be using Pnpm Yeah. Or or Vuex. Whereas with the React app, it's up in the air. Like, everyone I come across is, like, completely different. You have the opinions of every team embedded in the code Bos itself, which, you know, has has some pros. Right? Because we are we are developers and individualists, and we like to have our opinions and like what we use. But it is kind of refreshing to be able to jump into a code base and be productive a little, more sooner because you don't have to figure out what stack have they chosen for this React app. Yeah. And I think that's

Yeah. And another thing that I really like that comes built in with the CLI is generating an an ESLint config and Prettier config by default. These days, you're probably used to it, especially if you're using Vite, because, even if you're using, like, Vite with the React app, it's going to generate. I think it might ask you, but it'll generate an ESLint config and a Prettier config. But before that, I used to spend hours just trying to get my specific ESLint config and Prettier all working nicely together in a React app. Like, I even have a a video from, like, 2 or 3 years ago on the Coding Garden channel where it's it's an hour and a half, and it's literally me just setting up a React project. I'm not adding any features. I'm just I'm just, like, configuring the router and configuring, Redux and then configuring ESLint and Prettier. But, it is nice that that aspect of the of the CLI tool and the view world kind of leaked out into other things, especially because things are using Vite now, which originated in the Vue. Js ecosystem.

And now it gives you, like, an ESLint and a prettier configuring just ready to go. You don't have to spend so much time configuring it. Yeah. Node. Thanks. Right? Yeah. So let's kinda get into, like, why I like it Vercel, specifically, React. I'm gonna use React as an example because most people I mean, a lot of people know Node and use React, so that's probably, like, the point of reference that they'll go from. But one of the major things is less boilerplate. So when you're working in a React app and let's say you're hooking up a form, Hooking up forms is so much of what we do as web developers.

The canonical way to do this in React is to add a change listener to the input, set up some sort of state. And then when the when a change is detected, you update that state. Now you you could say there are these days, maybe you might use form data instead or maybe you're using a library that makes it a little bit easier. But the if you look in, I think even in the React docs, they show you this is how you hook up forms. And it's a lot of code. And, I mean, the amount of the amount of inputs that you have to hook up and and wire all of this up to JS a ton. And in Vue JS, there's a single directive. It's called v model.

You say v model. You specify the state variable that you wanna bind that input to. That's all you need. It stays up to date under the hood. And if you're familiar with Svelte, they have a very similar thing. I believe it's, like, bind this on an input, and then you specify the the variable name. It's bind value, by the way. Bind value. There you go. Yeah. That's nice because you don't have a bunch of, like, functions hanging around and, like, extra stuff to just to do some of the most basic things. I have some examples, I'll show for the video pod, but also kinda describe what's happening here. This example here is from, an app that's just implementing autocomplete.

One of the things I did over on the Coding Garden channel was I implemented autocomplete and, 8 different front end frameworks. And so that's all of the things, like, first of all, binding the input, which is we're talking about not talking about right Node, but also, like, making an API request and then potentially canceling that API request if a user has typed more, debouncing input, all of these things that you wanna do in in front end. I have a a repo here that does it with a bunch of front end frameworks. And so what I'm showing right now is the v model, in the in our Vue app here. So I have an input v dash model, and then I specify the state variable name that I wanna bind to. And then if you look in the script itself, I have a variable here. It's const filter.

And then I'm using ref to define this, state variable. So ref inside of Vue is not like ref inside of React, which is typically for, like, element references.

A ref is just like a a a single little state variable that you want to keep track of changes to. So I have a filter. It's a ref, starts off as an empty string, and then I just bind that with with v model. Syntax, super simple. If you take a look at how we do this with React, we have an input, we have an on change handler, we pass in, an arrow function that gets access to the event. We then are calling our set filter state function, passing in e dot target dot value. And then after that, we're binding value to be filter, which is our state variable. And if you look at the top of the component, our state variable is, from use state. So I have const filter comma set filter, and that's use state for the empty string. So even the simplest thing, just like simple little state management, keeping track of that on an input is just so much less boilerplate in in Vue. It's just Vue model. That's all you need. Yeah.

the the text string as a user's typing. Right? Oh, I'm gonna make this so it only could be lowercase, and it's automatically lowercasing their text as they're typing or something like that. So Yeah. Yeah. That's a a big big move in simplicity is is the right right call there, I think. Definitely. And then there are also these just other little niceties that you get used to in React but you forget about. So one thing is self closing tags. So I I teach a lot of beginners, and that's one of the things Wes I'm teaching them React, they just get so hung up on JS just you need that self closing tag on, like, an input or an image.

With Vue, your template is technically, in my code example here, if I have a self closing input, but I think that's just because I write so much React code. You actually don't you don't need the self closing tag on, things in your in your Vue app because it is just HTML. And HTML, by design, is actually, like, very forgiving. Like, some things don't even need a closing tag. Like, I think is it I think an image tag in the HTML spec that that technically does not have a closing tag, but you still need it in in the React URL. So that's an a a little nicety. Yeah. Hold on. Even to jump in there real quick, did you see Rich Harris had, like, a big post about how Svelte is parsing

Yeah.

I think to that note, like, React has become so prevalent. People kind of forget how much it changed in terms of, like, how we how we do things. And and this is one of those things where, like, well, yeah, and everything's just self closing, but it doesn't necessarily have to be. Yeah. Right. Exactly.

There's some other niceties here. I I I feel like I I'm not giving a, like, a super basic introduction. We're kind of jumping around in these code examples. But another little nicety I'll show here, and maybe that's the theme of this, is just the little niceties, things you do so often that you forget about. But in Vue, when you want to add a event handler to an element, you can use the shorthand at and then the event name. So in my code example here, I'm adding a submit handler to a form. So I'm saying at submit.

And then if you look at the React example, it's on submit, and then you you specify the callback. But one of the things you do pretty often in front end React code, I think I guess things are changing now that we have, like, actions and server side codes and stuff, is you typically prevent the default action on a form submission because you wanna handle things with JavaScript.

And in Vue, you just say event name Scott prevent that automatically prevents the default action. This is something we do so often, and it's beautiful that it's kinda just built in there. There's a few other little helpers that you can just do dot on, and then you don't have to call in explicitly. So in the React code example, I get access to the event and have to explicitly call events dot prevent default. So that's another thing that Mhmm. Nice and built in in terms of, like, conditional rendering. So let's say, you wanna show something on the page. In this case, we wanna show a progress bar on the page if loading is true.

In Vue, there JS a directive called v if, and then you pass in a variable. If that variable is true, that element will render out.

If it's false, it won't.

And in React, there's nothing built in. We just use either I don't even know what this is you know what this is called where you have, like, variable

The way that you use them is just as, attributes on your elements. So in this case, we have a progress element. And then you see a little attribute there, v dash if equals double quotes and then the value inside of it. So, we call them directives. They really just are, like, special attributes that do something specific inside of Vue. And so earlier, that v dash model one, that's also a directive.

There's a directive v dash show, which will set display none on an element instead of actually removing it like v if would. So v if, literally removes it from the DOM versus v show adds and removes display none. And then there's also v four. So when you're iterating over lists of elements, you have v four, and you say v 4 element in elements or, like, the the list name. They're just attributes, but they're kind of, like, domain specific attributes to Wes you're working in Vue. Js.

Yeah. I think the early days, a lot of the terminology was actually stolen from Angular 1 or borrowed from Angular 1. Yeah. Like, even, like, when I first started learning Vue. Js, it was very soon after, like, having used Angular 1 a lot. And so, v if is NGIF in Angular, and, v four is NG is it NG 4 in in Angular? Yeah. Yeah. I think it is or was. Yeah. Or and then NG model is is pnpm Angular. I think it's sort of similar these days in more modern Angular, but it's like some of the stuff has changed a little bit. But, yeah, a lot of this stuff was borrowed from the early days of Angular.

So another thing I really like about Vue is its built in way of handling styles.

So first of all, I haven't talked about this yet, but Vue has this concept of SFC or single file components.

So everything related to a component is in that same file. And so in an SFC, you will have a template. So that's where all of your HTML goes. You'll have a script. That's where all of your your TypeScript goes. And then you'll also have a style tag, all of which are optional depending on whether or not you need those things in a component. But a typical SFC will have a template, a script, and a style. But one of the really nice things about this is this idea of scoped styles.

So if you just put the attribute scoped on your style tag, now these styles will only apply to this component.

And this has been built into Vue. Js as as long as I've been using it, which is crazy because when you get into the world of React, there's so many style solutions just to solve this Node problem. Right? Like, I wanna style a component, but I don't wanna style everything else. So you have things like styled components, CSS in JS, CSS modules, which isn't React specific, but it it is one way to do it as well. And I will die on I I will die in this this weird little hill that Tailwind

Yeah. It is. I mean, I mean, I guess we don't wanna get into that debate. It comes with Yeah. Yeah. The downsides of, like, duplication and whatever else. But, yeah, like, if you're gonna be putting styles everywhere you need them, they're gonna be scoped to exactly where you use them. So Exactly. Yeah.

Yeah. So that's that's one of the cool things. It's just built in. You don't have to install another library. Svelte definitely took inspiration here. So because by default, a style tag in Svelte is scoped.

Whereas in Vue, you have to you have to opt in. There's a an attribute called scoped that you specifically put on your style tag to make it, scoped. Otherwise, they're they're global by default. And then the other thing is actually just, like, working within in binding styles. So I'm gonna pull up in the Vue docs really quick their section on working with class and style bindings.

So in in the world of React, because it's just JavaScript, and I'm air quoting for all the people listening at home, it's just JavaScript, If you want to conditionally bind, like, a CSS class name, you could use, like, a ternary. Right? You could you would just, like, embed a ternary there and say, if this state value is true, then, yes, apply this CSS class name. But because we we do that so often, there are there are libraries that have popped up in the React ecosystem, like, I think it's called CLSX, or there's another library called just class names. And so, basically, when you're working with conditionally applying classes in React, you have to bring that library in, and then it makes it a little bit nicer for adding and removing classes conditionally if you need to. This is just built into Vue. Js. Nice. And it has been since as long as I've used it. So if you want to bind a specific class name, you do colon class equals. You then do, object syntax. And then every key of the object is the class name that you want to apply.

And the value is an expression if it if it resolves to true, that class will be applied. And so in this example, we have an object with the class active and, colon, and then the expression is is active. So is active would be some state variable. And if is active is true, that class gets applied. But this is really nice because if you have, like, 5 or 6 different conditional classes that are all dependent on various conditional states, the syntax is is pretty cool because it's just like an object specifying class names versus having to pull in another library or having, like, a bunch of, like, nested ternaries and stuff like that.

Definitely.

And and I I guess I will add, specifically, this class, attribute for binding class names. That technically doesn't have to be scoped. It kind of, like, works outside of the scoping system, but, it is a way of conditionally applying classes as well.

You typically don't. It's typically all built in. And I guess let's talk let's give a quick history lesson of working in, with state inside of Vue. So if you're watching on the video pod, I'm in the Vue. Js tutorial. And they have these really cool little toggles where you can toggle between the different kinds of ways of defining a component. But it it used to be that, your component would have a data property associated with it, a data method. And that data method returns an object, and any properties on that object are your Scott, and then you can access any of those things inside of your template.

So this is kind of like the options API or, like, the older way of doing this. One of the nice things about Vue is they have maintained compatibility with the older API. So even even though this isn't the, like, modern way of doing things, you can still have use the options API. Cool. But then they introduced the composition API. And so this is a little bit closer to, like, hooks in React. And so instead of having that data method, you now have these little functions where you can use to then define, your state values. And so we talked about them earlier, but one of them is ref. So if I want a, in this example, a string property called title class, I'll use the ref function, pass in a string. That'll be the default value. And then I can reference that inside of my template by name. And so that's how you define variables. You're using ref. There's also something built in called Reactive.

Reactive allows you to do this for an object. So maybe you have an object with 4 or 5 or 6 different properties. Let's say, like, you're implementing a form and you want to keep track of the the values of all the inputs on that form. You probably have 5 or 6 of those. You might create a state variable called form and use reactive, and then you can pass in an object with all of the properties of the default values of of that form. So that's how you define it. It's pretty straightforward.

But one of the things I really like about it, it is is that it is mutable. We do not have to jump through hoops to update our values. We don't have to call a a special method like set state. We can literally just reassign a value and the view automatically updates. I'll show an example in the, autocomplete UI example that I was talking about earlier. So for instance, we have a loading variable. So in view, I'm saying const loading equals ref, and then I'm passing in false. So that loading variable starts off as false. And then later on, whenever the function is called that needs to update that variable, we just say loading Scott value equals false. We don't have to call set state or anything like that. Under the hood, Vue. Js is using proxies, so it can basically know exactly when you are, setting values here and then update update the view accordingly. If you compare that to, like, React, we have, our classic little use state hook here. So we say use state, pass in the default value of false. That gives us back the variable loading, but it also gives us a function set loading that we call in order to update it.

And then, if we ever need to set that function or sorry, set that variable, we have to call the set loading variable. And so this is a very basic example. Right? It's just a it's just a Boolean. But where this really shines is in, like, deeply nested complex data.

So have you ever had, like, a, a Redux store or any other, like, Deno store in in a React app that has, like, an array, and then that array has objects inside of it, and then those objects have properties that are objects themselves.

If you ever need to update one of those deeply nested properties, you have to do so much just to do it in an immutable way. Right? You have to map the array, and then you potentially have to spread each nested object.

And then if you're doing a nested nested object, you have to spread that as well. So I don't have an example to show you right now, but things can get really, really hairy in when you're dealing with deeply complex complex and nested state. But in Vue, you don't have to deal with that because you literally just update the the property, and the and the view automatically updates. There's no need to to do immutable state updates.

Definitely. And in the world of React, you typically if you're doing this at scale, you would probably reach for a library like Immer or immutable JS. Yeah. Because they do they do make it nicer to update things without having to, like, spread and map. I I think does, is it Zustan that of has that built in? Or I think you can it has, like, a plug in for Immer. But, again, you have to reach for another library. In this case, it's just built in, so every every app you come across is gonna be doing it in the same way. Yeah. I I do appreciate that for sure. And then the the last piece on state management is this idea of global state management. So we talked about it earlier, but in the world of of React, you typically are reaching for, like, Redux or Zustand or Jotai.

All of these libraries basically may allow you to have state that can be easily pulled into components at different levels within your application. The beautiful thing about the composition API here in Vue is that it's not restricted to a component. So without even using Deno, which which I'll talk about JS their global state management, you could literally define a module that declares a few of these ref variables and then just import it into any component, and it will just work. There's there's no weird issues about, like, well, did you call it in the right way? Or or where does it get instantiated? You literally can just create these refs, import them into other components, and it will just work. And so that that's a I didn't talk about this earlier, but that's another nice thing about the composition API in Vue is, like, it doesn't have all of these rules of of hooks, like, when working in React. Right? Like, with React, you they're like you can't have conditional use effects. And, also, I guess I didn't talk about this, but you have to manually specify your dependency array for, like, use effects and use memo and use callback.

In Vue, all of that's built in. So Yeah. In Vue, they have a a a composition function called computed, And this is how you would get, like, use memo, but you don't have to pass in the dependencies. It can auto track those dependencies.

They also have a function called watch. So you can specify which of these reactive variables you wanna watch and and that callback will get called. And, yeah, it's just it's just nice. A lot of this stuff is built in. You don't have to, like, manually manually do all that. Mainly do the tracking. And those same functions that I mentioned, like computed and watch and anything else built to the composition API, all of those can be used outside of component, defined to do the things the way you want, and then just import it into any other component.

And beyond that, for global state management, there's this library called Penia.

Basically, we're using those things that I talked about that are built into Vue. Js. We're using ref. We're using computed. So we can define all of our computed values, all of our state values, do whatever we need to do, also define methods that operate on those values, and then just return the things that we need elsewhere in the app.

I would argue that this is much closer to just JavaScript than the kind of things you have to do Yeah. Like, in in React. Like Yeah. These are just a few a few methods to call. You literally return an object. There's nothing

Definitely. So I would I would say, like, if I'm trying to convince you to, like, use Vue over Svelte, that might be one point. Right? It has been around for a long time. There's a lot of maturity in the libraries that are out there. At the same time, I mean, I I I do have to go go to bat for Svelte as well. Like, a lot of times, you can just use the JavaScript version of a library. You don't need, like, Svelte specific things, which is nice. But, for certain aspects, like, maybe even, like, a a mapping library or some of these other things that you do pretty often, there very likely is an existing library that is battle tested and running in production for a while because it's been around for so long. Yeah. For sure. Okay. So we've talked about styles. We've talked about state. We've talked

Yeah. So the the Next. Js equivalent in the Vue world is a thing called Nuxt, and it's very similar. They have file based routing. They have API routes.

But in my opinion, it kind of, like, goes above and beyond what what even, like, Nuxt JS does, or sorry, next next I next Nuxt.

It goes beyond what what Next. Js does. And, I mean, you mentioned that Next. Js is, I guess, mature, but, like, the App Router is pretty new. And, like, I've I've tried to build some more complex things with, like, App Router and, like, actions, and it still feels, like, half baked. It still feels like they're trying to figure things out. Sorry. You can go back in the archives of syntax, and in within the first 10 episodes,

Yeah. I think there there are a lot of things that Nuxt did first that, like, even SvelteKit are are have learned from and and, like, Next. Js have learned from. Though these days, it kind of feels like Next. Js and SvelteKit are kind of, like, converging to, like, very similar solutions. But one of the the things I like about Nuxt, which some people initially kind of hate, is this idea of auto imports.

Because, like, you can have a components folder, define some reusable comp components in there, and then just use those components in your pages and in and in your your other components. They are auto imported. And then there's a lot of import no. No. I like it. Okay. I I like that as well. Okay. Yeah. It's it's less boilerplate. I mean, like, if you the thing is Wes you look at, like, a a Next. Js app or a React app, I guess it's nice that you can look at the imports at the top and see everything that is being used.

But when you're working in a large application, you're gonna have 10 or 15, maybe 20 different imports.

And so that's a lot to manage, especially if you think about, okay, there are 2 different components that are slightly similar, but they all depend on those same imports. Now you have these imports all over the place. So

Nice. But, yeah, the the the way Nuxt works is, like, it's just built on top of Vue. So it works on the idea of single file components, but it use uses file based routing. So for any page that you want, instead of having to use, like, the Vue router library, you just define these pages, as separate files, and then they'll be routed to according to their name.

And then the other nice thing built into it is, like, these, the way that it you're able to create API functions or, like, server side codes.

And I I haven't played around with it recently, but I was playing around with it when they initially came out with Nux three.

And they had already thought about this idea of of full stack type safety and being able to write fetch code once that works both on the client and the server and pulls in all of the types. So, like, you could define an API route in, like, the API folder. And it's gonna be, like, just your standard server side request handler, and you can do database stuff or whatever else you want. And then in the component, when you use fetch, if that code is running on the server side, it's not gonna make an API request. It's running within the same codebase, Bos it can actually just directly invoke that API function. And then if that code is running on the client, it will actually make make a fetch request. But I think I think SvelteKit is doing this now. They were one of the first to do it. And because of that, you get full stack type safety. So whatever is gets returned from that API function, that type is exported and and usable on the other side whenever you're calling it with fetch. Yeah. I love that. Love that full full stack type Sanity, and that's a such a huge win. Right? Yeah. Remember, we used to have to do

Yeah. Well, first, I'll start with, they have had a compilersque code for a long time, even before so the the thing that you're talking about is Vue Vapor. That's their their new way of having your same Vue component, but then compiling it into codes that doesn't require a virtual DOM. Cool.

But the Vue build process itself has actually had an optimizer built in for a very long time Wes if you're doing certain things that maybe, like, you you didn't maybe you have a a variable that never changes and you're rendering that in your your template, it was smart enough to remove it as even, like, a variable reference and just, like, embed it right in. And then there are other types of optimizations that it could make. So Vue itself has had, like, optimizations and, like, compiler esque things for, like, a very long time. But the idea of purely stripping away the entire runtime and virtual DOM and everything else, that's definitely a a newer thing. And Vue Vapor is the idea there. And so it's still in research mode. They're they're working on it, and they they wanna make they wanna have 1st class support for it and make it opt in. So, essentially, eventually, you'll have this vapor attribute that you can just add to your component. And once you add that on there, it's gonna get all of those optimizations and, basically, just get compiled into native JavaScript code. It won't need a a virtual DOM anymore or, any sort of view runtime to be able to run those components.

That is correct. Yes.

They are. Yeah. They absolutely are. And, I guess, Node one indicator you might look at is, like, GitHub stars. It's not the best indicator. It's kinda just a little bookmark, you know, that people are interested in this thing. But the, original Vue. Js library has 207,000 stars on GitHub. And then recently with version 3, they forked or they didn't fork. They have a new codebase called Core, and that codebase has 45,000 stars. But if you wanna look at actual usage, the Vue library on npm gets, 4,700,000 weekly downloads.

And to me, that's, that's that's huge. That means people are using it. Like, people are installing this and using it. It it doesn't get as much coverage as and as much hype as, like, Svelte and Vue does on on, X or or Twitter or whatever.

But people are using it, and they're building real stuff with it. And I guess, also, if you if you want the let's talk about the community, they have a really big Discord.

Yeah. So there are a 123,000 members of the Vue. Js Discord.

And, it's it's very active. If you ever have, like, Vue. Js questions, you can go in there, ask. We're happy to help.

That they they use the same Discord, I believe, for, like, Deno and, ViewRouter.

Maybe Pena has a separate one. But, ultimately, everybody's hanging out there in that Discord if you wanna get help. But, yes, people are using it. It's a very big community. It's just not as loud as maybe some of the other things that we're used to. Yeah. It's not wild how that that happens. I I wonder, like, why that is with how we we end up in bubbles like this or,

Laravel actually adopted Vue as their front end framework of choice. So Laravel is typically a PHP back end framework. But a few years ago, they made it so that if you ever need to do any sort of, like, client side JS, you actually do it with Vue. Js. So it's a it's a very, interesting relationship there. Like, Laravel's getting more press, but it is actually using Vue. So if more people use Laravel, they're potentially also but are gonna be using Vue as well.

They look like the or were they called Yeezy's? Like, the

Nice.

Cool. My sick pick has to do with charging devices. I'm gonna grab it.

So I don't know why I was so late to the game, but, I was charging things with a bunch of charger blocks for the longest time. But just recently, I got a single unified interface with a bunch of, USB charging ports and also, like, power delivery ports. And, it really cleaned up my desk. So this is my pick. I don't I don't have a specific brand. If you just search for, like, multi USB port on Amazon, you'll find something interesting. Yeah. This works. It cleans up my desk, and, I don't know why I didn't get it sooner.

Nice. And I'm just gonna plug the website on that note because, you may not realize it, but Syntax. F m, you can listen to all of these episodes and search across them. So if I'm ever trying to find, like, a specific topic, like view or react, and I wanna see when it was covered, Syntax dot f m has got a really great built in search engine. And Scott has been making