.gitignore
package.json
gridsome.config.js
gridsome.server.js
📁dist
📁node_modules
📁src
├─ main.js
├─ 📁layouts
   └─ Default.vue
├─ 📁pages
   ├─ Index.vue
   ├─ AboutUs.vue
   └─ Blog.vue
├─ 📁templates
   └─ BlogPost.vue
📁static

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-contentful',
      options: {
        typeName: 'Contentful',
        space: 'YOUR_SPACE', // required
        accessToken: 'YOUR_ACCESS_TOKEN', // required
        host: 'cdn.contentful.com',
        environment: 'master'
      }
    }
  ]
}

module.exports = function (api) {
  api.loadSource(async store => {
    // Fetch data from APIs
    const { data } = await axios.get('https://scrapp-slide.herokuapp.com/api/scrap/find/mafeserna')

    // Create a new GraphQL content type
    const posts = store.addContentType({
      typeName: 'Talks'
    })

    // Add data to the new content type
    data.map((item) => {
      posts.addNode({
        id: item.id,
        url: 'https://slides.com' + item.url,
        slug: item.slug,
        viewCount: item.viewCount,
        imageUrl: item.imageUrl,
        description: item.description
      })
    })
  })
}

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'docs/**/*.md',
        typeName: 'DocPage'
      }
    }
  ]
}

<!-- Layout -->
<template>
  <div>
    <header />
    <slot /> <!-- Page content will be inserted here  -->
    <footer />
  </div>
</template>

// src/main.js

import Layout from '~/layouts/Default.vue'

export default function (Vue, { head, router, isServer }) {
  Vue.component('Layout', Layout)
}

<template>
  <Layout>
    <h1>About us!</h1>
  </Layout>
</template>

<style>
  h1 { font-size: 32px }
</style>

<script>
export default {
  metaInfo: {
    title: 'About us'
  }
}
</script>

<template>
  <Layout>
    <h1>My blog</h1>
    <div v-for="edge in $page.talks.edges" :key="node.id">
       <h3>{{ node.slug }}</h3>
       <g-link :to="node.id">Read more</g-link>
    </div>
  </Layout>
</template>


<page-query>
query Talks {
  talks: allTalks {
    edges {
      node { 
        id
        imageUrl
        slug
        url
      }
    }
  }
}
</page-query>

<template>
  <Layout>
    <h1 v-html="$page.post.title" />
    <div v-html="$page.post.content" />
  </Layout>
</template>

<page-query>
query Post ($id: String!) {
  post: contenfulPost (id: $id) {
    title
    content
  }
}
</page-query>

<script>
export default {
  metaInfo () {
    return {
      title: this.$page.post.title
    }
  }
}
</script>

<template>
  <div class="card">
    {{ message }}
    <button @click="onClick">
      Change
    </button>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data () {
    return {
      message: 'Try change me!'
    }
  },
  methods: {
    onClick () {
      this.message = 'Here you go :)'
    }
  }
}
</script>

<style>
.card {
  padding: 20px;
  background: #FFF;
}
</style>

<template>
  <Card />
</template>

<script>
import Card from '~/components/Card.vue'

export default {
  components: {
    Card
  }
}
</script>

<!-- Link with string path -->
<g-link to="/about">About us</g-link>

<!-- Link with variable path -->
<g-link :to="node.path">Read more</g-link>

<g-image src="~/image.png" width="500" height="300" />