Introducing Nuxt.js: Why We Love This Framework

Our story began when we decided to refresh our company website. 

It’s no secret that we’re always looking out for areas to improve on and implement changes, but this time we made the decision to essentially remove our previous solution and change the framework approach...entirely.

Our requirements were simple in theory. We were looking for a headless CMS with a separate front-end to enable more flexibility with design, and even better performance.

The headless CMS needed to be open source and hosted by us and the front-end needed to use JS framework with a server-side rendering option to make it visible to SEO robots! Although this was a big change from our solution at the time, as specialists in integration, we were excited to get stuck in finding the right “candidates” for our fresh development project!

For the CMS? We chose Squidex; a 100% open source software, headless CMS with an API. 
 

For the front end, we selected Nuxt.js; an open source application framework based on Vue.js and Node.js. Nuxt.js provides built-in SSR, (a big plus for us), and our team already have pretty strong experience with Vue.js...so the shoe fit perfectly.

As a front-end developer, I’m here to talk front-end things! Here are a few Nuxt.js highlights the team and I found along the way.

Installation

Installation is straight forward. The handy CLI tool, create-nuxt-app, took us through the process of installing all the required packages to set up the project! A very good start...

SSR

For our company website, it’s important for us to be visible to search engines so we needed something with server-side rendering, (SSR). Nuxt.js ticked the box here as it has built-in SSR which works great! You can even choose a framework that will work on your server-side such as Express, Koa, Hapi and Fastify.

SSR in Nuxt.js is not mandatory though, during installation you can choose to create a typical static one-page application. You can even use built-in pre-rendering to generate HTML for each route! Pretty cool.

Vue.js

Vue.js was another important feature for us. Our team has used Vue.js in many different projects and we’ve always been happy with this framework. Vue.js borrows a lot of great ideas from React and Angular in terms of design and architecture but just seems to do it better.

It uses empowered HTML in its templates which is a huge advantage for those of us who don’t get quite on with JSX in React. We also found the Vuex library for state management super intuitive and easy to use.

It is worth addressing the confusion that Nuxt.js does have a sibling who goes by the name of “Next.js”...a similar framework that uses React as instead of Vue.js!

Routing

By default, routing in Nuxt.js is generated automatically based on the structure of the pages in the pages directory.

I initially thought, surely this can’t work! We must have total control of the routing!

We quickly discovered that it not only works, but it works really well whilst saving heaps of time.

That said, there are moments when you’d like more control over routing and need a custom configuration. Fortunately Nuxt.js lets you create custom routes too if you want to manually define the URL for pages on a website! ...It just keeps on getting better.

State management

Nuxt.js uses the Vuex library by default for state management.

Like Redux, Vuex.js is an implementation of the Flux architecture but, in our opinion, Veux.js wins hands down! The nice thing about Nuxt.js is that using the store is simple. All you have to do to create a new store for your project, is to start a new file in the store directory and let the framework handle the rest.

Modules and packages

This post would be many pages long if we listed every module and package you can use, but trust us, the choice is wide and of course, down to your project.

With Nuxt.js modules and packages at your fingertips we’d recommend checking out: the PWA module to see how easy it is to transform your site into a progressive web application, the meta management module to smoothly handle your metadata implementations or Nuxt.js modules for google analytics and sitemaps!

A tip for Vue.js users: Use Nuxt.js with all of your favourite extensions from Vue.js.

Thank you, Nuxt.js

Thanks to Nuxt.js we get smart features that work right out of the box, e.g: automatic code-splitting, minimizing JS and CSS, initial CSS processors, integration with Jest, and much more!

Nuxt.js is in our opinion exactly what a framework should be...handy, intuitive, and time-saving for developers.

For us, choosing Nuxt.js allows us to continue applying our agile approach...to move quickly and simply, in intelligent ways. If you’re looking to explore a framework that is easy to use (especially if you’ve worked with Vue.js before) give Nuxt.js a try.