This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Challenge 4: Vue CLI" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students transfer a component to a Vue-CLI build environment. Sarah takes questions from students.

Get Unlimited Access Now

Transcript from the "Challenge 4: Vue CLI" Lesson

>> Sarah: Cool, so let's do an exercise really quickly. Take your component solution or this pen exactly, and let me make sure that it's public.
>> Sarah: And set it up with Vue-CLI and do a real build process. So just refactor this pen like what I had just done for you when we were live coding together, and set this up in Vue-CLI.

[00:00:30] If you want to, you can try to set it up Nuxt instead. I'm not gonna make you do that if you don't want to, but if you're extra curious about Nuxt, you can do something like that in routing. But for the base exercise, let's set it up with Vue-CLI, and I'll give you 15 minutes for that.

>> Speaker 2: There's a few questions, what's the difference between a Vue PWA template and Nuxt?
>> Sarah: Well, for a Vue PWA template, they're actually not terribly compatible. Because like you saw in that nuxt.config file, we are actually having to do all of the server-side rendering. So that PWA template Is assumptive of a completely different build process.

[00:01:18] So that PWA template is gonna do a whole bunch of different type of code splitting and stuff. So they both have code splitting, but that nuxt.config versus that index.html file, those are very, very different ways of setting up the application. So both of them are fast, I would say.

[00:01:40] And vue init pwa is really nice, but if you need server-side rendering, I would go for the Nuxt starter and work with that instead of the PWA. They're different build processes, they're not compatible because of the way that they're done right now. I think in the future, Nuxt and the team that made that progressive web app page are gonna work more closely together.

[00:02:06] But at this time there is a lot that you lose going to the PWA that Nuxt has, and you'd have to re-setup all of that configuration. So it's really not worth, they're not really the same.
>> Speaker 2: Then Jacob's saying, I hear great things about Nuxt, like what you're saying.

[00:02:25] However, at what point should I try to learn it and incorporate it in a project professionally?
>> Sarah: I think we're gonna kind of address that in the next section a little bit. But I think when you start setting up an application where you need routing, you can use Vue Router, and Vue Router is really great.

[00:02:45] I don't use Vue Router, though, I use Nuxt for my routing. Because I think that that server-side rendering in the perf, it kinda speaks for it, after running those tests I was really kind of sold. So I would say when your project starts developing many pages, and you really want it to be as fast as possible, that's a good time to start thinking about using Nuxt.

>> Speaker 3: So when you're showing us the main menu tag, and right underneath there's the nuxt tag Are you saying that when you transition from page to page, the only thing that's updated in the DOM is actually the contents of the nuxt tag, and the main menu element actually stays there?

>> Sarah: No, no, no, it's actual routing. As far as I'm concerned, it is actually routing from page to page, but it just keeps it consistent. And also because it's sever-side rendered, it's really, really fast for it to understand that file because you've already brought it in before.
>> Speaker 3: So as I understand it, Nuxt does client-side routing too.

[00:03:55] So when you go to a new page, it doesn't download, doesn't hit the server for everything. It just hits the server for some stuff and does a partial DOM update, is that-
>> Sarah: Yeah, I don't know a ton about the internals, and some stuff is moving because what, so I was gonna talk about this in the animation part.

[00:04:11] But Nuxt is incrementing to a 1.0 version right now, it previously was not quite at 1.0. It was waiting for this Vue release that came out yesterday in order to be able to release. So some stuff is updating. Like there's a bunch of stuff that's getting fixed and updating in this new version.

[00:04:33] So I think that there's enough moving parts that what I would do is, when that 1.0 version lands, which should be in the next few weeks, is look at the release notes for that.