Upgrade to Vue 2

src/components/mdBottomBar/mdBottomBar.scss

@@ -24,7 +24,6 @@
   cursor: pointer;
   border: none;
   background: transparent;
-  transition: $swift-ease-out;
   transform: translate3d(0, 0, 0);
   color: currentColor;
   font-family: inherit;
@@ -49,6 +48,7 @@
     max-width: 96px;
     position: static;
     flex: 1 1 32px;
+    transition: $swift-ease-out;
 
     .md-icon {
       transform: translate3d(0, 8px, 0);

src/components/mdBottomBar/mdBottomBarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="md-bottom-bar-item" :class="{ 'md-active': active }" v-md-ink-ripple @click="setActive">
+  <button type="button" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive">
     <md-icon>{{ mdIcon }}</md-icon>
 
     <span class="md-text">
@@ -11,13 +11,26 @@
 <script>
   export default {
     props: {
-      mdIcon: String
+      mdIcon: String,
+      mdActive: Boolean
     },
     data() {
       return {
         active: false
       };
     },
+    computed: {
+      classes() {
+        return {
+          'md-active': this.active
+        };
+      }
+    },
+    watch: {
+      mdActive(active) {
+        this.active = active;
+      }
+    },
     methods: {
       setActive() {
         this.$parent.$children.forEach((item) => {
@@ -28,7 +41,13 @@
       }
     },
     mounted() {
-      if (this.$el.classList.contains('md-active')) {
+      if (!this.$parent.$el.classList.contains('md-bottom-bar')) {
+        this.$destroy();
+
+        throw new Error('You should wrap the md-bottom-bar-item in a md-bottom-bar');
+      }
+
+      if (this.mdActive) {
         this.active = true;
       }
     }

src/docs/pages/BottomBar.vue

@@ -3,7 +3,7 @@
     <div class="cell-phone" v-md-theme="'teal'">
       <md-bottom-bar>
         <md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="favorite" class="md-active">Favorites</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
       </md-bottom-bar>
     </div>
@@ -12,7 +12,7 @@
       <md-bottom-bar md-shift>
         <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
-        <md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
       </md-bottom-bar>
     </div>
@@ -23,9 +23,18 @@
   .cell-phone {
     width: 360px;
     height: 480px;
+    position: relative;
+    overflow: hidden;
     background-color: #eee;
     border: 1px solid #ccc;
   }
+
+  .md-bottom-bar {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
 </style>
 
 <script>