mercs600

export default {
  data () {
    return {
      posts: []
    }
  },
  watch: {
    '$fetchState.error' (error) {
      // do something with error
      console.log(error)

mercs600

<template>
  <div>
    <div v-if="$fetchState.pending">
      <content-placeholders>
        <content-placeholders-heading/>
        <content-placeholders-text :lines="3" />
      </content-placeholders>
    </div>
    <div v-if="$fetchState.error">
      <h1>{{ $fetchState.error.statusCode }} An error occurred: {{ $fetchState.error.message }}</h1>

mercs600

export default {
  data () {
    return {
      posts: []
    }
  },
   activated() {
    // Call fetch again if last fetch more than 30 sec ago
    if (this.$fetchState.timestamp <= (Date.now() - 30000)) {
      this.$fetch()

mercs600

<template>
  <div class="container">
    <nuxt keep-alive />
  </div>
</template>

mercs600

export default {
 /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/vue-content-placeholders.js'
  ]
}

mercs600

import Vue from 'vue'
import VueContentPlaceholders from 'vue-content-placeholders'

Vue.use(VueContentPlaceholders)

mercs600

<template>
  <div>
    <div v-if="$fetchState.pending">
      <content-placeholders>
        <content-placeholders-heading/>
        <content-placeholders-text :lines="3" />
      </content-placeholders>
    </div>
    <div v-if="post">
      <h1>{{ post.title }}</h1>

mercs600

<template>
  <div v-if="post">
    <h1>{{ post.title }}</h1>
    <div>{{ post.body }}</div>
    <nuxt-link to="/fetch-blog">back to list</nuxt-link>
  </div>
</template>
<script>
export default {
  data () {

mercs600

<template>
  <div>
    <h1> Blog posts </h1>
    <div v-if="posts && posts.length">
      <div
        v-for="post in posts"
        :key="post.id">
        <nuxt-link :to="`/fetch-blog/${post.id}`">{{ post.title }}</nuxt-link>
      </div>
    </div>

mercs600

<div data-server-rendered="true" id="__nuxt"><!----><!----><div id="__layout"><div class="container"><div data-fetch-key="0"><h1> fetch method </h1> <p> Just check HTML source or inspect window.__NUXT__ </p></div></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],fetch:[{title:"fetch method"}],error:null,state:{},serverRendered:true,routePath:"\u002Ffetch-basic",logs:[]};</script>