How to delete a Cookie in Nuxt.js 3

Deleting cookies in Nuxt.js 3 can be achieved through several methods, depending on how you handle cookies in your application. Here are some common approaches:

1. Delete Cookies on the Client-Side Using JavaScript

If you are working with a purely frontend application, you can directly delete cookies on the client-side using JavaScript. This can be done by setting the cookie's expiration time to a past date:

javascript
document.cookie = 'cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';

This line of code sets the expiration time of the cookie named 'cookieName' to January 1, 1970, effectively removing it from the browser. path=/ ensures that the cookie is deleted across the entire website.

2. Use Nuxt.js Plugins or Middleware

If your Nuxt.js application uses Server-Side Rendering (SSR), you may need to handle cookies on the server-side. You can use middleware or plugins in Nuxt.js to manage cookies.

For example, you can use the cookie-universal-nuxt library to easily handle cookies on both the server-side and client-side. First, install this library:

bash
npm install cookie-universal-nuxt

Then add this module to your nuxt.config.js:

javascript
export default {
  modules: [
    'cookie-universal-nuxt',
  ]
}

Now you can access the $cookies object anywhere in your application to delete cookies:

javascript
export default {
  mounted() {
    this.$cookies.remove('cookieName');
  }
}

The advantage of this method is that it works for both server-side and client-side.

3. Use HTTP Headers on the Server-Side

If the cookie deletion needs to occur on the server-side, for example during user logout, you can directly manipulate HTTP response headers to delete the cookie. In Nuxt.js, you can add the following code in API routes or server middleware:

javascript
export default (req, res, next) => {
  res.setHeader('Set-Cookie', 'cookieName=; Max-Age=0; path=/');
  next();
}

This will add a Set-Cookie header to the HTTP response, setting the cookie's maximum age to 0, thereby deleting the cookie.

Summary

The method for deleting cookies depends on your Nuxt.js application architecture and where you need to delete the cookie (client-side or server-side). In actual projects, choose the most suitable method to ensure optimal performance and security of your application. Each method has its specific use cases, and understanding these basic operations can help you more flexibly manage user data and state.