title: Reusing small bits of markup inside a component in a vue file
body: <p>I am just starting to learn Vue and while doing a very basic template I found myself repeating small bits of HTML / components in the same template because of a v-if and different containing components depending on its result.</p>
  
  <p>Though I have solved this repeating the same lines a few times I find it less than ideal and would like to know if there is a better way to make it DRY (without having to create a new component).</p>
  
  <p>I would like to be able to reuse the following lines:</p>
  
  <blockquote>
    <p>{{ item.name }}<br>
          And a bit more of markup, but not much and no "functionality"</p>
  </blockquote>
  
  <p>Definitively creating a new vue file with a new component would be overkill. But having to repeat those lines (the real ones a little bit more complex) really gives me pain a little bit.</p>
  
  <p>Here is a very simple example that illustrates the problem.</p>
  
  <p><strong>Please remember that this is not the real code, the real code is inside a vue file (but I do not know how to simulate this here or in codepen)!!</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new Vue({
    el: '#app',
    data: {
      items: [
        {
          name: 'name 1',
          link: 'http://www.google.com'
        },
        {
          name: 'name 2',
          link: ''
        },
      ]
    },
    methods: {
    }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;template v-for="item in items"&gt;
      &lt;a :href="item.link" v-if="item.link != ''"&gt;
        {{ item.name }}&lt;br&gt;
        And a bit more of markup, but not much and no functionality
      &lt;/a&gt;
      &lt;p v-else&gt;
        {{ item.name }}&lt;br&gt;
        And a bit more of markup, but not much and no functionality
      &lt;/p&gt;
    &lt;/template&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>