Nuxt.js

Nuxt.js is a robust framework built on top of Vue.js, designed to make the development of Vue.js applications simpler and more streamlined. Created by the Chopin brothers, it provides a higher level of abstraction, bringing structure, configurations, server-side rendering, and many other beneficial features to Vue.js applications. Nuxt.js is designed to abstract away complex configurations and facilitate the creation of Vue applications, from Single Page Apps (SPAs), Progressive Web Apps (PWAs), to fully rendered server-side applications.

Module 1: Introduction to Nuxt.js

Understanding Nuxt.js

Nuxt.js is a progressive framework based on Vue.js to create modern web applications. It is configured to use Vue's official server-rendering library and seamlessly handles many common tasks.

Setting Up a Nuxt.js Project

Nuxt.js provides its own command line utility for creating a new project. We'll cover how to set up a new project and navigate the file structure.

npx create-nuxt-app nuxtjs-app

Understanding Pages and Routing in Nuxt.js

Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the pages directory.

<template>
  <h1 class='red'>Hello Nuxt.js!</h1>
</template>
<script>
export default {
  // page properties go here
}
</script>

Module 2: Nuxt.js Layouts and Components

Nuxt.js Layouts

Layouts are a great help when you want to change the look and feel of your Nuxt.js app. Whether you want to include a sidebar or have distinct layouts for mobile and desktop.

<template>
  <div>
    <nuxt />
  </div>
</template>

Using Components

Components are one of the key building blocks of Vue.js. They help you extend basic HTML elements to encapsulate reusable code.

<template>
  <div>
    <MyComponent />
  </div>
</template>
<script>
import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

Module 3: Fetching Data in Nuxt.js

Using asyncData

In universal mode, Nuxt.js extends Vue.js by adding an asyncData method to let you handle async operations before setting the component data.

<script>
export default {
  async asyncData({ params }) {
    let { data } = await axios.get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

Using fetch

The fetch method, like asyncData, is called before rendering the component. Unlike asyncData, it allows you to set the component data.

<script>
export default {
  data() {
    return { posts: [] }
  },
  async fetch() {
    let { data } = await axios.get('https://api.nuxtjs.dev/posts')
    this.posts = data
  }
}
</script>