CODEWITHSUNDEEP
vue.jsnuxt.jsuploadcare
jamie seymour
jamie seymour

Reputation: 1

Nuxt, Uploadcare Integration (uploadcare-vue)

I'm am trying to implement uploadcare in my nuxt project but cant seem to get it to work.

I'm am using uploadcare-vue (https://github.com/tipeio/uploadcare-vue)

I followed the installation steps but I am unable to set the public key. Cant find a solution online for the correct way to set the public key in nuxt/vue and I have tried multiple approaches to no avail.

I feel like a noob. Error

<template>
...
  <uploadcare
              :publicKey="YOUR_PUBLIC_KEY"
              @success="onSuccess"
              @error="onError"
            >
              <v-btn>New Asset</v-btn>
            </uploadcare> 
...
</template>

<script>
import Uploadcare from 'uploadcare-vue'

export default {
  components: {
    Uploadcare
  },
 data() {
    return {
  ...
   },

  methods: {
    onSuccess() {
      console.log('dede')
    }
  }
}

package.json

 "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@mdi/js": "^5.9.55",
    "@nuxtjs/fontawesome": "^1.1.2",
    "@nuxtjs/pwa": "^3.0.0-0",
    "@nuxtjs/vercel-builder": "^0.21.2",
    "aos": "^3.0.0-beta.6",
    "gsap": "file:gsap-bonus.tgz",
    "nuxt": "^2.0.0",
    "nuxt-fontawesome": "^0.4.0",
    "nuxt-gsap": "^0.1.4",
    "uploadcare-vue": "^1.0.0",
    "vanilla-tilt": "^1.7.0",
    "vue-head": "^2.2.0",
    "vue-plugin-load-script": "^1.3.2",
    "vue-scrollmagic": "^1.2.0",
    "vue-tilt.js": "^1.1.1"
  },

Upvotes: 0

Views: 254

Answers (1)

Alex Chernenko
Alex Chernenko

Reputation: 321

You're trying to set a public key dynamically using the v-bind directive. Instead, you should use a custom attribute publicKey. See Passing Data to Child Components with Props

<template>
...
  <uploadcare
              publicKey="YOUR_PUBLIC_KEY"
              @success="onSuccess"
              @error="onError"
            >
              <v-btn>New Asset</v-btn>
            </uploadcare> 
...
</template>

Upvotes: 0

Related Questions