A site redesign project and my experience with Nuxt.js

By Todd Wilson January 11, 2019

Learning Nuxt.js

I’ve been working with Vue.js as I continue to learn more about modern JavaScript and front end development. I normally try to explore various implementations of frameworks with a quick demo and with the latest Vue CLI tool, this becomes even easier to do.

After I had a few passes with Vue.js in adding components on a page, then with a full SPA, I decided to give Nuxt.js a try. My main interest in exploring Nuxt.js was aimed at generating static using the JAMstack as I find most sites generally don’t need a full CMS or blog.

When I reflect on projects that I’ve maintained over the years, most often they don’t require a CMS (content management system). For my redesign project, I didn’t need a CMS and wanted to reduce the server and application maintenance while enhancing the security of the site.

Designing with a front end framework

There are several CSS frameworks that make it easy to base your project from, including Bootstrap or Bulma. I enjoy having a consistent set of libraries that I can extend from and I recently found frontstreet.io. This library is used across the WordPress projects I build so I decided to explore this further, outside of WordPress.

I find it helpful to also have a set of starter templates or themes that can be extended for various projects. A lean, simple boilerplate to layer custom variables and styles on top of. For example, here’s a boilerplate using ReactJS.

Page Builder vs Component Architecture

With WordPress projects, I have a set of plugins and themes that I use repeatedly. I’ve been using the Jump Start framework by ThemeBlvd for a few years now and this comes with templates and layout building tools.

With a page builder, you can add sections and components and still customize these options. The ThemeBlvd layout tools allow you to use CSS classes and various display options. By having a child theme setup with Jump Start, I can add the necessary CSS customizations as I go and organize it by section or page.

When I started using the Nuxt.js and Vue.js components to build a site, I began by adding the frontstreet.io and other useful libraries such as fontawesome icons and axios. A lot of this configuration happens within the nuxt.config.js where you can add your own head links, scripts and CSS includes.

What I like about building with Nuxt.js so far is the layout and page separation is easy to understand and the routing is handled for you. If you need to enhance it as you go, you can with Vuex state management or other plugins and it also allows you to use the SPA fallback option for generating dynamic routes.

Statically Generated with Netlify

Over the last several years, I’ve seen some impressive write-ups about static site tools such as Gatsby and Netlify and decided to give this a try. Netlify was my tool of choice and setting up a site with continuous deployment was very easy to do. You get a generic site URL to start with HTTPS by default along with CDN benefits. The deployment settings go further with asset optimization for the JS/CSS files.

So far, I’m very impressed with how well Netlify has the service setup and allows you to easily create a static site using custom domains. If you need to bring in a blog, you can do that too. Here’s an example of how you can do that using Vue.js and the WordPress REST API, called Nuepress.

As of this writing, my site icreativepro.com is built using Nuxt.js + frontstreet.io + Netlify and it’s more secure and faster than ever. 🚀

Custom web development services. Managed Hosting & WordPress Platform.