Vue template vars

As a lot of VUE fans, I can't wait for VUE 3 this year. As someone with React background that is used to using hooks for extracting logic I am really excited for new Composition API. While exploring new features and working with new workflow i found myself returning a lot of variables, first from hooks then from setup for template.

In this article i will explain a Vue template vars little library I created to tackle that long return object. First on the issue, Vue Composition API uses setup function in main object for entry point. In setup function you can create data/state, use lifecycle hooks and manipulate data, so the function can be quite big. Though you can manage that if you move most of the logic in hooks. But if you want to use data from setup function inside of template you will need them in return object..So even if you move most of the logic out to the hooks, you can still have long return object.

Example

1return {
2    playerId,
3    chatMesages,
4    playersData,
5    playerName,
6    opponentName,
7    turnPlayerSign,
8    turnPlayerName,
9    availableGames,
10    gameStarted,
11    gameAvailable,
12    gameQuadrants,
13    gameStatus,
14    gameStatusType,
15    registerPlayer,
16    sendMessage,
17    gameCreate,
18    gameJoin,
19    gameMove,
20    gameLeave,
21    gameReset,
22    gameRestarted,
23    backToHome
24};

Now before we start with library we need to know a bit of reactivity. Basically every reactive value Vue converts to an object. Here is a great video explanation on how exactly reactivity work from VUE Mastery, if you would like to know more on that and i highly recommend to watch it. What is good about that is that objects are passed by reference and we can have references on multiple places.

And that is how Vue template vars work, it creates vue data, saves reference to that data in templateVars object and return it to you if want to manipulate it.. Here you can see example on how templateRef function works. You pass starting value and name of the variable that you will call inside the template.

1function templateRef(value: TemplateRefValue, templateKey: TemplateKey): TemplateVar {
2    templateVars[templateKey] = ref(value);
3    return templateVars[templateKey];
4}

As we can see we save reference to data object in templateVars under name for template. And because we can spread object we in the end just spread it in return and get all those variables from templateVars in template.

1const count = templateRef(0, "count");
2
3 const inc = () => {
4      count.value++;
5};

And we also return that reactive object back so you can use and manipulate with it, and because it is passed as reference when you update value it will be updated also in return object. Of Course if you need to just return value to a template, usually in case of computed data, you dont need to take that variable

1templateComputed(() => count.value + 2, "computedCount");

In the end from first return object, using this technique we can refactor our code.

Example After

1return {
2    ...templateVars,
3    registerPlayer,
4    sendMessage,
5    gameCreate,
6    gameJoin,
7    gameMove,
8    gameLeave,
9    gameRestarted,
10    backToHome
11};

As you can see most important part is that you just spread return object, and all key will be available inside the template.

BONUS

Also because we use state in hooks and we return everything to template, we have no need for this scope so we can basically use functional components.