A little more progress with Vue Material

src/app/package.json

@@ -5,7 +5,7 @@
   "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
     "apistart": "cd ../MyPrayerJournal.Api && dotnet run",

src/app/src/App.vue

@@ -3,6 +3,8 @@ md-app(md-waterfall md-mode='fixed-last' role='application')
   p navigation here
   navigation
   p navigation there
+  md-app-drawer(:md-active.sync='menuVisible')
+    | test
   md-app-content
     router-view
     vue-progress-bar

src/app/src/components/Journal.vue

@@ -6,7 +6,7 @@ article.mpj-main-content-wide(role='main')
     .mpj-text-center
       router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
                   role='button').
-        #[md-icon(icon='add_box')] Add a New Request
+        #[md-icon add_box] Add a New Request
     br
     .mpj-journal(v-if='journal.length > 0')
       request-card(v-for='request in journal'

src/app/src/components/common/MaterialDesignIcon.vue

@@ -1,15 +0,0 @@
-<template lang="pug">
-i.material-icons(v-html='icon')
-</template>
-
-<script>
-export default {
-  name: 'md-icon',
-  props: {
-    icon: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>

src/app/src/components/common/Navigation.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-md-app-toolbar.md-large.md-dense.md-primary
+md-toolbar.md-large.md-dense.md-primary
   .md-toolbar-row
     .md-toolbar-section-start
       | howdy

src/app/src/components/request/EditRequest.vue

@@ -62,10 +62,10 @@ article.mpj-main-content(role='main')
     .mpj-text-right
       button(:disabled='!isValidRecurrence'
              @click.stop='saveRequest()').primary.
-        #[md-icon(icon='save')] Save
+        #[md-icon save] Save
       |    
       button(@click.stop='goBack()').
-        #[md-icon(icon='arrow_back')] Cancel
+        #[md-icon arrow_back] Cancel
 </template>
 
 <script>

src/app/src/components/request/NotesEdit.vue

@@ -11,10 +11,10 @@
                @blur='trimText()').mpj-full-width
     .mpj-text-right
       button(@click='saveNotes()').primary.
-        #[md-icon(icon='save')] Save
+        #[md-icon save] Save
       |    
       button(@click='closeDialog()').
-        #[md-icon(icon='undo')] Cancel
+        #[md-icon undo] Cancel
     hr
     div(v-if='hasPriorNotes')
       p.mpj-text-center: strong Prior Notes for This Request
@@ -27,7 +27,7 @@
     div(v-else-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
     div(v-else).mpj-text-center
       button(@click='loadNotes()').
-        #[md-icon(icon='cloud_download')] Load Prior Notes
+        #[md-icon cloud_download] Load Prior Notes
 </template>
 
 <script>

src/app/src/components/request/RequestCard.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
 .mpj-request-card(v-if='shouldDisplay')
   header.mpj-card-header(role='toolbar').
-    #[button(@click='markPrayed()' title='Pray').primary: md-icon(icon='done')]
-    #[button(@click.stop='showEdit()' title='Edit'): md-icon(icon='edit')]
-    #[button(@click.stop='showNotes()' title='Add Notes'): md-icon(icon='comment')]
-    #[button(@click.stop='snooze()' title='Snooze Request'): md-icon(icon='schedule')]
+    #[button(@click='markPrayed()' title='Pray').primary: md-icon done]
+    #[button(@click.stop='showEdit()' title='Edit'): md-icon edit]
+    #[button(@click.stop='showNotes()' title='Add Notes'): md-icon comment]
+    #[button(@click.stop='snooze()' title='Snooze Request'): md-icon schedule]
   div
     p.card-text.mpj-request-text
       | {{ request.text }}

src/app/src/components/request/RequestListItem.vue

@@ -5,20 +5,20 @@ p.mpj-request-text
   br
   button(@click='viewFull'
          title='View Full Request').
-    #[md-icon(icon='description')] View Full Request
+    #[md-icon description] View Full Request
   |    
   template(v-if='!isAnswered')
     button(@click='editRequest'
            title='Edit Request').
-      #[md-icon(icon='edit')] Edit Request
+      #[md-icon edit] Edit Request
     |    
   template(v-if='isSnoozed')
     button(@click='cancelSnooze()').
-      #[md-icon(icon='restore')] Cancel Snooze
+      #[md-icon restore] Cancel Snooze
     |    
   template(v-if='isPending')
     button(@click='showNow()').
-      #[md-icon(icon='restore')] Show Now
+      #[md-icon restore] Show Now
   br(v-if='isSnoozed || isPending || isAnswered')
   small(v-if='isSnoozed').mpj-muted-text: em.
       Snooze expires #[date-from-now(:value='request.snoozedUntil')]

src/app/src/components/request/SnoozeRequest.vue

@@ -13,10 +13,10 @@
     .mpj-text-right
       button.primary(:disabled='!isValid'
                      @click='snoozeRequest()').
-        #[md-icon(icon='snooze')] Snooze
+        #[md-icon snooze] Snooze
       |    
       button(@click='closeDialog()').
-        #[md-icon(icon='undo')] Cancel
+        #[md-icon undo] Cancel
 </template>
 
 <script>

src/app/src/main.js

@@ -1,21 +1,21 @@
-import Vue from 'vue'
-// eslint-disable-next-line
-// import { MdApp, MdContent, MdProgress, MdSnackbar, MdTabs, MdToolbar } from 'vue-material/dist/components'
-import { VueMaterial } from 'vue-material/dist/components'
+// Vue packages and components
+import Vue            from 'vue'
+import VueMaterial    from 'vue-material'
 import VueProgressBar from 'vue-progressbar'
-import VueToast from 'vue-toast'
+import VueToast       from 'vue-toast'
 
+// myPrayerJournal components
+import App         from './App'
+import router      from './router'
+import store       from './store'
+import DateFromNow from './components/common/DateFromNow'
+import PageTitle   from './components/common/PageTitle'
+
+// Styles
 import 'vue-material/dist/vue-material.min.css'
 import 'vue-material/dist/theme/default.css'
 import 'vue-toast/dist/vue-toast.min.css'
 
-import App from './App'
-import router from './router'
-import store from './store'
-import DateFromNow from './components/common/DateFromNow'
-import MaterialDesignIcon from './components/common/MaterialDesignIcon'
-import PageTitle from './components/common/PageTitle'
-
 Vue.config.productionTip = false
 
 Vue.use(VueProgressBar, {
@@ -29,17 +29,10 @@ Vue.use(VueProgressBar, {
   }
 })
 
-// Vue.use(MdApp)
-// Vue.use(MdContent)
-// Vue.use(MdProgress)
-// Vue.use(MdSnackbar)
-// Vue.use(MdTabs)
-// Vue.use(MdToolbar)
 Vue.use(VueMaterial)
 Vue.component('date-from-now', DateFromNow)
-Vue.component('md-icon', MaterialDesignIcon)
-Vue.component('page-title', PageTitle)
-Vue.component('toast', VueToast)
+Vue.component('page-title',    PageTitle)
+Vue.component('toast',         VueToast)
 
 new Vue({
   router,