JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  
</div>

JavaScript

Vue.component('test-svg', {
  data: function() {
    return { items: [0,1,2] }
  },
	render: function() {
    var _vm = this;
    return _vm._h('svg', {
      attrs: {
        "id": "app",
        "height": "600",
        "width": "600"
      }
    }, [_vm._l((_vm.items), function(item, index) {
      return _vm._h('g', [_vm._h('circle', {
        attrs: {
          "r": "30",
          "cy": 100 * index,
          "cx": 100 * index
        }
      })])
    })])
  }
})
new Vue({
    el: '#app',
    render: function () {
      var _vm=this;return _vm._h('test-svg') 
    }
})

/**
try to run this page on ie9

Generated with
vue-compiler test-svg.vue --out .

vue-compiler -V
2.0.0

<template>
  <svg id="app" height="600" width="600">
    <g v-for="(item, index) in items">
      <circle r="30" :cy="100 * index" :cx="100 * index"></circle>
    </g>
  </svg>
</template>

**/