Clear and concise description of the problem

Some VueUse functions are pure, meaning they produce no side effects and their outputs depend only on their inputs. Values created by such functions should be tree-shaken if they are unused.

For example, when using createGlobalState to define a global state:

export const useGlobalState = createGlobalState(() => {
  return { count: 0 }
})

If useGlobalState is never imported or used, it should be removed during tree-shaking.

Suggested solution

Add the /* #__NO_SIDE_EFFECTS__ */ annotation to all pure VueUse functions to hint bundlers that the call has no side effects and can safely be removed if unused.

Reference: vuejs/pinia#2740

Temporary Workaround

In the meantime, users can manually annotate the call with /* @__PURE__ */ to enable tree-shaking:

export const useGlobalState = /* @__PURE__ */ createGlobalState(() => {
  return { count: 0 }
})

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.