I have been following the example from the uibuilder wiki on how to use http-vue-loader to use components without a build step. It works very well and am pleased with the results. I have been working my way through some of the examples from the Bootstrap Vue site, but have one question.
In their examples like the overview one for alerts on the page I linked to, start the script with export default {. This doesn't work, but when I substitute in module.exports = { for it it works perfectly inside the .vue file I created. I made this modification based on the uibuilder wiki example.
My question (being new to Javascript and Vue), is what am I changing by doing this substitution and why does it fix it?
Obviously not super important since it works and works consistently, but I wouldn't mind getting from a cut and paste hero to actually understanding why I am doing what I am doing.
uibuilder provides a websocket to/from node-red, you build a website using bootstrap vue.
In the bootstrap vue documentation it is assumed that you run bootstrap-vue as a module of nodejs and use a compiler/bundler/build-step that will translate (transpile as they call it) into code that works in the browser, but that is not what you are doing with uibuilder - it runs directly in the browser. (note that you can use a build-step to make it work like that, but that is a different story).
Note the description of http-vue-loader:
Load .vue files directly from your html/js. No node.js environment, no build step.
This is the reason why you need to use module.exports
Following you so far. One follow-up. If I was ever to switch from http-vue-loader to actually doing a build approach (can't imagine I actually would do so), then would the module.exports = { version be required?
If you go to a build step approach, the whole setup will be different, which is also why you see a src and dist directory, as you would create the code in src, build/compile the code and the complete project will end up in the dist directory. In that case you will switch to the export default for your code.
If using a build step, you have the option to use the latest JavaScript standards by including something called a "transpiler". You will sometimes see references to a tool called "babel" as that is the most popular transpiler. Babel is able to convert from the very latest JavaScript syntax to a more widely supported, slightly older syntax so that your code can be used with more Browsers.
The export statement is one of those new standards. module.exports is the older syntax. Your build step would use Babel to translate one to the other. You have just done it by hand. Well done!
When looking at VueJS components, you might want to look for clues that the authors haven't been lazy (and purely relied on a build step) but that they have engineered their components so that they work in multiple ways. Documentation showing a couple of different ways to use the component will be the most obvious clue but do go and look at the code itself so that you build up an understanding of what good looks like (and bad for that matter). All of the examples I've given in the WIKI (other than those demonstrating the build step itself) should be that kind of module.
