creating a project in Vue and testing in VisualStudio

installation and setup

    node --version
    npm --version
    npm install -g @vue/cli

on home laptop:

    cd ~/cssi/flask
    vue create fvf

SINCE cursor doesn't work, just use defaults

; and wait...

    cd fvf
    rm -r .git .gitignore

possibly not needed:

    npm install

to test:

    npm run serve

and open browser to localhost (or whatever port it used)

    code .

and also:

    npm run serve

In Visual Studio Code, open/edit App.vue and make some edits:
from:

    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <HelloWorld msg="Welcome to My very own Vue.js App"/>

File -> Save
-> Debugger
-> Run -> Start Debugger

and observer browser window

    npm install buefy --save

and EDIT as shown in tar file

    cd ~/cssi/flask
    ./vtar.sh put descriptive terms here

Note: The sidebar was too cumbersome, and involved too much css; switched to Panel.

    npm install sass
    npm install sass-loader

and maybe
    npm install node-sass

and create/edit Sidebar.vue

no sass/scss errors, but Reduced Sidebar is messed up, others seem ok

npm install vuelayers@0.11.22 npm install css-loader

Note: if a map is inside a div that starts closed (such as a tab), its own div will have size 0; it needs to be resize upon view/display.

This is better

    <vl-map  ...
              @created="vm => vm.refresh()"
           >

This somewhat worked:

  mounted () {
    this.$refs.map.updateSize(),   // when map is in a tab, do this

Refs:

there is an official way to convert json to JS objects/arrays. JSON.parse()