Nuxt.js: Go from zero => online in little time

So... you want to make a website, do you?

Do you know how to use HTML? CSS? JavaScript?

Well, what are you waiting for? Get coding!

Not so fast, buckaroo

Alright, so technically you can make a full website with just those three things, but wouldn't it be easier to use a framework? Just think of all the time you'd save - think of all the components you could create - think of all the Node modules you could import!

OK, maybe it's best to go easy on the modules; they add up faster than you'd think. But, you may have a point there - using a framework (properly) can save you a lot of time in the long run, as well as making your coding skills go much further than they would otherwise. Sure, you could do it all from scratch (and that isn't a bad idea, at all), but that takes a lot longer, and especially if you're starting out, you're likely to end up repeating yourself...

Don't Repeat Yourself, developer! That's like, the #1 rule (or at least it's up there).

Surely there must be a reason why so many web developers use frameworks, right? Surely the millions of us framework-users aren't completely crazy. (Granted, some of us definitely are.)

It's settled, then.

So you want to use a framework, and you want to code in JS.

OOH, BOY! there're a lot of them! Which one to choose?

Svelte? Foundation? Riot? Monkberry? Ember? React? Meteor? Marko? Backbone? Angular? Mithril?

...
...
...

What about Vue? You know, the underdog of the three most popular frameworks? The one with the nice-looking green V for a logo? The one supported mostly by Patreon/OpenCollective donors that somehow is able to compete with frameworks supported by big tech like Microsoft, Facebook, Google, etc.? That one?

Yeah, why not?

Vue it is

Don't let this article change your mind. If you're dead set on learning a certain framework, you go for it! Honestly, these days the biggest frameworks are all excellent, have big enough communities to be sustainable, and have enough developer inertia behind them to be supported and updated for years to come.

But, if you do want to learn Vue, let me introduce you to...

Enter Nuxt

Nuxt.js is arguably the quickest way to get up-and-running with a Vue app. It's a framework-on-a-framework, but don't let that scare you off. Its community is surprisingly active, and it's getting new updates all the time.

Nuxt helps you big-time since it comes with a handy-dandy nuxt generate command, which actually builds your .vue files into plain old HTML, JS, and CSS!

Those files can then be hosted on static site hosting sites, like GitHub Pages, Netlify, Surge, Now, and more!

Convinced Yet?

Again, this article isn't meant to pressure you into using Nuxt.js. But, if you want to dive into it as quickly as possible, this article will help you with that.

To begin, you're going to want to have Node.js and Git installed on your computer. A code editor like VS Code will come in handy, as well.

If you're on Windows, a package manager like Choco can help you install nodejs and other things.

Further, I'll be using Yarn, Facebook's Node.js Package Manager, but you can feel free to use trusty old NPM.]

Finally, make sure you've set up Git on your system. Something like this would work:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

^ Psst... the $ is the placeholder for your command-line cursor. In this case, it means you can perform these commands without root privileges.

Diving in now!

First, navigate to a directory in which you're willing to develop, open up a terminal (in VS Code you can press (CTRL/CMD + SHIFT + P), type in "Terminal", and click on the first result to open a new terminal in your current directory), and get ready for awesomeness!

yarn create nuxt-app nuxt-zero-to-online

summons the mighty create-nuxt-app to quickly spin up a Nuxt.js application (the nuxt-zero-to-online is the folder name, you can change it to whatever you want, or if you're already in the folder in which you want to develop, you can replace the directory name with a period (.).

Yarn will then start downloading some Node.js modules (dependencies, in this case), and this could take a few minutes, depending on your Internet connection.

Soon enough, the progress bars should be finished, and you should be met with a command-prompt saying something like this:

? Project name (nuxt-zero-to-online)

Now, you can just click 'ENTER' if you like it, but you can also name your project something other than its parent folder's name, by typing in a name of your choosing, then pressing 'ENTER' (though, pro-tip: it's way easier to remember the names of your projects if they're in folders of the same names)

Next, you'll see something like:

? Project description (My polished Nuxt.js project)

Same diff here. Take it or change it - press 'ENTER' to continue.

? Author name (Matthew Piercey)

You should know the drill by now...

? Choose the package manager (Use arrow keys)
❯ Yarn
  Npm

Your preference prevails, but Yarn would be my choice. Select your choice with 'ENTER'.

? Choose UI framework (Use arrow keys)
❯ None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

Ooh, here's a fun one! I'm just going to select None right now, simply because this article would be far too long if it delved into each of the options given by this prompt. I'll probably make individual articles for each of these, or at least a few of them, at a later time. This is just one of the ways in which Nuxt really does the heavy lifting for you.

? Choose custom server framework (Use arrow keys)
❯ None (recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

Honestly, I've ever only used None, but I could see how if you're familiar with one of these frameworks it could be helpful to choose one.

However, if I remember correctly, None works best with Nuxt's generator, which is what I'll be using

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ Axios
  ◯ Progressive Web App (PWA) Support

I think both of these are useful. Axios is great if you're doing any async requests, and PWA support is also cool, and Nuxt makes it remarkably easy to set-up. Again, the specifics will likely be covered by another article in the future.

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files

Honestly, all of these are cool. I'm selecting all of them.

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 

Ava.js looks really cool. (I'll be honest, I don't know how to use it... yet.)

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App 

I recommend going with Universal (SSR) for generated websites.

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)

Having a jsconfig.json is probably a nice idea.

Let Yarn do its Thing

Yarn will now start building the files of your new Nuxt app, based on the configuration you just gave it.

This, too, could take a few minutes or longer, but it should be finished in a reasonable amount of time.

🎉  Successfully created project nuxt-zero-to-online

  To get started:

        cd nuxt-zero-to-online
        yarn dev

  To build & start for production:

        cd nuxt-zero-to-online
        yarn build
        yarn start

  To test:

        cd nuxt-zero-to-online
        yarn test

✨  Done in 234.70s.

Woot! Woot!

If you've made it this far, you should be seeing the following folders inside your Nuxt app's folder:

• assets (where your un-compiled code assets and other things can go)
• components (where your custom Vue components can go)
• layouts (where your site's layout(s) can go)
• middleware (where your Nuxt middleware functions can go)
• node_modules (where your local Node.js dependencies live)
• pages (where you can put your site's pages)
• plugins (where you can configure Vue plugins to work with Nuxt)
• static (where you can put static assets like images)
• store (where you Vuex store can go)
• test (where JavaScript tests can go)

Notice that I put a lot of "can"'s in the list above, since Nuxt really isn't too picky, as long as you tell it what you're doing. Its community prides itself on being the community of a framework that values convention over configuration - while Nuxt gives you tons of options, it helps you fill in several pounds of them, leaving you with only a few "grams" of options about which you absolutely need to think.

You'll also see files like these in the project's root directory:

• .babelrc (Manages Babel JS compiler options)
• .editorconfig (see Editorconfig.org)
• .eslintrc.js (Manages ESLint JS linter options)
• .gitignore (A list of files Git isn't supposed to add to any Git repos)
• .prettierrc (A configuration file for Prettier)
• ava.config.js (A configuation file for Ava.js)
• jsconfig.json (Some helpful config for VS Code and some other editors)
• nuxt.config.js (The big config file with tons of Nuxt.js options)
• package.json (The big Node.js configuration file)
• README.md (Gives you some helpful tips)
• yarn.lock (A lockfile for Yarn; don't touch; it lists the latest versions of Node.js dependencies and stuff)

Time to test!

$ yarn dev

Boom! Assuming everything worked, you can open your browser to localhost:3000, and you should be looking at a nifty Nuxt logo animation with a couple of buttons.

Git Going!

You can now use git add . followed by git commit -am "First commit with Nuxt.js" to make sure changes to your project's files are being tracked by Git. (The commit message can be whatever you want it to be, BTW).

Now, you can push your code to your favourite Git repository, like one on GitHub, GitLab, BitBucket, GiTea, Gogs, or whatever suits your fancy.

This isn't a Git tutorial, so this article won't cover that bit. But, I will show you how to quickly upload your site to a static host, Surge.sh!

Pro-tip: You can quit the running Nuxt server by pressing (CTRL/CMD+C)

yarn generate

Now, the moment of truth! Use the above command to summon Nuxt's mighty Static Site Generator (SSG). You should now notice a dist/ folder in your project's root, and after a bit of weird-looking mumbo-jumbo:

yarn run v1.17.3
$ nuxt generate
ℹ Production build                                                                                                                                                                                         22:47:57
✔ Builder initialized                                                                                                                                                                                      22:47:57
✔ Nuxt files generated                                                                                                                                                                                     22:47:57

✔ Client
  Compiled successfully in 5.78s

✔ Server
  Compiled successfully in 1.35s


Hash: c976a06b8539501cf9c6
Version: webpack 4.39.2
Time: 5779ms
Built at: 2019-08-26 22:48:05
                         Asset       Size  Chunks             Chunk Names
../server/client.manifest.json   7.57 KiB          [emitted]  
       0e80d025a1d59071f604.js   46.1 KiB       0  [emitted]  app
       1810f9b2a94a668fce75.js    164 KiB       1  [emitted]  commons.app
       909acf276b8f95d7b778.js   4.27 KiB       4  [emitted]  
                      LICENSES  510 bytes          [emitted]  
       a282e69f670b5d4ce1ee.js    3.6 KiB       2  [emitted]  pages/index
       aef96f98834c826077de.js   2.33 KiB       3  [emitted]  runtime
     icons/icon_120.46472c.png   3.05 KiB          [emitted]  
     icons/icon_144.46472c.png   3.78 KiB          [emitted]  
     icons/icon_152.46472c.png   3.96 KiB          [emitted]  
     icons/icon_192.46472c.png   5.01 KiB          [emitted]  
     icons/icon_384.46472c.png     11 KiB          [emitted]  
     icons/icon_512.46472c.png   13.9 KiB          [emitted]  
      icons/icon_64.46472c.png   1.61 KiB          [emitted]  
        manifest.7f1df9dc.json  789 bytes          [emitted]  
 + 2 hidden assets
Entrypoint app = aef96f98834c826077de.js 1810f9b2a94a668fce75.js 0e80d025a1d59071f604.js

Hash: cbd81db0590a2ba9060f
Version: webpack 4.39.2
Time: 1353ms
Built at: 2019-08-26 22:48:06
                  Asset       Size  Chunks             Chunk Names
3899b046024edc17e008.js   3.65 KiB       1  [emitted]  pages/index
              server.js     32 KiB       0  [emitted]  app
   server.manifest.json  243 bytes          [emitted]  
 + 2 hidden assets
Entrypoint app = server.js server.js.map
ℹ Generating pages                                                                                                                                                                                         22:48:06
✔ Generated /                                                                                                                                                                                              22:48:06
✨  Done in 11.90s.

You should now be good to continue!

(If you're the more adventurous type, you could try looking inside this folder, but don't be surprised if it's a little much to understand...)

Get online!

yarn global add surge

This command will get Yarn to install the Surge CLI globally. Again, don't let this article stop you from using your favourite static host, or a server of your own.

surge dist/

Let's get started! The above command starts the surge.sh CLI, telling it that your static site lives in the dist/ folder:

   Welcome to surge! (surge.sh)
   Login (or create surge account) by entering email & password.

          email: 

Enter the e-mail you want to use with Surge.sh, create a password or enter yours if you already have one, then press ENTER to select your project: and domain:.

        project: dist/
         domain: faded-able.surge.sh
         upload: [====================] 100% eta: 0.0s (20 files, 310371 bytes)
            CDN: [====================] 100%
             IP: 45.55.110.124

   Success! - Published to faded-able.surge.sh

Oh, yeah!

The End?

Look, I already know what you're thinking. "But you didn't even show us how to use it! You just talked a bit about Nuxt and did a tiny bit of setup!"

Granted, you're right. But, often the hardest part of a software/website project is knowing where/how to start. If you're looking to get into Nuxt.js, this is one way to start.

If you're ready to dive in deeper, be my guest. But, if you want more from this series, you won't have to wait long. Over the next few weeks, I'll be releasing a few more of these, covering everything from CSS frameworks to cookies and analytics. TTYL?