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!
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
.