Nuxt/examples/with-cookies/pages/index.vue

<template>
  <div>
    <h1>Cookies</h1>
    <table>
      <thead>
        <tr>
          <th>Key</th><th>Value</th><th/>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, key) in cookies" :key="key">
          <td>{{ key }}</td>
          <td>{{ value }}</td>
          <td><button @click="removeCookie(key)">Remove</button></td>
        </tr>
      </tbody>
    </table>
    <h2>Add a new cookie</h2>
    <form @submit.prevent="addCookie">
      <input v-model="newCookie.key" type="text" placeholder="Key" class="key">:
      <input v-model="newCookie.value" type="text" placeholder="Value" class="value">
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data: () => ({
    newCookie: {
      key: '',
      value: ''
    }
  }),
  computed: {
    cookies() {
      return this.$cookies.cookies
    }
  },
  methods: {
    addCookie() {
      // Make sure the cookie is not empty
      if (!this.newCookie.key || !this.newCookie.value) return
      // Sanitize the key to avoid spaces
      const cookieKey = this.newCookie.key.replace(/\s/g, '-')
      // Add the cookie
      this.$cookies.set(cookieKey, this.newCookie.value)
      // Reset newCookie data
      this.newCookie.key = this.newCookie.value = ''
    },
    removeCookie(key) {
      this.$cookies.remove(key)
    }
  }
}
</script>

<style scoped>
table {
  text-align: left;
}
th, td {
  padding-right: 10px;
}
input.key {
  width: 50px;
}
input.value {
  width: 100px;
}
input, button {
  border: 1px #ddd solid;
  background: white;
  padding: 5px;
}
button[type="submit"] {
  margin-left: 5px;
}
</style>