I have very big single file component, and i do use child Components whenever it make sense.
The problem is that the file become to big for the Code Editor.
What is the best way to split the file to separate files?
<template>
long HTML - ( more then 200 lines )
</template>
<script>
import search from '../services/someServes.js';
export default {
data() {
return {
A lot of data
}
},
methods: {
**VERY LONG** .... more then 1000 lines ...
}
}While you could move both template and script completely into their own files like this:
<template src="./file.html">
</template>
<script src="./file.js">
</script>
…it seems that you have faaaar to much logic in this component, especially the methods.
You can move any method into an external file and import it so the implementation details are moved out of the component:
// helpers.js
export function someHelperMethod() {
// do stuff.
}
// yourComponent.vue
import { someHelperMethod } from './helpers.js'
export default {
// ...
methods: {
someMethod,
// ...
}
}
This approach is best suited for helper functions (those that do basic operations, not business logic), but can be used for any method.
You can also consider using a mixin.
I understand that you are saying that you already use child components where possible, but if you have >1000 loc in methods alone, chances are your component is too complex and would profit from being broken into smaller components still.
my template is too long.i want to break it into two or three html files but I don’t want to make any new components! is there any way to do this?