While React is the most ubiquitous UI framework that static site generators are built on top of, it comes with a learning curve which can be intimidating, or at worst, a serious barrier to entry for busy developers. For example, with React, everything is JavaScript. Which means learning and using JSX – a “javascriptication” of HTML structures, which while somewhat similar to HTML, does require knowing its unique syntax. With Vue, on the other hand, any valid HTML is also a valid Vue template. You can use JSX if needed, but is not a requirement. The ease of use, paired with NuxtJS intuitively handling common configurations out-of-the-box, makes it a great choice for experienced and novice developers alike.
What do you need to start a NuxtJS static site?
Luckily, not much! Since the framework is written in Vue, at minimum it’s best to have an intermediate knowledge of HTML, CSS, and JS as well as some comfort with working in the command line and using Node.
Tools Required
The only tool prerequisites are Node.js (at least v10.13), a package manager of your choice (npx/npm or yarn), a text editor or IDE, and a terminal.
How flexible is NuxtJS?
NuxtJS strives for flexibility, while being somewhat opinionated. This approach can really improve the developer experience by taking care of a lot of overhead right off the bat. For example, while you can manually install Nuxt, it comes with a [yarn/npx/npm] create nuxt-app <project-name> command you can run in your terminal. While this is pretty common practice, NuxtJS goes a step further by including prompts to install a UI framework, linting tools, testing framework, and more, or the option to forego the extra bells and whistles altogether. This can save a developer lots of time they might spend setting up these tooling features themselves and instead can get right into coding their project.
Server-Side Rendering (SSR) versus Static Site Generator
Rather than being barebones and requiring plugins for basic functionality, NuxtJS makes assumptions on what you might need in your static or SSR site and serves it built in. For example, NuxtJS (and NextJS) simplifies the routing process by intuitively following the folder and file structure set in the/pages directory rather than requiring an explicit routing file. Do you prefer making these routing decisions explicitly? All configuration options are easily overwritten or reconfigured in the nuxt.config.js file.
Example of config file:
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: 'nuxt-app',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
],
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
}
}While many use cases are covered by implicit routing and other features such as metatags, basic components and even transition animations, it is likely there will be a need for some functionality that isn’t built in. Modules do exist to extend the framework’s core functionality, though the variety is not as abundant as some others. But, adding plugins is as simple as installing the package in the /plugins directory and defining the plugin in the nuxt.config.js file. You can even add a flag to the plugin letting Nuxt know whether the plugin is to be run server-side, client-side or both. There are also options to use the script(s) directly from a page component.
//nuxt.config.js
plugins: [
{src: ‘~/plugins/my-cool-plugin.js’}, // This plugin is available to both the client and server.
{src: ‘~/plugins/my-cool-plugin.js’, mode: ‘client’}, // This plugin is available to the client side.
{src: ‘~/plugins/my-cool-plugin.js’, mode: ‘server’}, // This plugin is available to the server side.
]Or, if you’d prefer, as an array of strings:
//nuxt.config.js
plugins: [
{src: ‘~/plugins/my-cool-plugin.js’}, // This plugin is available to both the client and server.
{src: ‘~/plugins/my-cool-plugin.client.js’}, // This plugin is available to the client side.
{src: ‘~/plugins/my-cool-plugin.server.js’}, // This plugin is available to the server side.
]If for any reason you’d like to or need to add a plugin directly to a page component, nuxt has you covered there as well:
// pages/index.vue
<template>
…
</template>
<script>
export default {
async asyncData ({ app, $my-cool-plugin }) {
$my-cool-plugin();
app.$my-cool-plugin(); //Use this instead for Nuxt 2.12
}
}
</script>Usability
Like many static site generators out there, NuxtJS works well as part of a headless CMS approach. This use case allows content teams and other stakeholders to make content changes to a site in a content management system they prefer, but allows developers to use a different ‘front-end’ technology than what is typically shipped with a CMS like Wordpress, Drupal, etc.
Additionally, Nuxt offers a module called Content, a git-based Headless CMS which fetches Markdown, JSON, YAML, even CSV files and inserts content easily into components and templates if you have a team that doesn’t need a GUI or WYSIWYG.
An important aspect of sites for non-technical teams is often SEO, and unfortunately with a lot of other SPA solutions, this feature tends to be an afterthought. NuxtJS can be an easy choice when it comes to solving this problem, as SEO is built in and doesn’t require a separate plugin to set up. NuxtJS allows you to include meta data globally in nuxt.config.js or locally through the head as an object or function. This makes it easy to write effective meta descriptions and include Schema.
Investment
For a developer, investment can be a matter of how familiar you are with basic web languages and technologies. Overall, since Vue is very approachable, it can be quite easy to get up and running.
NuxtJS is also open source and the choice between SSR/SSG allows for a cheaper hosting option via static file hosting rather than requiring a server.
It is important to note that NuxtJS doesn’t offer much as other static site generators do in the way of free themes for quick development. While it might still be worth purchasing a premium theme, depending on complexity of the project, this translates into more investment due to custom theming.
Support
NuxtJS has a fairly active community on their Discord server with several specific channels for help. For more serious concerns, the NuxtJS core team offers personal technical support for a fee.
NuxtJS (Mastering Nuxt) and Vue(Vue Mastery, Vue School) both offer a mix of free and paid video resources to get you up to speed if you’d like video resources as well.
Final Thoughts
While there can be considerations to make before choosing a static site generator for your next project, there are a lot of benefits to giving NuxtJS a try. Despite few modules and plugins explicitly available for the framework, there are a lot of features you’ll likely need in a website that come as part of the framework. But the community, while small, is active and offers a lot of support. Along with the shallow learning curve, it’s easy to get started and see if NuxtJS is a fit for your next project.
