Caveats while Building Mobile Website using Vue/Nuxt

While building a mobile website, you'll encounter a lot of roadblocks. I'll try to list all of them here, while I learn more about them.

1. One of the biggest caveats is everything feels slow in android firefox & iOS safari. And the reason for it is that on each click, the browser waits for around ~300ms to know whether it was a single or double click.
   Solution & More about it here: https://stackoverflow.com/a/21062165/2963579

2. URL Bar Resizing - Different vh for a fixed element on a scroll.
   Solution & more about it here:
   https://dev.to/peiche/100vh-behavior-on-chrome-2hm8

3. /deep/ property is not fully supported by all browsers.(at least firefox), so avoid using it.

4. when the user taps on any text, the text is searched on google.
   make user-select: none for mobile. (don't do for desktop, as the user won't be able to select anything)

5. position: sticky behaves very differently in mobile chrome & firefox, avoid using it.

6. On mobile, v-model="keyword" will not updated until you press space.
   https://github.com/vuejs/vue/issues/8231