mercs600

// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console

mercs600

<template>
  <div>
    <h1> {{ title }} </h1>
    <p> Just check HTML source or inspect window.__NUXT__ </p>
  </div>
</template>
<script>
export default {
  asyncData (context) {
    // will be merged with data object,

mercs600

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

mercs600

<template>
  <div>
    <h1> Context usage </h1>
    <div v-if="isMacOS">
      Content for MacOS
    </div>
    <div v-else-if="isWindows">
      Content for Windows
    </div>
    <div v-else>

mercs600

<div data-server-rendered="true" id="__nuxt"><!----><!----><div id="__layout"><div class="container"><div><h1> Context usage </h1> <div>
    Content for MacOS
  </div></div></div></div></div><script>window.__NUXT__=(function(a){return {layout:"default",data:[{isWindows:false,isMacOS:a}],fetch:[],error:null,state:{},serverRendered:a,routePath:"\u002FasyncData-context",logs:[]}}(true));</script>

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="`/asyncData-blog/${post.id}`">{{ post.title }}</nuxt-link>
      </div>
    </div>

mercs600

<template>
  <div>
    <h1> {{ post.title }} </h1>
    <div> {{ post.body }} </div>
    <nuxt-link to="/asyncData-blog">back to list</nuxt-link>
  </div>
</template>
<script>
export default {
  asyncData: ({ $http, params }) => $http

mercs600

export default {
  asyncData: ({ $http, params, error }) => $http
      .$get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
      .then(post => ({ post }))
      .catch(err => error(err))
};

mercs600

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>{{ error.statusCode }} An error occurred: {{ error.message }}</h1>
    <nuxt-link to="/">Home page</nuxt-link>
  </div>
</template>

<script>
export default {

mercs600

<template>
  <div>
    <h1> {{ title }} </h1>
    <p> Just check HTML source or inspect window.__NUXT__ </p>
  </div>
</template>
<script>
export default {
  data () {
    return {