getBucketDataFromCosmic.js

data() {
    return {
      // homepage data from Cosmic API
      homepageData: '',
      homepageContent: '',
      cosmicAssetObjs: [],
    }
}
mounted() {
  // Instantiate Cosmic
  const Cosmic = require('cosmicjs')()

  // Instantiate the specific Cosmic JS Bucket you want to access
  // Pass in read and write keys if necessary.
  const bucket = Cosmic.bucket({
    slug: 'cosmic-space',
    read_key: '',
    write_key: ''
  })

  // Now that we have our desired bucket, get data from it and mutate as necessary:
  bucket.getBucket().then(data => {
    console.log(data)
    // Loop through returned bucket data
    // get the appropriate object, and assign to the right value
    // We want to put all the information of "Cosmic Assets" (Planets, Asteroids, etc.) into their own array:
    // We can also use the CMS to display other content (headers, information, etc.):  
    let homepageObj
    data.bucket.objects.map((object) => {
      if (object.title === 'Homepage') {
        homepageObj = object
      } else {
        this.cosmicAssetObjs.push(object)
      }
    })
    if (homepageObj) this.assembleHomepageData(homepageObj)
  }).catch(err => {
    console.log('Error getting bucket data:', err)
  })

  assembleHomepageData (homepageObjFromAPI) {
    this.homepageData = homepageObjFromAPI
    this.homepageContent = homepageObjFromAPI.content
  }
}