Sneak into NuxtJS💚

At the tail end of February 2021, the Vuejs Amsterdam online conference took place. It gathered fans and community members of Vue.js from all over the world. Many fascinating subjects were presented and discussed. Of course, Vue.js 3 was the main focus. The developers of Nuxt.js also had the chance to demonstrate it from the perspective of its current state of development and their future plans for it. They even showed off a pre-alpha version of the Vue.js 3-based Nuxt.js 3.

Nuxt.js Concepts

A web development framework called Nuxt.js is based on the Vue.js framework. It enables you to develop a more self-assured, structured, and SEO-friendly website entirely in Vue.js.

Remember when creating an SEO-friendly website required fiddling with the Vue.js SSR and Vue Meta modules? Additionally, you also had to set up and use Vuex and Vue Router!

Nuxt.js handles that, though! Start a new Vue.js app without the haphazard setup and scaffolding of the past. The create-nuxt-app CLI makes it easy to quickly construct a Nuxt.js application.

Nuxt.js’ ability to prioritize convention above configuration is impressive. This means that by adhering to a particular directory layout, you write fewer configuration files, which makes Nuxt.js happy and saves you a ton of time!

Apps supported by Nuxt.js

Nuxt.js supports building a variety of web apps, including the following:

Server-Side Rendering (SSR)

Apps for SSR are also referred to as Universal Apps. Before being transmitted to the client-side and being shown in the browser, the application is rendered on the server. When developing a Vue.js-based website that is search engine friendly, this is the ideal solution.

Single Page Apps (SPA)

This is what you have been using Vue.js for up till this point. JS and CSS files that make up the app have been assembled. The files are downloaded to the client-side when a user requests an app, and the Vue.js engine renders and displays the app after that.

Static Site Generation (SSG)

Your app can be pre-rendered using Nuxt.js at build time. This implies that the entire application will be transformed into straightforward, static HTML files that can be hosted and delivered via a content delivery network (CDN). A JAMStack app becomes legitimate by selecting the SSG option.

File System Routing

Nuxt.js automatically generates all the Vue.js Routes in your app based on the folder structure inside the pages folder.

For example, consider having this folder structure:

pages/
  --| user/
  -----| index.vue
  --| index.vue

Nuxt.js automatically generates the following route configuration:

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
  ]
}

Data Fetching

You can still apply the standard methods you learned when creating Vue.js apps inside of Nuxt.js applications. But there’s a new player in this game! rendering done on a server. In order to prefetch data when creating the app at the server-side, Nuxt.js offers a new set of data-hooks that you can implement.

Here are two data-hooks offered by Nuxt.js:

fetch() hookThis hook was introduced with Nuxt.js 2.12+ release. It can be used inside Vue.js components stored in the pages folder and components folder.

asyncData() hookThis hook has been around for a while now, and can be used only inside the Vue.js components stored in the pages folder.

Meta Tags and SEO

Nuxt.js makes it so intuitive to add SEO support to your SSR app. You can add Metadata to your app at two different levels:

• Globally using the nuxt.config.js file
• Locally inside a Nuxt.js Page

In the next article I hope to discuss about, how to create a nuxt.js app.

Till then, happy coding.👋🏻