# VueJS Quick Guide

* **Note : Most of razer app are using vue [2.x](https://vuejs.org/v2/guide/).**

* Blog [Vue 2 vs Vue 3](https://geckodynamics.com/blog/vue2-vs-vue3)

* Install `vue cli` 3.x

  ```sh
  # uninstall previous version of vue-cli 2.x
  $ npm uninstall vue-cli -g
  
  # install latest vue-cli
  # vue-cli 4.x, recommended nodejs v10+
  $ npm install -g @vue/cli
  
  # to upgrade cli package
  $ npm update -g @vue/cli
  
  # Using vue GUI to scaffold a project 
  $ vue ui
  
  # create a new project using CLI
  $ vue create <projectname>
  
  # launch app
  $ npm run serve
  ```

  ```sh
  # install vue cli 2.x
  	
  $ npm install -g vue-cli
  
  $ npm install -g vue-cli@<version>
  
  # Create project
  $ vue init webpack <projectname>
  
  # launch app
  $ npm run dev
  ```

* [Migration](https://cli.vuejs.org/migrating-from-v3/#vue-cli-service)
* [vue CLI 3](https://blog.bitsrc.io/so-whats-new-in-vue-cli-3-0-fbefe7a13956)

## Debuggging

1. Chrome VueJS [DevTool](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) to debug on Chrome browser directly

   * ![](./chrome-devtool.PNG)

2. Debug within VSCode

   * [Reference](https://vuejs.org/v2/cookbook/debugging-in-vscode.html)

   * To check `vue-cli` version installed

     ```sh
     $ vue --version
     @vue/cli 4.5.13
     ```

     

   * For `vue-cli` 3.x and above, add this to `vue.config.js` at root folder

     ```javascript
     module.exports = {
     
       configureWebpack: {
         devtool: 'source-map',
       },
     };
     ```

     

   * For `vue-cli` 2.x, add this to `config/index.js` (No verified) 

     ```javascript
     devtool: 'source-map',
     ```

     

   * Update the vscode `launch.json`

     ```json
         "configurations": [
             {
                 "type": "pwa-chrome",
                 "request": "launch",
                 "name": "vuejs: chrome",
                 "url": "http://localhost:5001",
                 "webRoot": "${workspaceFolder}/src",
                 "breakOnLoad": true,
                 "sourceMapPathOverrides": {
                   "webpack:///src/*": "${webRoot}/*"
                 }
             }
         ]
     ```

     

   * Launch the `vue` app

     ```sh
     $ npm run serve
     ```

     

   * Launch `vscode` debug profile

     ![](./vscode-debug.PNG)

   * Set breakpoint on `vscode` to debug

     ![](./vscode-breakpoint.PNG)