Nuxt.js: Zero => Online (2 Part Series)
So... you want to make a website, do you?
Well, what are you waiting for? Get coding!
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.)
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?
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?
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...
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!
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.
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 firstname.lastname@example.org
^ Psst... the
$ is the placeholder for your command-line cursor. In this case, it means you can perform these commands without root privileges.
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.
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.
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)
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)
.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)
$ 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.
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 (
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...)
yarn global add surge
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: dist/ domain: faded-able.surge.sh upload: [====================] 100% eta: 0.0s (20 files, 310371 bytes) CDN: [====================] 100% IP: 220.127.116.11 Success! - Published to faded-able.surge.sh
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?
This series of posts document a high-level process to use when planning a modern web application, from project organization, collaboration considerations and tooling choices during development, all the way through deployment and performance strategies.