This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

Vue template vars

Introduction

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.

Install

npm

npm i vue-template-vars

Yarn

yarn add vue-template-vars

Usage

Import useTemplateVars hook from a package.

import { useTemplateVars } from "vue-template-vars";

Then inside setup function, destructure functions that you need.

const { templateVars, templateRef, templateReactive, templateComputed } = useTemplateVars();

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.

return { ...templateVars }

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.

Example

templateRef(0, "templateCount");

Then inside a template, we reference the variable with a name given to the hook.

{{ templateCount }}

To be able to manipulate reactive object inside setup function, assign it to a variable, as hook returns a reactive object.

const count = templateRef(0, "templateCount");

Live example

You can view them in action on Code sandbox.

License

MIT