vue-cookies not able to set sameSite and secure attributes

Question

I am using vue-cookies for my vue.js project. I am setting the cookie from

this.$cookies.set('session',response.data.sessionCookie,'7d',null,null,true,'None')

and its not being set when i see the cookies but when i am using

 this.$cookies.set('session',response.data.sessionCookie)

I am seeing the cookies being set. What should I do? attaching the screenshots of cookies being set and my sample code. I am using this https://www.npmjs.com/package/vue-cookies

Check highlighted text where I am setting the cookie

Using second code where the didn't used any attributes, my cookie is being set and i can see it in the cookies

Answer 1

This is likely happening because you are attempting to set a secure cookie in the dev environment under http://, which is insecure.

From the MDN docs on secure cookies:

Note that insecure sites (http:) can't set cookies with the Secure directive.

You can try to test this on a secure server or run Vue CLI in secure mode. To do that, add the following to vue.config.js in your project root:

module.exports = {
  devServer: {
    https: true
  }
}

Make sure you type https://localhost:8080/ in the browser after restarting the dev server with these settings, it will not redirect if you type http://.