2. Working with Data

Activity 2.01: Creating a Blog List Using the Contentful API

Solution:

Perform the following steps to complete the activity.

Note

To access the code files for this activity, refer to https://packt.live/33ao1f5.

1. Create a new Vue project using the Vue CLI vue create activity command and select the following presets: Babel, SCSS pre-processor (you can choose either of the pre-processor), and the prettier formatter.
2. Add a contentful dependency:

   yarn add contentful

3. In App.vue, remove the default content and import contentful into the component:

   <template>
     <div id=»app»>
     </div>
   </template>
   <script>
   import { createClient } from 'contentful'
   const client = createClient({
     space: ‹hpr0uushokd4›,
     accessToken: ‹jwEHepvQx-kMtO7_2ldjhE4WMAsiDp3t1xxBT8aDp7U›,
   })
   </script>
   <style lang="scss">
   #app {...