What is Nuxt.js?

Nuxt.js is a higher-level framework that builds on top of Vue. It simplifies the development of universal or single page Vue apps.

Nuxt.js abstracts away the details of server and client code distribution so you can focus on application development. The goal with Nuxt is for it to be flexible enough for you to use as a main project base. Because most of what Nuxt does happens during the development phase, you get a lot of features with only a few extra kilobytes added to your JavaScript files.

We analyzed the mobile Lighthouse 6 scores for a subset of nearly 2,000 high-trafficked websites running Angular, Next.js, Nuxt.js, React and Vue.js to reveal which frontend delivers the fastest websites. We quickly found that the average Lighthouse score across frontends was 24 with a median of 19. While this might sound low, it is actually 26% higher than the average performance score for the leading 500 US internet retailers by revenue.

Nuxt.js and Vue.js websites battled to deliver the fastest websites. Nuxt.js sites averaged a Lighthouse score of 27 with a median of 22, and Vue.js sites averaged a score of 27, but a low median of 20. While Vue.js had a couple of impressive outliers, Nuxt.js proves to be the most reliable framework in delivering the fastest loading websites. 

Coming in third was Next.js, holding an average performance score of 23 with a median of 19.5. Angular websites saw the same average at 23, however the distribution of performance scores for Angular sites was more diverse and the median fell short at 18. The frontend with the worst performance was surprisingly React. It held an average Lighthouse score of 22 and median of 18, even though it hosts some of the biggest names in eCommerce, including Amazon and Groupon. 

Let’s explore the reasons why you might consider Nuxt for your next Vue project.

1. Create universal apps without the hassle

One of the biggest selling points of Nuxt.js is that it makes creating universal apps easier.

What is a universal app?

A universal app is used to describe JavaScript code that can execute both on the client and the server side.

Many modern JavaScript frameworks, like Vue, are aimed at building Single Page Applications (SPAs). There are a lot of advantages to having a SPA over a traditional website. For example, you can build very snappy UIs that update fast. But SPAs also come with disadvantages such as long load times, and Google struggles with them because there’s no content initially on the page to crawl for SEO purposes. All of the content is generated with JavaScript after the fact.

A universal app is about having an SPA, but instead of having a blank index.html page, you’re preloading the application on a web server and sending rendered HTML as the response to a browser request for every route in order to speed up load times and improve SEO by making it easier for Google to crawl the page.

Nuxt.js helps you write universal apps more simply

Building universal applications can be tedious because you have to do a lot of configuration on both the server side and client side.

This is the problem Nuxt.js aims to solve for Vue applications. Nuxt.js makes it simple to share code between the client and the server so you can focus on your application’s logic.

Nuxt.js gives you access to properties like isServer and isClient on your components so you can easily decide if you’re rendering something on the client or on the server. There’s also special components like the no-ssr component which is used to purposely prevent the component from rendering on the server side.

Lastly, Nuxt gives you access to an asyncData method inside of your components you can use to fetch data and render it on the server side.

That’s the tip of the iceberg of how Nuxt helps you with creating universal applications. Click here to learn more about what Nuxt offers for rendering Universal applications.

2. Statically render your Vue apps and get all of benefits of a universal app without a server

The biggest innovation of Nuxt comes with its nuxt generate command. This command generates a completely static version of your website. It will generate HTML for every one of your routes and put it inside of its own file.

For example if you have the following pages (Nuxt’s term for routes):

-| pages/
----| about.vue
----| index.vue

Nuxt will generate the following folder structure for you:

-| dist/
----| about/
------| index.html
----| index.html

The benefits to doing this are very similar to the benefits of universal applications. There’s markup there to make loading the page faster and to help search engine and social media crawlers crawl the website.

The difference is that you don’t need a server anymore. Everything gets generated during the development phase.

It’s powerful because you get the benefits of universal rendering without the need for a server. You can just host your app on GitHub Pages or Amazon S3.

Read more about this on the Static Genereated (Pre Rendering) section of the Nuxt.js docs.

3. Get automatic code splitting (pre-rendered pages)

Nuxt.js is able to generate a static version of your website with a special Webpack configuration.

For each route (page) that is statically generated, the route gets its own JavaScript file too, with just the code that’s needed to run that route.

This can really help with speed because it keeps the size of the JavaScript file small relative to your entire application’s size.

4. Setup via the command line with the starter template

Nuxt.js provides a starter template called starter-template that gives you all the scaffolding that you need to get started with a project with a good folder structure for organization.

Make sure you have vue-cli installed, and run the following command:

$ vue init nuxt-community/starter-template <project-name>

From there just cd into the application and run npm install and you should be good to go.

Click here to learn more about setting up a project with the command line.

6. Get great project structure by default

In many small Vue applications you end up managing the structure of the code as best as you can in multiple files. The default Nuxt.js application structure gives you a great starting point for organizing your application in an understandable way.

Here are a few of the main directories that it sets you up with:

• components — A folder so you can organize your individual Vue components.
• layouts — A folder to contain your main application layouts.
• pages — A folder to contain your app’s routes. Nuxt.js reads all the .vue files inside this directory and creates the application router.
• store — A folder to contain all of your app’s Vuex Store Files.

Click here to learn more about all of the folder structures that Nuxt.js provides for you.

5. Easily set up transitions between your routes

Vue has a wrapper <transition> element that makes it simple to handle JavaScript animations, CSS animations, and CSS transitions on your elements or components.

If you need a refresher on Vue’s <transition> element and transitions in general, we wrote an article about them here.

Nuxt.js sets up your routes in such a way that each page gets wrapped in a <transition> element so you can create transitions between pages simply.

Click here to see an example of how Nuxt.js helps you with page transitions.

7. Easily write Single File Components

In many small Vue projects, components are defined using Vue.component, followed by new Vue({ el: ‘#container’ }) to target a container element in the body of every page.

This works well for small projects where JavaScript is only used to enhance certain views. But in bigger projects it can become difficult to manage.

All of these problems are solved by single-file components with a .vue extension. In order to use them, you have to set up a build process with tools like Webpack and Babel.

Here’s an example of a single-file .vue component

Nuxt.js comes pre-configured out of the box with Webpack for you so you can start using .vue files without having to set up a complicated build process yourself.

To learn more about Single File Components visit the Vue documentation here.

8. Get ES6/ES7 compilation without any extra work

Alongside Webpack, Nuxt.js also comes pre-packaged with Babel. Babel handles compiling the latest JavaScript versions like ES6 and ES7 into JavaScript that can be run on older browsers.

Nuxt.js sets up Babel for you so all of the .vue files and all of the ES6 code that you write inside of the <script> tags compiles down into JavaScript that will work on all browsers.

Click here to learn more about Babel.

9. Get setup with an auto-updating server for easy development

Compared to setting up this process yourself or the change-refresh-change-refresh process that we web developers are used to, developing with Nuxt.js is a breeze. It sets you up with an auto-updating development server.

While you’re developing and working on those .vue files, Nuxt.js uses a Webpack configuration to check for changes and compiles everything for you.

You can run the command npm run dev inside of a Nuxt.js project and it will set up the development server.

10. Access to everything in the Nuxt.js community

Lastly, there’s a GitHub collection called Nuxt Community that compiles helpful libraries, modules, starter kits, and more to make it even easier to create your app. Look through here to see if what you need is available before coding it yourself.