Single-file components

A drawback of using components is that you need to write your template in a JavaScript string outside of your main HTML file. There are ways to write template definitions in your HTML file, but then you have an awkward separation between markup and logic.

A convenient solution to this issingle-file components:

<template>
  <li v-on:click="bought = !bought" v-bind:class="{ bought: bought }">
    <p>{{ title }}</p>
  </li>
</template>
<script> export default { props: [ 'title' ], data: function() { return { bought: false }; } } </script>
<style> .bought { opacity: 0.5; } </style>

These files have the.vueextension and encapsulate the component template, JavaScript configuration, and style all in a single file.

Of course, a web browser can't read these files, so they need to be first processed by a build tool such as Webpack.