Home

So i wanted to choose a different layout if the window width is less than 1000px or w/e for like a mobile friendly version.

i did this.

/middleware/mobile.js

export default function ({store}) {
  let w
  if (process.BROWSER_BUILD) {
    w = window.innerWidth
  }
  if (w < 1111) {
    store.commit('mobileOn')
  } else {
    store.commit('mobileOff')
  }
}

mobileOn and mobileOff just set $store.state.mobile to either true or false.

then added this in the nuxt.config

router: {
    middleware: ['mobile']
  },

then put this in the page

export default {
  layout ({store}) { return store.state.mobile ? 'mobile' : 'default' }
}

But i cant get it to work on the initial load, it would load up the default layout first. Works fine if i go to a new page though.

kinda just figuring stuff out as i go.