Vue 3 separation of logic with setup notation and composition API

Question

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.

You may be overthinking it. useAuth sounds like it could be reused between multiple comps. If that's the case then extract it to a composable. As a rule of thumb, if a piece of code has a chance to become a composable OR global store (because pinia setup functions are written like that), write it as a composable. Otherwise leave it as is. return { ...useSearch() looks that code that you may end up rewriting as const search = useSearch() when you need to use it in setup, so it may be not much different than writing const search = reactive(...) directly or whatever it is — Estus Flask
– Estus Flask, Commented Jun 17, 2024 at 13:40
And generally not important if script setup is used. This results in useSearch, etc being redeclared on each setup but forcing the functions to be declared outside setup would result in premature optimization. Creating functions is cheap in modern engines — Estus Flask
– Estus Flask, Commented Jun 17, 2024 at 13:42
I don't think I'm overthinking it. I thought about this question because in a Vue Mastery video, they tell us to separate concern the way I did in my question. But in this video, they do not show the equivalent when using setup directly in the script tag, so I'm just looking for an equivalent. — Nicolas
– Nicolas, Commented Jun 17, 2024 at 13:49
Again, depends on how fine-grained you want it. Advanced organization tends to be less monolithic. You can follow VueMastery's approach if you feel like it's adequate. Otherwise, if you don't really have lots of issues with your current approach, stick to it. — kissu
– kissu, Commented Jun 17, 2024 at 13:51
@Nicolas I see the context. I posted an answer regarding the script setup part — Estus Flask
– Estus Flask, Commented Jun 17, 2024 at 14:13

kissu · Accepted Answer · 2024-06-17 13:26:01Z

2

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.

edited Jun 17, 2024 at 13:26

answered Jun 17, 2024 at 13:21

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nicolas Over a year ago

Thanks for your answer. Maybe I'm missing something but in these pages, I can only see cases where composable are outside of the main component file. If I have some logic that I do not want to reuse in antoher component, there isn't any recommended strucuture to organize it ? It's completly opinion-based ?

kissu Over a year ago

@Nicolas if there is no need to use it elsewhere, you can then keep it in the component and organize it as you'd like. Give a search online to some blogs or course platforms that might give some ideas to organize your code to your liking. If you're an ex-options API user, you can always mimic the same order. Otherwise grouping by what it does is always a decent way of doing things. Keep in mind that your Vue component should not be in the realm of hundreds of lines, hence no real need to have hardcore organization overall. And this is very opinion-based because everyone has their own ways.

kissu Over a year ago

I can understand that it's a bit confusing to not have clear guidance as to how to write it precisely, but that's also a good thing because it makes Vue modular and you can turn it in the way you like it the best. This is not fitting for a further StackOverflow answer because there is no end-answer to this, each approach has pros and cons and variants are almost limitless if you consider everyone's setup/team/tools/challenges etc. Hence, will create an endless pit similar to Vue VS React or Android vs iPhone with poor answers and lots of subjectivity. @Nicolas

Estus Flask · Accepted Answer · 2024-06-17 14:11:41Z

As a rule of thumb, if a piece of code has a chance to become a composable or global store (Pinia setup functions are written the same way and can be easily refactored in both ways), write it as a composable. Otherwise it can be left as is.

The name useAuth suggests like it could be reused between multiple components, and is therefore suitable to be a composable.

In this case loose coupling between the composables without extracting them to a separate module would make the implementation more complex (dependency injections, etc). This won't improve the testability because a component is tested as a single unit, local functions cannot be effectively mocked and spied.

There is no significant difference between script and script setup in this regard, except that the result of a composable should be assigned to a variable in order to be exposed to a template, which is good because doing this instead of ...useSearch() allows to avoid refactoring when the result needs to be used inside a script.

It would be:

<script setup>
const search = useSearch();
function useSearch() {...}
...

Which would roughly result in:

<script>
...
setup() {
  const search = useSearch();
  function useSearch() {...}
  return {
    search,
  ...

This results in a negligible decrease in performance that falls into the premature optimization category and can be ignored. This also makes the composables prone to accidental dependency on local variables, which would require refactoring to extract them to a separate module if necessary; this would naturally be avoided if they were defined in a parent scope.

Collectives™ on Stack Overflow

Vue 3 separation of logic with setup notation and composition API

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related