mercs600

export const actions = {
  async nuxtServerInit ({ commit }, { $http, error }) {
    try {
      const menu = await $http.$gest('api/menus')
      commit('setMenu', menu)
    } catch (err) {
      return error(err)
    }
  }
}

mercs600

<template>
  <div class="container">
    <div class="menu">
      <nuxt-link
        v-for="({link, label}, key) in menu"
        :key="key"
        :to="link"> {{ label }} </nuxt-link>
    </div>
    <nuxt
      :keep-alive-props="{ max: 10 }"

mercs600

export const actions = {
  async nuxtServerInit ({ commit }, { $http }) {
    const menu = await $http.$get('api/menu')
    commit('setMenu', menu)
  }
}

export const state = () => ({
  menu: []
})

mercs600

export const state = () => ({
  menu: []
})

export const mutations = {
  setMenu(state, payload) {
    state.menu = payload
  }
}

mercs600

export default {
  ...
  /**
   * Nuxt server middlewares
   */
  serverMiddleware: [
    { path: '/api/menu', handler: '~/api/menu.js' },
  ],
  ...
}

mercs600

export default {
  ...
  /**
   * Nuxt server middlewares
   */
  serverMiddleware: [
    { path: '/api/menu', handler: '~/api/menu.js' },
  ],
  ...
}

mercs600

export default {
  ...
  /**
   * Nuxt server middlewares
   */
  serverMiddleware: [
    { path: '/api/menu', handler: '~/api/menu.js' },
  ],
  ...
}

mercs600

export default function (req, res, next) {
  const menu = [
    {
      label: 'Home',
      link: '/'
    },
    {
      label: 'asyncData simple',
      link: '/asyncData-basic'
    },

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

<template>
  <div>
    <div v-if="$fetchState.pending">
      <content-placeholders-text :lines="1" />
    </div>
    <div v-else-if="author">
      <p>{{ author.name }} / {{ author.email }}</p>
    </div>
  </div>
</template>