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

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

The Vue-CLI helps you to quickly and easily setup new Vue projects. Nuxt.js is a library that helps you build server-rendered Vue.js applications. This lesson shows you how to use the nuxt/starter template with the Vue-CLI to quickly start a new project.

[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.

Pascal Chouinard
Pascal Chouinard
~ 5 years ago

Hi! What Visual Studio Code plugin are you using for auto completion when typing in .vue files?

Victor Hazbun
Victor Hazbun
~ 5 years ago

Steps to deploy pls.

Michel Arteta
Michel Arteta
~ 4 years ago

As feedback, it would be nice if in the first video you can explain what we are about to build or achieve. The way how it's done now confuses me.

Cristyan C
Cristyan C
~ 9 months ago

I'm getting an error Failed to download repo nuxt/starter: Response code 404 (Not Found)

pickleat
pickleat
~ 9 months ago

Looks like vue init nuxt/starter has been deprecated, use: yarn create nuxt-app <app-name> instead: https://github.com/nuxt/create-nuxt-app