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

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

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