{"action":"created","issue":{"url":"https://api.github.com/repos/DivanteLtd/vue-storefront/issues/3835","repository_url":"https://api.github.com/repos/DivanteLtd/vue-storefront","labels_url":"https://api.github.com/repos/DivanteLtd/vue-storefront/issues/3835/labels{/name}","comments_url":"https://api.github.com/repos/DivanteLtd/vue-storefront/issues/3835/comments","events_url":"https://api.github.com/repos/DivanteLtd/vue-storefront/issues/3835/events","html_url":"https://github.com/DivanteLtd/vue-storefront/pull/3835","id":526843522,"node_id":"MDExOlB1bGxSZXF1ZXN0MzQ0MjM1MzQz","number":3835,"title":"Detecting device type based on UserAgent","user":{"login":"Fifciu","id":30155292,"node_id":"MDQ6VXNlcjMwMTU1Mjky","avatar_url":"https://avatars0.githubusercontent.com/u/30155292?v=4","gravatar_id":"","url":"https://api.github.com/users/Fifciu","html_url":"https://github.com/Fifciu","followers_url":"https://api.github.com/users/Fifciu/followers","following_url":"https://api.github.com/users/Fifciu/following{/other_user}","gists_url":"https://api.github.com/users/Fifciu/gists{/gist_id}","starred_url":"https://api.github.com/users/Fifciu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Fifciu/subscriptions","organizations_url":"https://api.github.com/users/Fifciu/orgs","repos_url":"https://api.github.com/users/Fifciu/repos","events_url":"https://api.github.com/users/Fifciu/events{/privacy}","received_events_url":"https://api.github.com/users/Fifciu/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2019-11-21T21:10:58Z","updated_at":"2019-11-25T11:41:44Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/DivanteLtd/vue-storefront/pulls/3835","html_url":"https://github.com/DivanteLtd/vue-storefront/pull/3835","diff_url":"https://github.com/DivanteLtd/vue-storefront/pull/3835.diff","patch_url":"https://github.com/DivanteLtd/vue-storefront/pull/3835.patch"},"body":"### Related issues\r\n<!--  Put related issue number which this PR is closing. For example #123 -->\r\n\r\n### Short description and why it's useful\r\n<!-- describe in a few words what is this Pull Request changing and why it's useful -->\r\n\r\nBased on: https://github.com/nuxt-community/device-module\r\n\r\nIt provides as some logic helpers based on UserAgent. List of tests:\r\n```\r\nisMobile,\r\nisMobileOrTablet,\r\nisTablet,\r\nisDesktop,\r\nisDesktopOrTablet,\r\nisIos,\r\nisWindows,\r\nisMacOS\r\n```\r\n\r\nThey are accessible by, e.g::\r\n```\r\nthis.$device.isMobile\r\n```\r\nOr in asyncData by:\r\n```\r\ncontext.device.isMobile\r\n```\r\n\r\nWe could totally disable this feature by setting `config.device.appendToInstance` to false and the small library will not by imported.\r\n\r\nIn addition when we are using installer script. I've added multiselect so we could pick which tests we want to have.\r\n\r\nI've tested it with `curl -A \"some user agent\" http://localhost:3000 and it worked.\r\n\r\nSome time ago, I've tried to do that only in the template's code. However, with that I had hydration errors because Client was rendering Mobile version and server Desktop version. This PR should solve that Problem and allow us to render components based on Device.\r\n\r\nThat's obvious we should use media queries whenever we can. However, sometimes we have more advanced structure and we are ending with hidden useless vue instance.\r\n\r\n### Screenshots of visual changes before/after (if there are any)\r\n<!-- if you made any changes in the UI layer please provide before/after screenshots -->\r\n![image](https://user-images.githubusercontent.com/30155292/69376605-d96d1600-0caa-11ea-844a-29041cd183b3.png)\r\n![image](https://user-images.githubusercontent.com/30155292/69376779-3668cc00-0cab-11ea-96bd-706bbc123f02.png)\r\n![image](https://user-images.githubusercontent.com/30155292/69376822-50a2aa00-0cab-11ea-8c09-3b8650bf9df6.png)\r\n![image](https://user-images.githubusercontent.com/30155292/69376881-6fa13c00-0cab-11ea-80ea-de4f8b16bf23.png)\r\n\r\n\r\n### Which environment this relates to\r\nCheck your case. In case of any doubts please read about [Release Cycle](https://docs.vuestorefront.io/guide/basics/release-cycle.html)\r\n\r\n- [x] Test version (https://test.storefrontcloud.io) - this is a new feature or improvement for Vue Storefront. I've created branch from `develop` branch and want to merge it back to `develop`\r\n- [ ] RC version (https://next.storefrontcloud.io) - this is a stabilisation fix for Release Candidate of Vue Storefront. I've created branch from `release` branch and want to merge it back to `release`\r\n- [ ] Stable version (https://demo.storefrontcloud.io) - this is an important fix for current stable version. I've created branch from `hotfix` or `master` branch and want to merge it back to `hotfix`\r\n\r\n### Upgrade Notes and Changelog\r\n\r\n- [x] No upgrade steps required (100% backward compatibility and no breaking changes)\r\n- [ ] I've updated the [Upgrade notes](https://github.com/DivanteLtd/vue-storefront/blob/develop/docs/guide/upgrade-notes/README.md) and [Changelog](https://github.com/DivanteLtd/vue-storefront/blob/develop/CHANGELOG.md) on how to port existing VS sites with this new feature\r\n\r\n**IMPORTANT NOTICE** - Remember to update `CHANGELOG.md` with description of your change\r\n\r\n### Contribution and currently important rules acceptance\r\n<!-- Please get familiar with following info -->\r\n\r\n- [x] I read and followed [contribution rules](https://github.com/DivanteLtd/vue-storefront/blob/master/CONTRIBUTING.md)\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/DivanteLtd/vue-storefront/issues/comments/558118670","html_url":"https://github.com/DivanteLtd/vue-storefront/pull/3835#issuecomment-558118670","issue_url":"https://api.github.com/repos/DivanteLtd/vue-storefront/issues/3835","id":558118670,"node_id":"MDEyOklzc3VlQ29tbWVudDU1ODExODY3MA==","user":{"login":"pkarw","id":211899,"node_id":"MDQ6VXNlcjIxMTg5OQ==","avatar_url":"https://avatars1.githubusercontent.com/u/211899?v=4","gravatar_id":"","url":"https://api.github.com/users/pkarw","html_url":"https://github.com/pkarw","followers_url":"https://api.github.com/users/pkarw/followers","following_url":"https://api.github.com/users/pkarw/following{/other_user}","gists_url":"https://api.github.com/users/pkarw/gists{/gist_id}","starred_url":"https://api.github.com/users/pkarw/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pkarw/subscriptions","organizations_url":"https://api.github.com/users/pkarw/orgs","repos_url":"https://api.github.com/users/pkarw/repos","events_url":"https://api.github.com/users/pkarw/events{/privacy}","received_events_url":"https://api.github.com/users/pkarw/received_events","type":"User","site_admin":false},"created_at":"2019-11-25T11:41:44Z","updated_at":"2019-11-25T11:41:44Z","author_association":"COLLABORATOR","body":"you can access it via `context` (`asyncData`) or `Vue.prototype.$ssrRequestContext`"}}
{"actor":{"display_login":"pkarw"}}