Vue 3 extracting setup

Created: 08/06/2021

When I want to move quickly and / or I don’t have a clear idea what I’m doing, my components become very large. A lot of deletes, renaming… refactoring is going on… At this stage I don’t want to break them into separate components.

So, I found it more practical to extract setup() in a separate componentName.setup.js file. Split IDE view in half. On the left side .vue, on the right - .setup.js.

Besides, ‘.js’ files have noticeably better support in vscode than .vue.

Why componentName.setup.js and not just componentName.js ?
For better searching in vscode with Ctrl+p.

<!-- ~/LargeComponent.vue -->

<style scoped>
  /* a lot of styling */
</style>

<template>
  <!-- 30+ lines -->
</template>

<script>
import setup from './largeComponent.setup.js'

export default {
  setup,
}
</script>

/* ~/largeComponent.setup.js */

export default function setup(props, { attrs, slots, emit }) {
	//
}