Adds vuejs with vue-cli, adds cors fairing to rocket

web/vue/src/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <p>{{ items }}</p>
+  </div>
+</template>
+
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+import RecipeDetails from './components/RecipeDetails.vue'
+
+export default {
+  name: 'app',
+  components: {
+    HelloWorld,
+    RecipeDetails
+  },
+  data() {
+    return {
+      items: []
+    }
+  },
+  methods: {
+    setActiveCategory: function(id) {
+      this.active_category = id;
+    },
+    setActiveView: function(idx) {
+      this.active_view = idx;
+    },
+    closeActiveView: function() {
+      this.active_view = -1;
+    },
+    deleteRecipe: function(id) {
+      fetch("http://localhost:8000/api/delete/" + id)
+        .then((res) => res.json())
+        .then((data) => {
+          if (data === true) {
+            this.items.splice(this.active_view, 1);
+            this.closeActiveView();
+            console.log("Deleted :" + data);
+          } else {
+            console.log("Error deleting");
+          }})
+        .catch((err) => console.error(err));
+    },
+    fetchRecipesList: function() {
+      fetch("http://localhost:8000/api/list")
+        .then((res) => res.json())
+        .then((data) => this.items = data)
+        .catch(function(err) {
+          console.error(err);
+        });
+    }
+  },
+  computed: {
+    displayed: function() {
+        return this.items.filter(
+          rec => rec.category == this.active_category
+        );
+    }
+  },
+  mounted () {
+    this.fetchRecipesList();
+  }
+}
+</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;
+}
+</style>

web/vue/src/components/HelloWorld.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

web/vue/src/components/RecipeDetails.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="box">
+  <button @click="$emit('close')" class="button is-pulled-right">X close</button>
+    <h4 class="title">{{ item.title }}</h4>
+    <h6 class="subtitle">{{ categories[item.category].name }}</h6>
+    <p><strong>Ingredients : </strong></p>
+    <ul>
+      <li v-for="ing in item.ingredients.split('\n')">{{ ing }}</li>
+    </ul>
+    <button @click="$emit('delete', item.id)"
+            class="button is-danger is-pulled-right">
+      DELETE !
+    </button>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'RecipeDetails',
+  props: ['item'],
+}

web/vue/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')