add components

Author: alexchopin

components/footer.vue

@@ -0,0 +1,40 @@
+<template>
+  <footer class="footer" v-if="todos.length">
+    <span class="todo-count"><strong>{{ remaining }}</strong> item<span v-if="remaining > 1">s</span> left</span>
+    <ul class="filters">
+      <li>
+        <nuxt-link to="/" exact>All</nuxt-link>
+      </li>
+      <li>
+        <nuxt-link to="/active">Active</nuxt-link>
+      </li>
+      <li>
+        <nuxt-link to="/completed">Completed</nuxt-link>
+      </li>
+    </ul>
+    <button class="clear-completed" @click="removeCompleted" v-if="todos.length > remaining">
+      Clear completed
+    </button>
+  </footer>
+</template>
+
+<script>
+export default {
+  computed: {
+    todos () {
+      return this.$store.getters.allTodos
+    },
+    actives () {
+      return this.$store.getters.activeTodos
+    },
+    remaining () {
+      return this.$store.getters.activeTodos.length
+    }
+  },
+  methods: {
+    removeCompleted () {
+      this.$store.commit('removeCompleted', this.actives)
+    }
+  }
+}
+</script>

components/header.vue

@@ -0,0 +1,23 @@
+<template>
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus v-model="todo" @keyup.enter="addTodo">
+  </header>
+</template>
+
+<script>
+export default {
+  data () {
+    return { todo: '' }
+  },
+  methods: {
+    addTodo () {
+      var value = this.todo && this.todo.trim()
+      if (value) {
+        this.$store.commit('add', { title: value, completed: this.$route.params.slug === 'completed' })
+        this.todo = ''
+      }
+    }
+  }
+}
+</script>