SHARE
TWEET

Untitled

a guest Aug 19th, 2019 149 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <div>
  3.     <nuxt-link
  4.       v-for="post in posts"
  5.       :key="post.id"
  6.       :to="`/post/${post.id}`"
  7.       class="border-b pb-5 mt-5"
  8.     >
  9.       <h2 class="text-4xl">{{ post.title }}</h2>
  10.       <VueMarkdown id="content">{{ post.content }}</VueMarkdown>
  11.     </nuxt-link>
  12.   </div>
  13. </template>
  14.  
  15. <script>
  16. import VueMarkdown from 'vue-markdown'
  17. import gql from 'graphql-tag'
  18.  
  19. const posts = gql`
  20.   query posts($first: Int!, $skip: Int!) {
  21.     posts(orderBy: createdAt_ASC, first: $first, skip: $skip) {
  22.       id
  23.       slug
  24.       title
  25.       content
  26.     }
  27.   }
  28. `
  29.  
  30. export default {
  31.   name: 'BlogPostsCards',
  32.   components: {
  33.     VueMarkdown
  34.   },
  35.   props: {
  36.     initialPosts: {
  37.       type: Number,
  38.       default: 3
  39.     }
  40.   },
  41.   data: () => ({
  42.     loading: 0
  43.   }),
  44.   apollo: {
  45.     posts: {
  46.       query: posts,
  47.       variables: {
  48.         first: 3,
  49.         skip: 0,
  50.         orderBy: 'updatedAt_ASC'
  51.       }
  52.     }
  53.   }
  54. }
  55. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top