How to export and import js script?

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

if I add import Vue from "vue";, for example import Vue from "vue"; export { Vue.prototype.$assetsResolution = document.body.clientWidth * devicePixelRatio <= 1920 && document.body.clientHeight * devicePixelRatio <= 1080 ? 1080 : 2160; } I will get Syntax Error: D:\Projects\FrontEnd\gta\src\vue-extensions\prototypes.js: Unexpected token, expected "," (5:4) > 5 | Vue.prototype.$assetsResolution = | ^ 6 | document.body.clientWidth * devicePixelRatio <= 1920 && 7 | document.body.clientHeight * devicePixelRatio <= 1080 8 | ? 1080 — Gorilka
– Gorilka, Commented May 15, 2021 at 14:39
I don't think you need to export anything. Just move the Vue.prototype.$assetsResolution=... after import. — Riddhesh Markandeya
– Riddhesh Markandeya, Commented May 15, 2021 at 16:32

tony19 · Accepted Answer · 2022-07-15 23:02:05Z

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

edited Jul 15, 2022 at 23:02

answered May 15, 2021 at 19:45

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to export and import js script?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related