Separar lógica y templates en Vuejs 2

En esta entrada vamos a ver cómo podemos separar lógica y templates en Vuejs 2 para tener más posibilidades cuando estemos desarrollando con Vue.

Nuestros componentes en Vuejs 2 normalmente contienen una template, un script y algunas veces un tag style. Dependiendo de la forma que tengas de programar te puede gustar o no, por ese motivo quiero ofrecerte la posibilidad de tener tu código separado en distintos archivos, .vue, .js y .css.

La idea es poder dividir en distintos archivos cada componente como si de piezas distintas se tratase, en lugar de tener lo siguiente:

<template>
  <div class="about">
    <h1>Esta es la página {{ name }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'AboutPage',
    data () {
      return {
        name: 'About Page'
      }
    },
  }
</script>

Vamos a hacerlo en distintos archivos separados de la siguiente forma:

about.css

.about {
    background: red;
}

about.js

export default {
  name: 'AboutPage',
  data () {
    return {
      name: 'About Page'
    }
  },
}

about.vue

<template>
    <div class="about">
        <h1>Esta es la página {{ name }}</h1>
    </div>
</template>

Para unirlo todo simplemente nos quedaría crear el archivo About.vue con el siguiente contenido:

<template src="../templates/about.vue"></template>
<script src="../scripts/about.js"></script>
<style src="../styles/about.css"></style>

Esta es una de las formas en las que podemos separar nuestros archivos en piezas sin complejas configuraciones. Es cierto que nos llenamos de archivos, pero los componentes son más sencillos.