Vue template vars
Vue template vars is a hook package for Vue 3 and Composition Api. Which is at the moment in beta and should be used only in development. Vue template vars help with long return statement from setup function. It references all reactive state in templateVars object. Under the hood, it uses standard vue hooks for the reactive state.
npm i vue-template-vars
yarn add vue-template-vars
Import useTemplateVars hook from a package.
Then inside setup function, destructure functions that you need.
const templateVars templateRef templateReactive templateComputed = ;
The most important thing for the variables to be available inside a template, you need to destructure templateVars in the return statement from setup function, as they contain all references to the data.
All the hooks behave the same as vue native hooks; what is different is the second argument. The second argument is the name of the variable referenced inside the template.
Then inside a template, we reference the variable with a name given to the hook.
To be able to manipulate reactive object inside setup function, assign it to a variable, as hook returns a reactive object.
const count = ;
You can view them in action on Code sandbox.