How to export and import js script? - vue.js

Question

Hello I have a code like this which works fine in main.js
Vue.prototype.$assetsResolution =
document.body.clientWidth * devicePixelRatio <= 1920 && document.body.clientHeight * devicePixelRatio <= 1080
? 1080
: 2160;
However, I have a lot of similar things and I would like to move the prototype code into another file.
For example, I tried to do it like this
//main.js
import "./vue-extensions/prototypes"
//prototypes.js
import Vue from "vue"
export {
Vue.prototype.$assetsResolution =
document.body.clientWidth * devicePixelRatio <= 1920 &&
document.body.clientHeight * devicePixelRatio <= 1080
? 1080
: 2160
}
But I have an error Unexpected token, expected "," in Vue.prototype

Answer 1

That syntax looks incorrect.
The external file does not need to export anything. It should just include the Vue.prototype.$assetsResolution assignment:
// prototypes.js
import Vue from 'vue'
Vue.prototype.$assetsResolution =
document.body.clientWidth * devicePixelRatio <= 1920 &&
document.body.clientHeight * devicePixelRatio <= 1080
? 1080
: 2160;
demo 1
You could also make this a Vue plugin by exporting a function that receives the Vue to modify:
// prototypes.js
export default Vue => {
Vue.prototype.$assetsResolution =
document.body.clientWidth * devicePixelRatio <= 1920 &&
document.body.clientHeight * devicePixelRatio <= 1080
? 1080
: 2160;
}
...which would be used like this:
// main.js
import Vue from 'vue'
import MyPlugin from './prototypes'
Vue.use(MyPlugin)
demo 2