Data & API

The data folder contains the data you will present to the users. For example, the contents of blog posts are in this folder, you can create new pages by changing the contents by adding new content. see Directory structure

If you want to show dynamic content instead of static pages, you can shoot content via an API instead of files in the data folder. You can see this in the example below.

Data

Static data example

Live demo : https://photoscope.themebiotic.com/example

// Static data example
// ~/page/example.vue

<template>
  <div>
    <Section id="exampleHeader" class="head">
      <b-container>
        <b-row>
          <b-col>
            <h1>{{ pageTitle }}</h1>
            <p class="lead">{{ lead }}</p>
          </b-col>
        </b-row>
      </b-container>
    </Section>
    <Section id="examplePosts" class="space">
      <b-container>
        <b-row>
          <b-col v-for="post in posts" :key="post.id" :cols="12" :lg="6">
            <article>
              <h2>{{ post.title }}</h2>
              <p>{{ post.body }}</p>
            </article>
          </b-col>
        </b-row>
      </b-container>
    </Section>
  </div>
</template>

<script>
import ExampleData from '~/data/example.js'

export default {
  name: 'Example',
  layout: 'main',
  transition: 'fade',
  components: {
    Section: () => import('~/components/Section.vue')
  },
  data() {
    return ExampleData
  },
  head() {
    return {
      title: this.pageTitle,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.lead
        }
      ]
    }
  }
}
</script>

Static data file from data folder

// ~/data/example.js

export default {
  pageTitle: 'Static Data Example',
  lead: 'A sample page created using static data from the data folder.',
  posts: [
    {
      id: 'unique-post-id-1',
      title: 'Example Post Title',
      body: 'Pellentesque habitant morbi...'
    },
    {
      id: 'unique-post-id-2',
      title: 'Example Post Title 2',
      body: 'Idque Caesaris facere...'
    },
  ]
}

API

Dynamic API Fetch

Live demo : https://photoscope.themebiotic.com/example-api

Every time you need to get asynchronous data. fetch is called on server-side when rendering the route, and on client-side when navigating.

It exposes $fetchState at the component level:

• $fetchState.pending: Boolean, allows you to display a placeholder when fetch is being called on client-side.
• $fetchState.error: null or Error, allows you to display an error message
• $fetchState.timestamp: Integer, is a timestamp of the last fetch, useful for caching with keep-alive

For more information please visit the Nuxt API: The fetch Method

// ~/page/example-api.vue

<template>
  <div>
    <Section id="exampleHeader" class="head">
      <b-container>
        <b-row>
          <b-col>
            <h1>{{ pageTitle }}</h1>
            <p class="lead">{{ lead }}</p>
          </b-col>
        </b-row>
      </b-container>
    </Section>
    <Section id="examplePosts" class="space">
      <b-container>
        <p v-if="$fetchState.pending">Fetching posts...</p>
        <p v-else-if="$fetchState.error">
          Error while fetching posts: {{ $fetchState.error.message }}
        </p>
        <b-row>
          <b-col v-for="post in posts" :key="post.id" :cols="12" :lg="6">
            <article>
              <h2>{{ post.title }}</h2>
              <p>{{ post.body }}</p>
            </article>
          </b-col>
        </b-row>
      </b-container>
    </Section>
  </div>
</template>

<script>
export default {
  name: 'ExampleAPI',
  layout: 'main',
  transition: 'fade',
  components: {
    Section: () => import('~/components/Section.vue')
  },
  async fetch() {
    this.posts = await this.$axios.$get(
      'https://jsonplaceholder.typicode.com/posts?_page=1&_limit=10'
    )
  },
  data() {
    return {
      pageTitle: 'Example API',
      lead: 'Page example created using dynamic data instead of static data.',
      posts: []
    }
  },
  fetchOnServer: false,
  head() {
    return {
      title: this.pageTitle,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.lead
        }
      ]
    }
  }
}
</script>