Full-Stack Vue.js 2 and Laravel 5

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 is single-file components:

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

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

Of course, ...