Vue Composable Utils

# 🍪 useCookie

useCookie provides you a number of methods to make easier browser cookie management. It uses document.cookie by default but any cookie string can be managed. It also supports ssr.

Using with document.cookie, it must be called on the onMounted hook because the setup method is run around beforeCreate and created lifecycle hooks where the document object does not exist yet.

# 🚀 Features

# Getter/Setter

You can set a new cookie easily.

setCookie([key], [value], [options]);

options: optional object argument. It can contain properties such as expires path domain size etc. related to cookie.

<script>
import { onMounted } from '@vue/composition-api';

export default {
  setup() {
    onMounted(() => {
      const { setCookie } = useCookie();

      setCookie('cookie', 'triple-chocolate cookie');
    });
  },
};
</script>

  
        Copied!

You can get a cookie value with the key of the cookie.

getCookie([key])

<script>
import { onMounted } from '@vue/composition-api';

export default {
  setup() {
    onMounted(() => {
      const { getCookie } = useCookie();

      console.log(getCookie('cookie')); // triple-chocole cookie
    });
  },
};
</script>

  
        Copied!

# Parse

Parse cookie string to an object.

<script>
import { onMounted } from '@vue/composition-api';

export default {
  setup() {
    onMounted(() => {
      const { parseCookie } = useCookie();

      const cookieObject = parseCookie();

      console.log(cookieObject); // { cookie: 'triple-chocolate cookie' }
    });
  },
};
</script>

  
        Copied!

# Append

You can append new value to an existing cookie value.

appendCookie([key], [newValue], [specialCharacter])

specialCharacter: opitonal argument to seperate values, default is comma.

<script>
import { onMounted } from '@vue/composition-api';

export default {
  setup() {
    onMounted(() => {
      const { cookie, appendCookie } = useCookie();

      appendCookie('cookie', 'hot');

      console.log(cookie); // cookie=triple-chocolate cookie, hot
    });
  },
};
</script>

  
        Copied!

# Delete

Remove easily a key value pair from cookie.

<script>
import { onMounted } from '@vue/composition-api';

export default {
  setup() {
    onMounted(() => {
      const { cookie, deleteCookie } = useCookie();

      // assigns cookie an expiration date and browsers deletes cookies expired
      deleteCookie('cookie');

      console.log(cookie); // cookie=; expires=Thu Jan 01 1970 00:00:00 GMT"
    });
  },
};
</script>

  
        Copied!

# usage with ssr

You can also use all methods with ssr.

<script>
export default {
  async asyncData({ req }) => {
    const serverSideCookie = req.cookie;

    const { setCookie, getCookie } = useCookie(serverSideCookie);
    //
  }
}
</script>

  
        Copied!

← useClipboard →