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

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:

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.

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

I've got the same error.

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.

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?

Solution

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? :)