14.06 Filter - Format the Date Nicely

src/components/Tasks/Task.vue

@@ -33,7 +33,7 @@
           <q-item-label
             class="row justify-end"
             caption>
-            {{ task.dueDate }}
+            {{ task.dueDate | niceDate }}
           </q-item-label>
           <q-item-label
             class="row justify-end"
@@ -73,6 +73,8 @@
 <script>
 import { mapActions } from 'vuex'
 import editTask from 'components/Tasks/Modals/EditTask.vue'
+import { date } from 'quasar'
+const { formatDate } = date
 
 export default {
   name: 'Task',
@@ -85,6 +87,11 @@ export default {
       showEditTask: false
     }
   },
+  filters: {
+    niceDate (value) {
+      return formatDate(value, 'MMM D')
+    }
+  },
   methods: {
     ...mapActions('tasks', ['updateTask', 'deleteTask']),
     promptToDelete (id) {