title: How to get and store the Window width before initializing my Nuxt App?
body: <p>I am developing a nuxt app which needs to render different components based on my window width. And also will send a request to create a session, in which one of the header parameter is device width. Here is my approach to do that:</p>
  <p>Code in my store:</p>
  <pre><code>//index.js
  export const state = () =&gt; ({
    device_width: null,
    session_data : {},
   
  })
  
  export const mutations = {
    set_device_width(state, payload) {
      return state.device_width = payload;
    },
    set_session_data(state, payload){
       return state.session_data = payload
    }
  }
  export const actions = {
  
    //server init action to initialize the app with some necessary data
    async nuxtServerInit({ commit }) {
  
      
      if (process.browser) {
        commit('set_device_width', window.innerWidth);
      }
        var device_type = &quot;&quot;;
        if (this.state.device_width &lt; 768) {
          device_type = &quot;mobile&quot;;
        } else if (this.state.device_width &gt; 768) {
          device_type = &quot;desktop&quot;;
        }
        var sessionData= await axios(...//api request with 'device_type' in header//....)
        commit('set_session_data', sessionData)
  
  }
  </code></pre>
  <p>then in my templates I am using computed method to get the value.</p>
  <pre><code>computed:{
    isMobile(){
      return this.$store.state.device_width&lt;768
    }
  }
  </code></pre>
  <p>Now when I am keeping the screen size under 768, it works just fine. But in the case of desktop mode, full screen, it is always starting as isMobile==true for a few sec. Then isMobile is becoming false and automatically the desktop component is getting loaded. But for that few second I can see the mobile UI, and mainly my session data is always getting created with &quot;device_type: mobile&quot;. Also as the page is initially starting with mobile UI, the SEO elements of my desktop UI is not working. How can I solve this? I just need to determine the screen size and store it before the initialization of the app. I thought serverInit action was the way to do that.</p>