md-ripple 적용

nuxt.config.js

@@ -74,6 +74,17 @@ export default {
     ** You can extend webpack config here
     */
     extend (config, ctx) {
+      if (ctx.dev && ctx.isClient) {
+        config.module.rules.push({
+          enforce: 'pre',
+          test: /\.(js|vue)$/,
+          loader: 'eslint-loader',
+          exclude: /(node_modules)/,
+          options: {
+            fix: true
+          }
+        })
+      }
     }
   }
 }

pages/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <div>
-    <div class="md-layout md-aligment-center">
-      <!-- App Content -->
-      <div class="md-layout-item md-size-95">
-        <md-content class="md-layout md-gutter" style="background: #007998; padding: 1em;">
-          <ul v-for="headline in headlines" :key="headline.id" class="md-layout-item md-large-size-25 md-medium-size-33 md-small-size-50 md-xsmall-size-100">
-            <md-card style="margin-top: 1em;" md-width-hover>
+  <div class="md-layout md-aligment-center">
+    <!-- App Content -->
+    <div class="md-layout-item md-size-95">
+      <md-content class="md-layout md-gutter" style="background: #007998; padding: 1em;">
+        <ul v-for="headline in headlines" :key="headline.id" class="md-layout-item md-large-size-25 md-medium-size-33 md-small-size-50 md-xsmall-size-100">
+          <md-card style="margin-top: 1em;" md-width-hover>
+            <md-ripple>
               <md-card-media md-ratio="16:9">
                 <img :src="headline.urlToImage" :alt="headlines.title">
               </md-card-media>
@@ -45,10 +45,10 @@
                   <md-icon>message</md-icon>
                 </md-button>
               </md-card-actions>
-            </md-card>
-          </ul>
-        </md-content>
-      </div>
+            </md-ripple>
+          </md-card>
+        </ul>
+      </md-content>
     </div>
   </div>
 </template>