eslint-plugin-vue-composable

ESLint plugin providing rules related to composable.

Rules

vue-composable/composable-placement

Enforce composable call be placed in setup() or another composable, not after an await expression. Functions start with use is treated as composables in this rule.

Rule Details

Examples of incorrect code for this rule:

function foo() {
  /* BAD: composable is in non-composable function */
  useBar()
}

function useBaz() {
  function qux() {
    /* BAD: parent function is non-composable function */
    useBar()
  }
}

export default defineComponent({
  async setup() {
    await fetch()

    /* BAD: composable is after `await` */
    useBaz()
  }
})

Examples of correct code for this rule:

function useFoo() {
  /* GOOD: composable is in another composable */
  useBar()
}

export default defineComponent({
  setup() {
    /* GOOD: composable is in setup() */
    useBaz()
  }
})

<script setup>
/* GOOD: composable is in script setup */
useFoo()

await fetch()

/* GOOD: you can place composable after `await` if it is in script setup */
useBar()
</script>

License

MIT