NuxtJS set Cookie in Middleware

Question

I'm building a nuxtjs app and try to set a cookie from a global middleware. I found this contribution on GitHub which shows a method to do this.

So I implemented my middleware like this

export default function ({ isServer, res, query }) {
  if (query.lang) {
    if (isServer) {
      res.setHeader("Set Cookie", [`lang=${query.lang}`]);
    } else {
        document.cookie = `lang=${query.lang}`;
    }
  }
}

My problem is that when I visit my app with ?lang=xxx as a parameter, I'm always running into the else block of my if condition. So I get the error

document is not defined

Has anyone a idea what is wrong with my code. I can't see a difference to the code published on github.

Answer 1

You should use cookie-universal-nuxt.

Add this in your module section in nuxt.config.js:
['cookie-universal-nuxt', { alias: 'cookiz' }],

You can use it directly in the store with nuxtServerInit:

async nuxtServerInit({ commit, state, dispatch },
    { app, store, route, req, res, error, redirect }
) {
    app.$cookiz.set('lang', route.query.lang)
})

Or in a middleware:

export default function ({ app, res, query }) {
  if (query.lang) {
    app.$cookiz.set('lang', query.lang)
  }
}