Using bootstrap-vue components in electron-vue project gives error on data property change

Question

I'm working on a project where I use electron-vue and to make the app look better I use bootstrap-vue. After a lot of debugging, I have found that changing a data property(in the parent component) that is linked to bootstrap components props. It will give me error messages telling me not to mutate props values, and that they are read-only. As it seems for me, the code works and executes, but will give me a lot of errors in the console. When I say it seems to work, what I mean is that both console.log and visually on bootstrap component it seems to change the variables correctly.

After writing a lot of test cases I have found out that changing a data property does not give an error. But when changing a data property that is linked to a bootstrap component prop it will.

A test case that shows where these error messages show up is in the code below:

<template>
    <b-progress :max="maxNumberOfFiles" show-value>
        <b-progress-bar :value="currentNumberOfErrorFiles"
                        :max="maxNumberOfFiles"
                        variant="danger"
                        show-value
                        />
    </b-progress>
</template>

export default {
    data() {
        maxNumberOfFiles: 1,
        currentNumberOfErrorFiles: 0
    },
    methods {
        test: function() {
            currentNumberOfErrorFiles = 1;
        }
    }
}

The code above will result in 3 errors:

• $attrs is readonly
• $listeners is readonly
• Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

But this code produces zero errors:

<template>
    <progress   :value="currentNumberOfErrorFiles"
                :max="maxNumberOfFiles"
                >
    </progress>
</template>

export default {
    data() {
        maxNumberOfFiles: 1,
        currentNumberOfErrorFiles: 0
    },
    methods {
        test: function() {
            currentNumberOfErrorFiles = 1;
        }
    }
}

I have tried to use google for similar problems and look at the doc for both electron-vue and bootstrap-vue, and can't find anything that helped me. Is there anyone that have run into the same problem or have a solution on how to get rid of those errors?

Answer 1

So after a lot of headaches, I finally found a way to avoid all these warnings and errors. When I initialized the project I used these commands:

$ npm install vue-cli -g
$ vue init simulatedgreg/electron-vue <<project-name>>

After a suggestion on reinitializing the project using the vue-cli and add the plugin for electron after (This person created a quick project and had no problems). So when initializing the project again I used these commands:

npm install vue-clie -g
vue create <<project-name>>
cd <<project-name>>
vue add electron-builder
npm install bootstrap-vue
npm install

If I remeber correctly those were all the npm install commands you needed, but if you get an error of a package missing, just use npm install <> to install it.

Now I had to move every .vue file over to the new project and check that all the import statements are correct, and import and use bootstrap again in the index.js.

If you use vue-router, vuex or vuex-electron these also need to be moved over and installed again. This should just be to move the files over to the new project and check where they were imported in the old files and copy that over.

For me, it seemed that the vue init command did something that the bootstrap-vue package doesn't like. I didn't have a very large project, so the whole process took about 15-20 min.

To run an auto update dev server use the command npm run electron:serve and the command npm run electron:build to build the project. These commands can be changed in the package.json file.

The folder structure is a bit different, there will no longer be a renderer and main folder. Everything will be in the src folder. The main.js from the main folder is now named background.js. Apart from that, I think it is similar enough to figure out by just looking through the files.