Skip to content

Instantly share code, notes, and snippets.

@ndabAP
Last active August 3, 2017 10:08
Show Gist options
  • Save ndabAP/5f1656acffd41fcf4ca146f73f1b4379 to your computer and use it in GitHub Desktop.
Save ndabAP/5f1656acffd41fcf4ca146f73f1b4379 to your computer and use it in GitHub Desktop.
Load mobile/desktop version of your Vue.js application based on browser width
// main.js is your Webpack entry point. "bootstrap.desktop" and "bootstrap.mobile" load dependencies based on the browser width
/**
* @see {@link https://stackoverflow.com/questions/1038727/how-to-get-browser-width-using-javascript-code#1038781}
*/
const browserWidth = Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
)
if (browserWidth >= 768) import('./bootstrap.desktop')
if (browserWidth < 768) import('./bootstrap.mobile')
// See a full example here: https://github.com/ndabAP/Vue.js-with-Sails.js-backend-example-project/tree/master/frontend
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment