a first look at nuxtJS part 2 - layout, components, data fetching

In the last part we learned how to setup out projects and create pages. In this part we will create a layout for navigation with the <NuxtLink> component. We will also configure our application to automatically import components and fetch data with Nuxt's built in fetch hook.

Create layout #

mkdir layouts
touch layouts/default.vue

Include the title and footer from index.vue. The content of the page will be inserted where the <Nuxt /> component is placed.

// layouts/default.vue

<template>
  <div class="container">
    <header>
      <h1>ajcwebdev</h1>
    </header>

    <main>
      <Nuxt />
    </main>

    <footer>
      <a
        href="https://dev.to/ajcwebdev"
        target="_blank"
      >
        Blog
      </a>
      <a
        href="https://github.com/ajcwebdev"
        target="_blank"
      >
        GitHub
      </a>
    </footer>
  </div>
</template>

<style>
  .container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>

Take out the header and footer from the home page.

// pages/index.vue

<template>
  <div class="container">
    <p>This is the home page</p>
  </div>
</template>

<style>
  .container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
</style>

Add NuxtLink for home and about pages #

Create a navigation bar with links to the home and about pages.

// layouts/default.vue

<template>
  <div class="container">
    <header>
      <h1>ajcwebdev</h1>

      <nav>
        <ul>
          <li>
            <NuxtLink to="/">Home</NuxtLink>
          </li>
          <li>
            <NuxtLink to="/about">About</NuxtLink>
          </li>
        </ul>
      </nav>
    </header>

    <main>
      ...
    </main>

    <footer>
      ...
    </footer>
  </div>
</template>

Create Mountains component #

The components directory is where you put all your components which are then imported into your pages. With Nuxt.js you can create your components and auto import them into your .vue files. This means there is no need to manually import them in the script section.

mkdir components
touch components/Mountains.vue

// components/Mountains.vue

<template>
  <div class="container">
    <h2>Mountains</h2>
  </div>
</template>

Auto import components #

Set components to true in nuxt.config.js. Nuxt.js will now scan and auto import your components.

// nuxt.config.js

export default {
  target: 'static',
  components: true
}

Now any components contained inside the components directory can be used on pages without needing to explicitly import the components.

// pages/index.vue

<template>
  <div class="container">
    <p>This is the home page</p>
    <Mountains />
  </div>
</template>

<style>
  ...
</style>

Fetch mountains #

We will use Nuxt's built in fetch hook.

// components/Mountains.vue

<template>
  <div class="container">
    <h2>Mountains</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      )
      .then(res => res.json())
      console.log(this.mountains)
    }
  }
</script>

In our console we can see the data we are receiving is an array of seven mountains.

Display mountains #

To render the list of mountains, use v-for to map over the array and set each list item to mountain. Display the title with mountain.title and set the key to mountains.items with v-bind.

// components/Mountains.vue

<template>
  <div class="container">
    <h2>Mountains</h2>

    <ul>
      <li
        v-for="mountain of mountains"
        v-bind:key="mountain.items"
      >
        
      </li>
    </ul>
  </div>
</template>

<script>
  ...
</script>

Add error and loading state.

// components/Mountains.vue

<template>
  <div class="container">
    <h2>Mountains</h2>

    <p v-if="$fetchState.pending">
      Almost there...
    </p>

    <p v-else-if="$fetchState.error">
      Error
    </p>

    <div v-else>
      <ul>
        <li
            v-for="mountain of mountains"
            v-bind:key="mountain.items"
          >
          
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  ...
</script>

In the next part we will learn how to use route parameters to create dynamic pages.