Update example to use inject

examples/with-cookies/pages/index.vue

@@ -17,34 +17,39 @@
     </table>
     <h2>Add a new cookie</h2>
     <form @submit.prevent="addCookie">
-      <input type="text" v-model="cookie.key" placeholder="Key" class="key"/>:
+      <input type="text" v-model="newCookie.key" placeholder="Key" class="key"/>:
-      <input type="text" v-model="cookie.value" placeholder="Value" class="value"/>
+      <input type="text" v-model="newCookie.value" placeholder="Value" class="value"/>
       <button type="submit">Add</button>
     </form>
   </div>
 </template>
 
 <script>
-import { cookies, refreshCookies } from '~/plugins/cookies'
-import Cookies from 'js-cookie'
-
 export default {
-  data() {
+  data: () => ({
-    return {
+    newCookie: {
-      cookies,
+      key: '',
-      cookie: { key: '', value: '' }
+      value: ''
+    }
+  }),
+  computed: {
+    cookies () {
+      return this.$cookies.cookies
     }
   },
   methods: {
     addCookie() {
-      if (!this.cookie.key || !this.cookie.value) return
+      // Make sure the cookie is not empty
-      Cookies.set(this.cookie.key.replace(/\s/g, '-'), this.cookie.value)
+      if (!this.newCookie.key || !this.newCookie.value) return
-      this.cookies = refreshCookies()
+      // Sanitize the key to avoid spaces
-      this.cookie.key = this.cookie.value = ''
+      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) {
-      Cookies.remove(key)
+      this.$cookies.remove(key)
-      this.cookies = refreshCookies()
     }
   }
 }

examples/with-cookies/plugins/cookies.js

@@ -1,19 +1,34 @@
-import cookie from 'cookie'
+import Vue from 'vue'
-
+import Cookie from 'cookie'
-export let cookies
+import JSCookie from 'js-cookie'
 
 // Called only on client-side
-export const refreshCookies = () => {
+export const getCookies = (str) => {
-  cookies = cookie.parse(document.cookie)
+  return Cookie.parse(str || '')
-  return cookies
 }
 
 /*
 ** Executed by ~/.nuxt/index.js with context given
 ** This method can be asynchronous
 */
-export default ({ isServer, req }) => {
+export default ({ isServer, req }, inject) => {
-  // We update the cookies variable
+  // Inject `cookies` key
-  // So we can read it into our page with: import { cookies } from '~/plugins/cookies.js'
+  // -> app.$cookies
-  cookies = cookie.parse(isServer ? req.headers.cookie : document.cookie)
+  // -> this.$cookies in vue components
+  // -> this.$cookies in store actions/mutations
+  inject('cookies', new Vue({
+    data: () => ({
+      cookies: getCookies(isServer ? req.headers.cookie : document.cookie)
+    }),
+    methods: {
+      set(...args) {
+        JSCookie.set(...args)
+        this.cookies = getCookies(document.cookie)
+      },
+      remove(...args) {
+        JSCookie.remove(...args)
+        this.cookies = getCookies(document.cookie)
+      }
+    }
+  }))
 }