In Vue 3 (composition API with setup method), in order to separate logic, you’ve to create other methods outside of your setup method (which are named composition functions) :
<script>
export default {
setup(){
return { ...useSearch(), useAuth() }
}
}
function useSearch(){
// creates reactive data, computed, etc and returns it
}
function useAuth(){
// creates reactive data, computed, etc and returns it
}
</script>
But if you’re using the syntactic sugar setup inside the definition of your script (<script setup>), how one is supposed to separate the logic ? Should one just put everything in the unique script block without clear delimitations ? Should one create a new script block for every logical aspect ? I’m looking for the best practice to do that.
>Solution :
This page of the docs and that one are quite relevant.
Overall, consider using script setup and composables to make reusable pieces of code.
As for the structure itself, it’s open to you and how you or your team want to organize things. This is hence opinion-based and cannot be answered further on this platform.