Introduction to Nuxt 3: Part 1

What is Nuxt and why you should use it?

Nuxt is what’s known as a “meta framework”. Basically it’s a framework built on top of another framework. Abstraction Inception. Nuxt is built on top of Vue.js and brings a lot of useful features that are not natively supported in Vue. It’s like upgrading from a Honda Civic to a Honda Civic Type R. The car is still essentially the same, but now you have a lot more power, better brakes and a lot more convenient features that bring the driving experience to the next level.

Okay, so what are these ultra-mega-cool features I am blabbing about and can’t you just use Vue? Well, Nuxt automatically sets up server-side rendering, has automatic code-splitting to improve performance, layout system and powerful file-based routing just to name a few.

So overall, Nuxt is like Vue but on steroids. It’s still Vue, but it’s a bit more opinionated and useful for large-scale production apps. Nevertheless, even if you have a small project on your hands you should definitely give Nuxt a try.

Getting started with Nuxt 3

Version 3 of Nuxt was announced in October of 2021 and the first official stable release of Nuxt 3 came in November 2022. It’s considered a modern rewrite utilizing Vite, Vue 3 and Nitro as well as first-class Typescript support.

Nuxt 3 Features

Auto imports

Part of the improved developer experience of Nuxt includes auto-imports. If you have ever worked on a large scale web app you probably have a long list of imports at the start of your script setup. Well, Nuxt makes it easy by having auto-imports for the following things:

• Nuxt imports for fetching data (useAsyncData, $fetch, useNuxtApp, useRuntimeConfig, useState , etc.)
• Vue imports (all imports coming from vue - ref, computed, onMounted , etc.)
• Project directories (components/ , composables/ and utils/)

💡 You can also disable auto-imports by changing the setting in your nuxt.config.ts file.

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

File-based routing

Nuxt creates routes automatically by looking at your pages/ folder. If there aren’t any files in the directory, routing will not be used, but if there are each of them will correspond to a specific URL. For example, if we have the file pages/about.vue, Nuxt is smart enough to create a route at /about. We can also create a dynamic route by utilizing the square bracket notation - pages/cats/[id].vue.

Nuxt also provides a component to act as a link between pages and prevent full-page refreshes:

<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/cats/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/cats/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>

💡 In pages where a NuxtLink is used, Nuxt will prefetch components in order to make navigation between routes faster.

You can learn more about Routing in Nuxt here:
Routing

CSR & SSR & SSG

Modern frontend development has many approaches to rendering, but the most used ones are CSR (Client-side rendering), SSR (Server-side rendering) and also SSG (Static site generation).

Client-side rendering renders an app in the browser using JavaScript and generally uses the DOM. CSR is good for Single Page Applications (SPAs) where there is a lot of interactivity involved, however the main drawback is that the size of the JavaScript bundle is ever increasing and performance can suffer as the app grows larger.

Server-side rendering generates the HTML template on the server and once that is loaded it can add interactivity using JavaScript. SSR improves page performance, and leads to increased SEO (search engine optimisation) because bots can actually read the HTML that is being served. One of the cons of SSR is that it can tank up costs rather quick and that transitions between routes can take longer. SSR is mostly used for Content-based websites such as blogs or e-commerce.

Lastly there is the Static site generation. The main difference is that it happens at build time - HTML file is generated for each page and JS (optional) and CSS is bundled and shipped together. Since it’s static if you want to make changes, you will need to build the project again and then deploy the output files. The benefits of this approach are that there is minimal if any JavaScript and you don’t need a server. You can host your website on any static hosting service such as Netlify, Vercel, GitHub Pages, etc. SSG is mostly used for marketing pages, which are not expected to change often.

Ok, so what about Nuxt?

So Nuxt has this thing called Universal Rendering and that essentially utilizes SSR to fetch the initial HTML and then uses Vue.js to add missing interactivity and take over the control of the page. The second step is what’s called Hydration.

You can use different types of rendering for different routes by setting routeRules in your nuxt.config.ts:

export default defineNuxtConfig({
  routeRules: {
    // Static page generated on-demand once
    '/articles/**': { static: true },
    // Render these routes with SPA
    '/admin/**': { ssr: false }
  }
})

You can set a component to be rendered client-side by using the <ClientOnly> wrapper component or by adding the “.client” suffix to the name of the component like this: Comment.client.vue.

Module system

Nuxt has a very powerful module system. You can think of modules as plugins for Nuxt, they add functionality on top of the framework and often make integrations with other tools more seamless and easier.

To add a module to your Nuxt app you have to first install it. E.g npm install @nuxt/content. Then you can add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    // Using package name (recommended usage)
    '@nuxtjs/example'
  ]
})

Have a look at all of Nuxt’s modules here:

Modules

Typescript support

Lastly, Nuxt 3 is fully-typed and also preserves types when using auto-imports. This is all great, because once you go TypeScript you never go back.

Moreover, Nuxt has auto-generated types based on the modules we have installed and auto-complete just works out-of-the-box.

💡 Don’t be like this ⬆️

Recap

Nuxt is a framework built on top of Vue.js. It has commonly used features already baked in and is a great tool to build structured Vue web apps.

Open the terminal and try out Nuxt yourself!

npx nuxi init <your-super-cool-new-project-name>

🚨 In Part 2 we will utilize the OMDB (Open Movies Database) API to create our own Nuxt app and showcase some of the features outlined in this first part.

If you have liked this short introduction to Nuxt be sure to share what topic would you like to hear about next and follow me on my socials:

Twitter

LinkedIn

YouTube