use css class syntax in pug template

src/components/Alerts.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  div(class="alerts")
+  div.alerts
     div(v-for="alert in alerts" v-bind:class="alert.type" transition="expand")
       p {{alert.message}}
 </template>

src/components/HeaderBar.vue

@@ -8,7 +8,7 @@
       img(v-bind:src="user.imageUrl" alt="{{user.userTitle}}")
 
       a(href="#" @click.prevent="signOut")
-        i(class="fa fa-sign-out" aria-hidden="true")
+        i.fa.fa-sign-out(aria-hidden="true")
 </template>
 <script>
 import Auth from 'src/data/Auth'

src/components/notes/Create.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  form(class="create-note" @submit.prevent="createNote")
+  form.create-note(@submit.prevent="createNote")
     input(name="title" v-model="title" placeholder="Title")
     textarea(name="content" v-model="content" placeholder="Text goes here..." rows="3")
     button(type="submit") +

src/components/notes/Index.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  div(class="notes" v-el:notes)
+  div.notes(v-el:notes)
     note(v-for="note in filteredNotes" v-bind:note="note" @click="selectNote(note)")
 </template>
 <script>
@@ -73,5 +73,4 @@ export default {
 <style lang="sass">
 .notes
   margin: 0 auto
-
 </style>

src/components/notes/Note.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  div(class="note" v-bind:class="[size]")
+  div.note(v-bind:class="[size]")
     h1 {{note.title}}
     pre {{note.content}}
     button(type="button" @click.stop="remove")
-      i(class="fa fa-trash-o" aria-hidden="true")
-    button(class="edit" type="button")
-      i(class="fa fa-pencil" aria-hidden="true")
+      i.fa.fa-trash-o(aria-hidden="true")
+    button.edit(type="button")
+      i.fa.fa-pencil(aria-hidden="true")
 </template>
 <script>
 import noteRepository from '../../data/NoteRepository'

src/components/notes/UpdateModal.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-  div(v-if="note" transition="modal" class="backdrop" @click="dismissModal")
-    form(class="edit-note" @submit.prevent="update" @click.stop="")
-      input(name="title" v-model="note.title" placeholder="Title")
+  div.backdrop(v-if="note" transition="modal" @click="dismissModal")
+    form.edit-note(@submit.prevent="update" @click.stop="")
+      input.title(v-model="note.title" placeholder="Title")
 
       textarea(name="content" v-model="note.content" placeholder="Text goes here..." rows="8")
 
       button(type="button" @click="remove")
-        i(class="fa fa-trash-o" aria-hidden="true")
+        i.fa.fa-trash-o(aria-hidden="true")
       button(type="submit") Done
 </template>
 <script>

src/components/pages/Auth.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  form(class="auth-form" @submit.prevent="wantsToSignUp ? signUpWithPassword() : signInWithPassword()")
+  form.auth-form(@submit.prevent="wantsToSignUp ? signUpWithPassword() : signInWithPassword()")
     h1 {{wantsToSignUp ? 'Sign up' : 'Sign in'}}
 
     div
@@ -23,15 +23,15 @@
 
     hr
 
-    div(class="social-providers")
+    div.social-providers
       a(href="#" @click.prevent="signInWithProvider('facebook')")
-        i(class="fa fa-facebook-square" aria-hidden="true")
+        i.fa.fa-facebook-square(aria-hidden="true")
       a(href="#" @click.prevent="signInWithProvider('twitter')")
-        i(class="fa fa-twitter-square" aria-hidden="true")
+        i.fa.fa-twitter-square(aria-hidden="true")
       a(href="#" @click.prevent="signInWithProvider('google')")
-        i(class="fa fa-google-plus-square" aria-hidden="true")
+        i.fa.fa-google-plus-square(aria-hidden="true")
       a(href="#" @click.prevent="signInWithProvider('github')")
-        i(class="fa fa-github-square" aria-hidden="true")
+        i.fa.fa-github-square(aria-hidden="true")
 </template>
 <script>
 import Auth from 'src/data/Auth'