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.