Vue Composables best practices

Viewed 53

I need your help when writting good composables in Vue 3. Looking a the documentation I can see that composables should be a function. That's ok.

However I don't feel confortable with this because I lose IDE help and autocompletion.

For example, if I have a useUtils() composable like this:

// composables/useUtils.js

export default function useUtils() {
  const isAdmin = () => true;
  const isUser = () => false;

  return {
    isAdmin,
    isUser,
}

Then, when writting code in PhpStorm/WebStorn, the IDE does not autocomplete (either auto import) the utilities functions described inside my useUtils() composable :(

For example, if I start to write:

const canCreate = isAdm //<-- Here I would like IDE to autocomplete and autoimport!

That doesn't work because IDE is not able to know what should autocomplete.

Workaround

If I define the composable as a bounch of exported functions however, it works correctly:

// composables/useUtils.js

export const isAdmin = () => true;
export const isUser = () => false;

Now, the IDE knows all available functions and does a good work autocompleting and autoimporting everything.

In addition, when using this approach, I also get's the ability to know what things of my composable are being used and what not, that's very cool. It doesn't happen when deffining a function. But I feel bad because Vue docs says that composables should be a function T_T

So, here is my question:

What do you do guys? Are there a way to configure the IDE for a better integration when writting composables? Is very bad to use a bunch of funtions?

Give me any tip please,

Thanks!

0 Answers
Related