Access external js files on vue instance

Question

I am developing a simple app, where i set a list of consts that i want to use in my development. so i created a file like this:

consts.js

export default {
MAX_HEALTH: 100,
MAX_HEALTH_PERCENTAGE: '100%',
ATTACK_FLAG: 1,
HEALTH_FLAG: -1,
PERCENTAGE: '%',
ATTACK_MIN_RANGE: 1,
ATTACK_YOU_MAX_RANGE: 10,
ATTACK_MONSTER_MAX_RANGE: 7,
SPECIAL_ATTACK_MIN_RANGE: 5,
SPECIAL_ATTACK_YOU_MAX_RANGE:12,
HEAL_MIN_RANGE: 1,
HEAL_MAX_RANGE: 10

}

and i want to access the consts in a separate file on the vue instance:

window.onload = function () {
    new Vue({
        el: '#appMonster',
        data: {
            startClicked: false,
            monsterLife: {
                width: '100%',
                life: 100
            },
            youLife: {
                width: '100%',
                life: 100
            }
        },
        methods: {
...

for example inside methods, how can i do it?

I already tried to import the file at the top before and after onload, but i always get this error: unexpected identifier, any way to solve this?

I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.

Thank you

acdcjunior · Accepted Answer · 2018-04-24 13:50:47Z

I am not using webpack, I am just working with the vue instance accessing the vue script cdn with basic script import.

If that's the case, don't use import/export. Just:

consts.js:

const constants = {
    MAX_HEALTH: 100,
    MAX_HEALTH_PERCENTAGE: '100%',
    ATTACK_FLAG: 1,
    HEALTH_FLAG: -1,
    PERCENTAGE: '%',
    ATTACK_MIN_RANGE: 1,
    ATTACK_YOU_MAX_RANGE: 10,
    ATTACK_MONSTER_MAX_RANGE: 7,
    SPECIAL_ATTACK_MIN_RANGE: 5,
    SPECIAL_ATTACK_YOU_MAX_RANGE:12,
    HEAL_MIN_RANGE: 1,
    HEAL_MAX_RANGE: 10 
}

Other file, provided you imported <script src="consts.js"></script> before, simply do:

// somewhere before: <script src="consts.js"></script>
<script>
window.onload = function () {
    new Vue({
        el: '#appMonster',
        data: {
            startClicked: false,
            monsterLife: {
                width: '100%',
                life: constants.MAX_HEALTH          // <==== use constants.PROPNAME
            },
            youLife: {
                width: '100%',
                life: 100
            }
        },
        methods: {

See plunker demo here.

Collectives™ on Stack Overflow

Access external js files on vue instance

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