Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt

[00:00] Install the vue-cli with yarn gobal add vue-cli. Then once that's done, you can just use vue.init, pick a template, I'm going to use the nuxt/starter template and tell that to generate my current directory which is this egghead/nuxt directory which my editor is open in.

[00:19] It prompts me if I want to do this, I'll say yes. It ill download it, I'll accept all the defaults, then you can see there are files and folders generated from that, but I still need to yarn to install everything defined in the package JSON.

[00:33] That took about 43 seconds for the initial setup which I skipped, but with that done, I can say yarn run dev to run the dev script of the package JSON which just tells it to run next. I'll go ahead and run that, you'll see some compilation output, and that it's running on port 3000.

[00:50] I'll go head and open localhost:3000 in my browser, and you'll see that nuxt is up and running, I'll shrink it a little bit. I would like to reduce this to a "Hello, World!" I'm going to come into pages/index, select everything, hit delete, and say template, then inside of your template you need a root element, I'll just call mine <div>.

[01:12] In there, I'll say Hello, World! When I hit save, this auto-refreshes over here and you see "Hello, World!" You still see this visit our website for more documentation, which means that our main layout in default is adding this footer.

[01:25] Just FYI, this footer is defined in components, but I'm just going to change the layout itself and remove the footer and hit save, and now I'm truly at a "Hello, World!" here. I'm also going to scroll down and you'll see a bunch of styling in here.

[01:37] I'm going to go ahead and delete all the styling and everything else, so there's no styles applied. Now my default layout is just a template with a <div> and my instance of nuxt. Then my index page is just a template with a <div> and "Hello, World!"

[01:51] Lastly the final things for configuration is I want to make sure that my title is inside of nuxt's config.js. I'll make sure my title is what I want it to be, I'll call it Egghead Todos, then if there's any other settings you want to change in here regarding your favicons or meta in the head, you can go ahead and do that in here.

[02:12] Now, when I hit save, I'll go ahead and refresh here. You see we now have Egghead Todos, Hello, World!, and a clean default layout, and a clean index page.