create-vue, Dev Tools, & Volar

[00:00:00]
>> So we've talked about CMS, we've talked about working with just the indexed HTML, but most projects are not gonna be run that way, that's just the reality. Most people have bought in fully to the tool chain system, and so it's time that we did so too. For those who come from the Vue2 ecosystem, you're probably used to scaffolding your app with Vue CLI.

[00:00:18]
But there's been a new kid on the block in terms of the whole web pack build tool chain, and if you haven't heard about it, it's called Vite. And one of the great things about Vite, basically what you need to know, is that it's a bundler underneath that's helping to push to front end tooling to use more ES modules.

[00:00:34]
Basically, it helps to make apps more performance. And what's really nice about Vito as well is that even though avenue the creator of view is one of the founders of the Vue technology, it's a multi framework tooling. And so it's really nice to see a lot of framer starting to gather around it.

[00:00:51]
And so for anyone who's interested in this kind of stuff, and want to see like helping to create plugins so that other frameworks can leverage that, Vite's doing a very good job as far as bringing the community together. But because of all these performance optimizations though, Vue CLI currently still uses a web pack and so it basically has been deprecated in favor of the create-vue, which is the new basically equivalent of Vue CLI.

[00:01:14]
And for this one, this has Vite powering it underneath. And so this is where the shift is. So going forward, if you're creating a new Vue 3 app, and you have the luxury of using Vite underneath, create-vue is the basically recommended way going forward. So let's go ahead and create a project and see what that looks like, shall we?

[00:01:33]
To do that, we're gonna run the command npm-create vue3 inside of our project. So, I'm gonna go ahead and just close some of this off now. And let's go ahead and open this up, npm-create-vue @3. And so one of the things that's really nice about the modern built tool chains these days is that you don't have to install a massive CLI on your computer only to use it a couple of times maybe like a year or something.

[00:02:00]
It's kind of being called on in the fly, because NPM knows, you want to temporarily install something, I'll basically bring down the package. I'll use it and then after that, I won't you won't be on your machine anymore. So for this one I'm just gonna call mine sandbox right now because I want to show you all what kind of what's inside, and then you all will have an opportunity to create your own building on what we've been doing today.

[00:02:21]
All right, so we might need a sandbox. And so at first glance you see at TypeScript. Your first glance, your first impression might be, I'm definitely using TypeScript hit no. I'm gonna say hit Yes. And the short reason for that is because when view gives you the option to add the TypeScript, what it's saying is it's not saying you have to use TypeScript.

[00:02:42]
It's saying, we're gonna configure everything so that if you ever choose is really easy. No configurations needed. There will be one of two lines a couple of add to make it basically like, ignore any type script errors. But one of the things that I found that is really painful when it comes to code migrations is that people who wanna star sprinkling in type script, usually the build tool should blossom doing that.

[00:03:02]
Because they're like, I just wanna try types. And than it is like you have to look at this config file then you have to do a ts config and then by the time that obstacle is getting started can be super expensive. And so, if you didn't know there's a view three and TypeScript workshop that I did you can watch that separately.

[00:03:18]
But generally speaking, what I'm saying here is that this is great for code bases in the sense that like, you can only have one if one person wants to use types on one file, they can, you don't have to enforce it across the entire code base. And that's the benefit of having that configured.

[00:03:32]
As you can see here, JSX support. This is something I do wanna address, especially for those coming from the React background is that you can use JSX with Vue. If you've been seeing us do a lot with native HTML, but just know that if you really love JSX, and you don't want to use native HTML, you can still do that.

[00:03:49]
But personally, I do find it's advantageous to use native HTML, but just know that Vue can totally support that if that's something you prefer. We're not gonna worry about view router right now or Penia, and we're not doing any end to end but sure, let's add ES lint and prettier.

[00:04:04]
So for those who are new to the tool chain space ES lint is basically and prettier are ways to standardize how your code is formatted and how it looks. So things like whether tabs are two spaces four spaces or actual tabs semicolons those sort of things that's how you kind of can enforce consistency across your codebase.

[00:04:21]
So let's take a look at what's actually in here. So inside of my sandbox directory you now see a standard Vue project that scaffolded in Vite. So a couple of things here, one, we have a source directory which is fairly standard on front end client framework apps these days.

[00:04:36]
We have the public directory, which is gonna be what's served and basically to users. So basically, think of the public directory as the build tools will not do anything to it. It'll just be bundled with your code when you serve it. So basically no asset optimization, none of that.

[00:04:51]
And then what we can see here as well is we have an index HTML. And this is where you can see actually how your code is basically being built. In the sense that like, If you wanna drop Google Font libraries, it's as simple now as coming into your index HTML file and just dropping in your link to your style sheets, whatever you need.

[00:05:10]
And then here we can see we have our div app as well. And then script type module here main.ts, and this main.ts refers to this file inside of our source directory. And so you can see this should look actually pretty familiar. We're importing the create app helper method from view, and then we're creating an app with that.

[00:05:28]
And then we're mounting it to the div ID right here. And so that's where you see that inside of index. Actually, let me split this window, so that we can get them side by side. So there we go. This is where these two are talking to each other, and then you'll notice that we're also importing some CSS as well.

[00:05:44]
And I'll talk more to this in a little bit. Okay, so to show you just how everything works, let me go ahead and go inside of the sandbox, and I'm going to install the dependencies by running npm install. So while we're doing that, what I'd like people to do is if you look up Vue DevTools on your browser, you should basically get basically, whether it's Chrome, Firefox should have it as well.

[00:06:10]
You should get an extension that you should be able to install here. So Vue.js DevTools, you'll see it has about 1,800 at the time of this recording. And so you wanna install this because this is what actually showing up here and so if you click on your extensions you can go ahead and pin it if it's not.

[00:06:24]
It's hidden right now for you, cuz we'll be using that to explore what the view data does for us when it comes looking at a Vue project. Okay, so inside of here we can see everything is running now, so we look at package.json now, let's see what commands we have available to us.

[00:06:39]
Well, we have the ability to dev, okay? And then, there's a bunch of types of stuff, we're not even gonna worry about that right now. So, npm run dev, all right? Great. And let's open that up, there we go. As we can see, this is your Hello World Vue application.

[00:06:56]
Now, when we take a look now, you'll notice that the dev tools, if you have that installed, will actually go ahead and light up. And so if you open up your console now, and you go into the drop down, or if you have a really wide monitor, you might already see it, but mine's hidden since it's a little bit bigger.

[00:07:09]
Let's click on Vue, you'll see that here we go. We have the Dev item, basically, our entire app now is able to be inspected inside of here. So what we're seeing here is basically we're starting to introduce the idea of components, right? Components driven development is really popular in today's modern front end frameworks.

[00:07:28]
And so as you would expect, Vue certainly supports components, and we'll be doing a lot more with that. Now that we have the build tool chain supported. So what's cool about this is that you can see as you click on the different components, it'll actually tell you a little bit about it.

[00:07:42]
And so you can see that yes, here in the welcome, there's a bunch of stuff being set up. The HelloWorld here has a message. We'll be using this a lot to inspect what's going on underneath the components. So definitely keep this in mind when we start to move forward on other things.

[00:07:57]
So, what we're gonna do is I'm gonna go ahead and port over the playground that I had made. And we're gonna go ahead and actually use that to create the app. So to kinda show you what's going on. So, the main thing to understand here is that inside of the main.ts, you'll see here inside of this app Vue.

[00:08:15]
And so, dot view files are the bread and butter of one of the reasons why I think view also got really popular. And so, these are called single file components. And so, they're single file components because, well, they have a lot going on. But you might notice, though, is that none of my syntax highlighting is working.

[00:08:31]
And the reason for that is because you need to actually enable a VS Code extension and the one that I recommend, actually kind of the standard actually, is volear, V- O- L- E- A- R. So if you're using VS Code, go ahead and install that on your machine while you're while you're at it.

[00:08:48]
So I'm gonna go ahead and enable mine. And it does a ton of stuff for you. Honestly, there could probably be a half day lecture just on Volar alone, but know that it helps you out with syntax highlighting, and a couple of other things as well. Okay, so instead of App.vue, you might notice this should look pretty familiar to you, in the sense that okay, we have this this part here this template this is HTML.

[00:09:11]
And this template element believe it or not is actually built on a standard in HTML. The template element is actually a built-in thing takes email, it's not just a Vue thing. But basically it says, hey, this is HTML that I'm managing in this specific file. The script block is what you expect.

[00:09:26]
Here's the JavaScript that I'm managing. And here we even have a style block, and that's the manage all the CSS. And so as you can see, the reason why it's called single file components is because it basically allows you to scope all do things that you care about into a single file.

[00:09:40]
And that might sound like what's so special about that, but we have to remember prior to this a lot of times what people were doing is they would have an app.html. For example, for the template they'd have an app.js for the JavaScript, and then they have an app.css, for the CSS.

[00:09:56]
And to some extent, there's nothing wrong with that architecture, but for a lot of us who, especially when you're navigating back between files, it's actually really helpful just to have it all in one place. And that's at least that's what I found in my experience. Now, granted, there's nothing stopping you from choosing your own adventure.

[00:10:13]
So these all these blocks here, they're optional. So I can delete this. And we can just, we can only use the template and the script. And the other thing that people often misunderstand when it comes to single file components as well, is that the script template and style blocks are just what's default out of the box.

[00:10:32]
There are actually other libraries and plugins that utilize things like a docs plugin. And so it'll use a docs tag wrapper, and then basically whatever you document there will be associated with that specific component. And so really it's actually an open canvas for people's imaginations when it comes to how they might wanna scope, how information is being managed across their code base, all right?

[00:10:56]
So let's go ahead and migrate some stuff over, shall we? So I'm going to go ahead and open up my playground here. Let's do that and then switch that over here, all right? Let me zoom out a little bit. So I think it's a little bit harder to wait, can I zoom in a little bit harder?

[00:11:14]
Here we go. Okay. So I'm gonna go ahead and delete this boilerplate stuff. You all will understand how this works by the end of the workshop, so don't worry there. But this way we keep it simple we have a script block we have a template block, in other words our JavaScript and our HTML.

[00:11:32]
So what we can do here is we can basically copy in our HTML here to bum, bum, bum, bum, bum, bum all the way down to the div. And we're gonna go ahead and drop it inside of our template. Okay, a lot of things are going to be breaking right now, and that's totally fine.

[00:11:48]
Because what we got to do, we got to copy all this data that we have here. So we have a bunch of stuff inside of here, and we're just going to copy all of it, or in this case. I'm cutting it, the main difference in tactically speaking though, is that what we got to do is rather than saying like create an app here, because the app has already been created, we basically are saying, let's export the object that we're going to be using.

[00:12:12]
So in other words, here is the specific object that will reflect the JavaScript for this file. There we go, okay? So what we see here, we're back to the point where we have our data here, and we have all the stuff that we just copy pasted and we have our template.

[00:12:28]
So we see some stuff yelling at us. Yep. We'll talk about that in a little bit. And so let's see if this actually did anything for us. So you'll notice who, okay? Our data is there, it's just super messy. The reason it's super messy is because we have, [SOUND] inside of our main.ts, you saw earlier we have this main.css.

[00:12:49]
We're gonna wipe that out, cuz right now, we just wanna work with standard things and make sure everything's just working. And so sure enough, there we go. We have our app, and okay. So the first thing I want to address here is that you'll notice now before we weren't getting any sort of errors when we did the index HTML way.

[00:13:08]
Because basically Volar and these sort of extensions allow us to basically identify common problems that people sort of or mistakes that they make when it comes to this stuff. And so you'll notice here we got these error messages here because it's saying that whenever we iterate through an element is expected to have a V bind key directive so what does that mean exactly.

[00:13:30]
Well, basically when you're having the frameworks track the elements that they're looping through, it's good to give them some sort of identifier so that they know whether or not something's changed or not. Without that identifier, you basically run the risk of relying solely on the data to figure out what's working and when, especially when it comes to animation, you will, it'll bite you in the butt constantly.

[00:13:51]
So typically what people do then is they will do the V bind directive because the key needs to be a unique key for everything. And so we can also shortcut this as well to just like this V key. And then we can do something as simple as for example, I sometimes will just take out the index, and I'll say I will do a ES lint stringe, sorry the ES six string.

[00:14:11]
And I'll go item dash index for example. And so this year then basically provides a custom key now most of the time when we're working with databases hopefully you have UUIDs and that kind of thing to populate it. But for the sake of like to sort of demoing this at the moment, this is how we could fulfill this requirement by basically creating our own key.

[00:14:33]
So you'll see here, it notices that this is, I think, identical to the other one, but index, it doesn't. So there you go number index. Great. What does it not like about it, it'll format it, okay? There we go. And just like that, we have our app now working inside of the build tool chain.

[00:14:54]
This is the final bit that I was talking about. Remember how I was talking about where we've enabled TypeScript, but you don't have to use it? The main thing here is that you notice Volar is basically saying, hey, I thought we're in TypeScript, what's going on? So what you've gotta do here is go into your tsconfig.json, and under the compiler options, we can allowJs to true.

[00:15:14]
And that will basically prevent it from yelling at us anymore if we don't use TypeScript. But on the other hand, if anyone ever does use TypeScript, it's just gonna work magically. We in all the configurations that already work? Yes go.
>> If you have an existing project, would you probably not recommend trying to devise it?

[00:15:33]
>> So the question here is around. If you have an existing project that already works, whether or not to switch it over to Vite. Honestly, I most of the people who've switched to tool chain have found very little difference in terms of like it's not like other build tools where, like something usually major breaks.

[00:15:49]
So I guess a lot of it boils down to actually your dependencies. I would take a look at that. If you have a lot of dependencies that rely on some sort of Webpack build, then in that case, Vite might be a little premature. But if it's a more evergreen project where it has like standard JavaScript stuff that is JavaScript libraries installed that might already have ESM support for ES modules.

[00:16:08]
Then that would be a great case for like, let's just try and see what happens because the performance improvements that people are experiencing on Vite are pretty significant. And so honestly it's worth like an hour time box effort, just to see if you can improve the DX on that regard.