vue JS debug setup

pug/README.md

@@ -0,0 +1,11 @@
+# PUG html template
+
+Tools
+
+```sh
+$ npm install -g pug-cli
+
+# live render html from pug template
+$ pug -w ./ -o ./html
+```
+

vuejs/README.md

@@ -0,0 +1,121 @@
+# 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)