Add CloudKit JS to Vue Project

Question

I'm trying to add CloudKit JS to a new Vue project. Ideally I'd be able to access CloudKit's functions from any component in my app. I'm brand new to Vue, so please go easy on me. :)

So far, I've tried putting the following in main.js:

var fetch = require('node-fetch')
var CloudKit = require("./cloudkit.js")

CloudKit.configure({
  services: {
    fetch: fetch
  },
  containers: [{
    containerIdentifier: '...',
    apiToken: '...',
    environment: 'development'
  }]
})

That gives me a script error in cloudkit.js:

TypeError: Cannot read property 'ArrayBuffer' of undefined

So then I read this SO post and tried this in App.vue:

export default {
  name: 'App',
  components: {
    'master': Master
  },
  mounted() {
    let CloudKit = document.createElement('script')
    CloudKit.setAttribute('src', 'https://cdn.apple-cloudkit.com/ck/2/cloudkit.js')
    document.head.appendChild(CloudKit)
  }
}

I'm then able to configure CloudKit and use it inside App.vue, but I'm unclear on how to make CloudKit available in all my components without redefining it as I've done in the mounted() function above.

How can I import CloudKit and make it available in my Vue app globally?

Answer 1

Your can add a new global property in vue as well :

Import CloudKit as you did then add this in your main.js : Vue.prototype.$CloudKit = CloudKit

Now, Cloudkit is available in your project with this.$CloudKit

More info here

PS: you may configure cloudkit in mounted in the app

Answer 2

I might be over-simplifying things, but I tried adding:

<script src="https://cdn.apple-cloudkit.com/ck/2/cloudkit.js"></script>

...to the index.html file in my Vue project, and it seems to work great. The CloudKit object is available in all of my components. ¯\_(ツ)_/¯