What is the right way to import vue package in nuxt?

Question

I try to import this package into my nuxt project. All my coding experiments can be found here. I will refer to different branches.

There are several ways to do so:

1. Just import it right in the page like here (master branch)

This way worked well. You can go to the uploading page via a button on a home page.

Until you manually refresh the page

Then you will get this error SyntaxError Cannot use import statement outside a module

The same error happens when you try to build it.

2. Import it via plugins (like in plugin-use branch with or without vendor option in build)

I've got the same error.

3. Import it via plugins with some options (like in plugin-options branch)

Then the package loads only when you refresh the page and only in dev mode.

If you will go to that button on a home page (referenced before) - there will be an empty page.

4. Import it through modules (like in modules branch).

Then the nuxt cannot load at all, this error happens SyntaxError: Invalid or unexpected token

Could you comment on each method and why it doesn't work? How to import it correctly?

Answer 1

The final answer is following (I've looked up the projects which use this package).

There was a project which run on Nuxt.

These are changes which you should add to @tamzid-oronno 's answer

//vue-upload-multiple-image.js

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
import VueUploadMultipleImage from 'vue-upload-multiple-image'

Vue.use(VueLazyload) // this is from the package installation guide
Vue.component('VueUploadMultipleImage', VueUploadMultipleImage)

And list it in plugins the same way.

//nuxt.config.js
plugins: [ 
      { src: '~plugins/vue-upload-multiple-image', ssr: false }
]

Thus you will be able to use the package without importing it in pages as tags. This was implemented in plugin_plus_lazy branch.

Both tags will work vue-upload-multiple-image and VueUploadMultipleImage.

//your-index-file.vue
<template>
  <div id="my-strictly-unique-vue-upload-multiple-image" style="display: flex; justify-content: center;">
    <vue-upload-multiple-image
      @upload-success="uploadImageSuccess"
      @before-remove="beforeRemove"
      @edit-image="editImage"
      :data-images="images"
      idUpload="myIdUpload"
      editUpload="myIdEdit"
      dragText = "Drag an image here"
      browseText = "(or click here to browse)"
      primaryText = "Default Image"
      markIsPrimaryText = "Set as default image"
      popupText = "This image will be set as default"
      dropText = "Drag and drop"
      accept = image/jpeg,image/png,image/jpg,image/tif,image/tiff
    ></vue-upload-multiple-image>
  </div>
</template>

<script>

export default {
  name: "AppUpload",
  data(){
    return{
      file:"",
      images: []
    }
  },
  methods:{

    uploadImageSuccess(formData, index, fileList) {    },
    beforeRemove (index, done, fileList) {    },
    editImage (formData, index, fileList) {   },
  }
}
</script>

<style scoped>

</style>

To create a static version and test it on your local machine do the following:

$ npm run generate
# test the project
$ npm install http-server
$ cd dist
$ http-server -p 3000

I still have a question - why does it work? :)

Answer 2

Use it as plugin.

1. In the plugins folder, make a file named vue-upload-multiple-image.js

   //vue-upload-multiple-image.js
   
   import Vue from 'vue'
   import {VueUploadMultiple} from 'vue-upload-multiple-image'
   Vue.use(VueUploadMultiple)
   

2. List it under plugins block on nuxt.config.js

   //nuxt.config.js
   
   plugins: [ 
         { src: '~plugins/vue-upload-multiple-image', ssr: false }
   ]
   

Thus you will be able to use the package on any component of your project