CODEWITHSUNDEEP
vue.jsimagekit
redshift
redshift

Reputation: 5227

Imagekit SDK and NuxtJS: How to import SDK correctly?

I am using the Imagekit VueJS SDK and have created a plugin file for it:

vueimagekit.js in /plugins folder.

import ImageKit from "imagekitio-vue"

Vue.use(ImageKit, {
  urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
  publicKey: "your_public_api_key", // optional
  authenticationEndpoint: "https://www.your-server.com/auth" // optional
  // transformationPosition: "path" // optional
})

I also attached it to the plugins: [ '~/plugins/vueimagekit.js'] area of nuxt.config.js. And my code template is using it like so:

    <ik-image
      width="400"
      src="https://ik.imagekit.io/omnsxzubg0/iss061e098033_lrg_x2pIAiRxk.jpg"
    >
    </ik-image>

This works fine in my app. However, the docs state that I can also import components individually as needed like so:

import { IKImage, IKContext, IKUpload } from "imagekitio-vue"

export default {
  components: {
    IKImage,
    IKContext,
    IKUpload
  }
}

Thus, I tried to do this in my plugins/vueimagekit.js file but it did not work:

import Vue from 'vue'
import { IKImage } from 'imagekitio-vue'
Vue.use(IKImage, {
  urlEndpoint: 'https://ik.imagekit.io/omnsxzubg0/'
  // publicKey: "your_public_api_key",
  // authenticationEndpoint: "https://www.your-server.com/auth"
})

I get the following error in console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ik-image> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pages/photos/index.vue> at pages/photos/index.vue
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

Anyone got any tips on how I can do this correctly? Thank you!

Upvotes: 0

Views: 536

Answers (2)

lextract
lextract

Reputation: 158

I had the same issue. I found that by just changing the import statement in plugins/vueimagekit.js to const {ImageKit} = require('imagekitio-vue') the "ik-" components work.

Don't forget to add the plugin line in nuxt.config.js.

Upvotes: 2

Vaibhav Bansal
Vaibhav Bansal

Reputation: 46

Imagekit is a plugin that can be installed and then components ik-image, ik-upload and ik-context can be used globally anywhere in your app, if you want to use IKImage, IKContext or IKUpload individually in your specific file then you don't need to register the Imagekit plugin, you can just import the respective component in that file and use IKImage component to load image instead of ik-image like this -

<IKImage :publicKey="publicKey" :urlEndpoint="urlEndpoint" :src="your_image_src" />

or like this

<IKContext :publicKey="publicKey" :urlEndpoint="urlEndpoint"> <IKImage :path="your_image_path" :transformation="[{ height: 300, width: 400 }]" /> </IKContext>

Upvotes: 2

Related Questions