If my .vue files are all the same, how can I avoid repetition?

Solution 1:

There is a package doing something similar to what you want to achieve by leveraging webpack compiling the separate files into a single Vue component: https://github.com/pksunkara/vue-builder-webpack-plugin

What I perosnally do is to use the .vue file for defining the <template> and also to load the needed .js or .css/.scss files. This way I leave it down to only three files and still not having too much repetition by mixing two responsibilities in one file: templating and importing

<template>
   <p>Some code here</p>
</template>

<script src="./path_to_script.js"></script>
<style src="./path_to_styles.css"></style>

After checking the official documentation it seems the above is the currently idiomatic way of doing it: https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns

Solution 2:

i suggest a solution is to create a folder with the component name like ProductForm and inside it add the three files (template, script and style) and add another one which should be called index.js where you put

  <template src="./template.html"></template>
  <script lang="ts" src="./script.ts"></script>
  <style lang="scss" scoped src="./style.scss"></style>

to use the component import it like :

  import ProductForm from './components/ProductForm'

this automatically load index.js file without mentioning it in the import statement.