Material Vue.js Image Card

index.html

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

<template id='v-card-content'>
  <div id="image-canvas" class="image">
    <div class="card-image">
              <img src="http://placehold.it/350x200">
              <span class="card-title">Card Title</span>
        </div>
  </div>
</template>

<!-- material card template for vue.js -->
<template id="v-card">
  <div class="widget card">
        <div class="card-content">
          <span class="card-title grey-text text-darken-4">{{title}}</span>
          <v-card-content></v-card-content>
        </div>
        <div class="card-action">
          <a href="//materializecss.com">Documentation</a>
          <a href='//github.com/Grace'>GitHub</a>
        </div>
      </div>
      
    </div>
</template>

<div id="demo">
  <v-card title="Material Vue.js Image Card" content='Example'>
  </v-card>
</div>

Material Vue.js Image Card.markdown

Material Vue.js Image Card

Material design card implemented using Vue.js

A Pen by Grace on CodePen.

License.

script.js

// define
var Card = Vue.extend({
  props: ['title'],
  template: '#v-card'
});

var CardContent = Vue.extend({
  template: '#v-card-content'
});

// Register MaterialCard Component
Vue.component('v-card', Card);
Vue.component('v-card-content', CardContent);

// Root Instance
var vm = new Vue({
  el: '#demo'
});

$('.widget').draggable();

function setImage(url) {
    $('#image-canvas img').attr('src', url);
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

.widget {
  width: 650px;
  height: 500px;
}

#image-canvas {
  height: 350px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css" rel="stylesheet" />