kuzzleio · benoitvidis · Jul 10, 2019 · Jul 2, 2019 · Jul 2, 2019 · Jul 2, 2019
diff --git a/doc/6/getting-started/vuejs/package.json b/doc/6/getting-started/vuejs/package.json
@@ -7,6 +7,9 @@
     "serve-without-vuex": "cd without-vuex && vue-cli-service serve",
     "build-without-vuex": "cd without-vuex && vue-cli-service build",
     "lint-without-vuex": "cd without-vuex && vue-cli-service lint",
+    "serve-with-vuex": "cd with-vuex && vue-cli-service serve",
+    "build-with-vuex": "cd with-vuex && vue-cli-service build",
+    "lint-with-vuex": "cd with-vuex && vue-cli-service lint",
     "test": "./node_modules/.bin/cypress run --record"
   },
   "dependencies": {

diff --git a/doc/6/getting-started/vuejs/with-vuex/babel.config.js b/doc/6/getting-started/vuejs/with-vuex/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/doc/6/getting-started/vuejs/with-vuex/public/favicon.ico b/doc/6/getting-started/vuejs/with-vuex/public/favicon.ico
diff --git a/doc/6/getting-started/vuejs/with-vuex/public/index.html b/doc/6/getting-started/vuejs/with-vuex/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>kuzzle-vuejs-gs</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but kuzzle-vuejs-gs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/doc/6/getting-started/vuejs/with-vuex/src/App.vue b/doc/6/getting-started/vuejs/with-vuex/src/App.vue
@@ -0,0 +1,121 @@
+<template>
+  <div id="app">
+    <div v-if="!enteredNickname">
+      <input
+        autofocus
+        v-on:keyup.enter="valid"
+        type="text"
+        v-model="nicknameInput"
+        placeholder="Enter your nickname"
+      />
+      <button @click="valid">Valid</button>
+    </div>
+    <div class="wrapper" v-else>
+      <input
+        autofocus
+        type="text"
+        placeholder="Enter your message"
+        v-model="message"
+        v-on:keyup.enter="sendMessage"
+      />
+      <button @click="sendMessage">Send</button>
+    </div>
+    <div
+      v-for="message in messages"
+      :key="message._id"
+      :class="`messages ${message.username === nicknameInput? 'fromMe': 'fromOthers'}`"
+    >
+      <span class="nickname">{{ message.username }}</span>
+      <span>({{ getDate(message.createdAt) }})</span>
+      <p>{{ message.value }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import kuzzle from "./services/kuzzle";
+
+export default {
+  name: "app",
+  data() {
+    return {
+      enteredNickname: false,
+      nicknameInput: "",
+      message: ""
+    };
+  },
+  computed: {
+    nickname() {
+      return this.$store.state.nickname;
+    },
+    messages() {
+      return this.$store.state.messages;
+    }
+  },
+  methods: {
+    getDate(timestamp) {
+      const date = new Date(timestamp);
+      return date.toString().split("GMT")[0];
+    },
+    async sendMessage() {
+      if (this.message === "") return;
+      await this.$store.dispatch("SEND_MESSAGE", {
+        kuzzle,
+        message: this.message
+      });
+      this.message = "";
+    },
+    async valid() {
+      this.$store.commit("SET_NICKNAME", this.nicknameInput);
+      this.enteredNickname = true;
+      await this.$store.dispatch("INIT", { kuzzle });
+    }
+  },
+  async destroyed () {
+    await this.$store.dispatch("UNSUBSCRIBE_MESSAGES", { kuzzle });
+  }
+};
+</script>
+
+<style>
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+
+.nickname {
+  font-weight: bold;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.messages {
+  padding: 10px;
+  margin: 1px;
+  width: 45vw;
+  border-radius: 10px;
+}
+
+.fromMe {
+  text-align: right;
+  float: right;
+  margin-left: 49vw;
+  background-color: #9ca4f0;
+}
+
+.fromOthers {
+  text-align: left;
+  margin-right: 49vw;
+  float: left;
+  background-color: rgb(206, 246, 147);
+}
+</style>
diff --git a/doc/6/getting-started/vuejs/with-vuex/src/assets/logo.png b/doc/6/getting-started/vuejs/with-vuex/src/assets/logo.png
diff --git a/doc/6/getting-started/vuejs/with-vuex/src/main.js b/doc/6/getting-started/vuejs/with-vuex/src/main.js
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import App from './App.vue'
+import store from './store.js'
+Vue.config.productionTip = false
+
+new Vue({
+  store,
+  render: h => h(App),
+}).$mount('#app')
diff --git a/doc/6/getting-started/vuejs/with-vuex/src/services/kuzzle.js b/doc/6/getting-started/vuejs/with-vuex/src/services/kuzzle.js
@@ -0,0 +1,3 @@
+import { Kuzzle, WebSocket } from 'kuzzle-sdk';
+
+export default new Kuzzle(new WebSocket('localhost'));
diff --git a/doc/6/getting-started/vuejs/with-vuex/src/store.js b/doc/6/getting-started/vuejs/with-vuex/src/store.js
@@ -0,0 +1,71 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    messages: [],
+    roomID: '',
+    nickname: ''
+  },
+  actions: {
+    INIT: async ({ dispatch }, { kuzzle }) => {
+      await kuzzle.connect();
+      if (!(await kuzzle.index.exists("chat"))) {
+        await kuzzle.index.create("chat");
+        await kuzzle.collection.create("chat", "messages");
+      }
+      dispatch('FETCH_MESSAGES', {kuzzle});
+    },
+    SEND_MESSAGE: async ({ state }, { kuzzle, message }) => {
+      await kuzzle.document.create("chat", "messages", {
+        value: message,
+        username: state.nickname
+      });
+    },
+    FETCH_MESSAGES: async ({ commit, dispatch }, { kuzzle }) => {
+      const results = await kuzzle.document.search(
+        "chat",
+        "messages",
+        { sort: ["_kuzzle_info.createdAt"] },
+        { size: 100 }
+      );
+      results.hits.map(hit => {
+        commit('ADD_MESSAGE', hit);
+      });
+      dispatch('SUBSCRIBE_MESSAGES', {kuzzle});
+    },
+    SUBSCRIBE_MESSAGES: async ({ commit }, { kuzzle }) => {
+      const roomID = await kuzzle.realtime.subscribe("chat", "messages", {}, notification => {
+        if (
+          notification.type === "document" &&
+          notification.action === "create"
+        ) {
+        commit('ADD_MESSAGE', notification.result);
+        }
+      });
+      commit('SET_ROOMID', roomID);
+    },
+    UNSUBSCRIBE_MESSAGES: async ({ state }, { kuzzle }) => {
+      await kuzzle.realtime.unsubscribe(state.roomID);
+    }
+  },
+  mutations: {
+    ADD_MESSAGE(state, hit) {
+      const message = {
+        _id: hit._id,
+        value: hit._source.value,
+        createdAt: hit._source._kuzzle_info.createdAt,
+        username: hit._source.username
+      };
+      state.messages = [message, ...state.messages]
+    },
+    SET_ROOMID(state, roomID) {
+      state.roomID = roomID;
+    },
+    SET_NICKNAME(state, nickname) {
+      state.nicnkame = nickname;
+    }
+  }
+})
diff --git a/doc/6/getting-started/vuejs/without-vuex/index.md b/doc/6/getting-started/vuejs/without-vuex/index.md
@@ -30,7 +30,7 @@ vue create kuzzle-playground
 Install the kuzzle-sdk: 
 ```bash
 cd kuzzle-playground
-yarn add kuzzle-sdk
+npm install kuzzle-sdk
 ```
 
 In the _App.vue_ file, you should remove the tag, the import and the component registration of the `HelloWorld` component, we won't use it.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Kuzzle, WebSocket } from 'kuzzle-sdk';

		export default new Kuzzle(new WebSocket('localhost'));