DEV Community

loading...
Cover image for a first look at nuxtJS part 2 - layout, components, data fetching

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

ajcwebdev profile image anthony-campolo Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

01-

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>
Enter fullscreen mode Exit fullscreen mode

02-

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
Enter fullscreen mode Exit fullscreen mode
// components/Mountains.vue

<template>
  <div class="container">
    <h2>Mountains</h2>
  </div>
</template>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

03-

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>
Enter fullscreen mode Exit fullscreen mode

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

04-

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"
      >
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>

<script>
  ...
</script>
Enter fullscreen mode Exit fullscreen mode

05-

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"
          >
          {{ mountain.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  ...
</script>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
fininhors profile image
Francisco Junior

Good job. Thanks for share.

Forem Open with the Forem app