Any new ideas for improving templates?

[akaufmann]

Hi,

First of all, a huge thank you to everyone working on Vue and Vite. You guys are "on fire" right now! Great progress in the right direction, especially with the script setup.

I hope this is the right place. Just wondering if there are any ideas to make the templates even better? Right now, with all these great improvements, I feel like the templates would be another place where great ideas would push Vue even further. For years there were no real improvements in this regard across all frameworks, apart from Svelte's slightly cleaner way of declaring templates (single curly braces, dynamic classes directly in the HTML class attribute, const declaration, ...).

I just wanted to ask first - maybe this was already denied in another RFC (sorry didn't find anything about this, maybe in the RFC for Vue 3 itself?) - if there is an open ear for this for Vue 3 before ideas are proposed, or even better, ideas are already floating around for an upcoming RFC.

[kiaking]

Vue (or any software) is always welcoming improvements in every part of the software. If there're any idea that can improve templates in Vue, no doubt we'll be discussing it. If you have any specific idea, just post that idea and see if that gets any attention 👍

For example, I think single curly braces is not an improvement but rather preference issue. Some might prefer it, some don't, right? You might feel it's improvement but other might think it's regression.

But who knows? If for example 99% Vue users do actually prefer single braces, maybe it's good idea to think about. But we'll never know until someone opens that discussion up.

[jods4]

Related to curly braces, it's worth noting that there's a web component proposal "Template Instantiation" that would standardise double curly braces for placeholders.

One improvement I would like is being able to put DOM references into any field, ref or not. I don't think there's a technical reason to forbid the following, and in many occasions it works as well as ref without the extra hurdles:

<template>
  <input ref="box" />
</template>

<script setup>
  import { onMounted } from "vue"

  let box;

  onMounted(() => box.focus())
</script>

[akaufmann]

Definitely something that depends on your own taste.

The way I see it, if I have to write less without doing too much magic, it's already an improvement because I spend several hours as a dev every day w/ all the features a framework provides, but it also depends more on the sum of all the features.

Some low hanging fruit that comes to mind would be for me:

<template>
  <div
    class="a b {foo > 0 && 'c'}"
    :class.abc="bar === 'bar'"
    :style.width.px="width"
  >
    { title }
    <div v-await="promise">
      <div v-then="value">
        <p>The value is { value }</p>
      </div>
      </div>
      <div v-catch="error">
        <p>Something went wrong: { error.message }</p>
      </div>
    </div>

    <!-- or -->
    <div v-for="value of async(promise)">
      <p>{ value.foo }</p>
      <div v-const="{x, y, z} = value">
        {x} - {y} - {z}
      </div>
      <div v-catch-error> <!-- v-catch-<var name> -->
        <p>Something went wrong: { error.message }</p>
      </div>
    </div>

    <!-- or because it is sometimes more difficult to recognize the directives in complex templates -->
    <v-for="value of async(promise)" :fallback="<div>Loading...</div>">
      <p>{ value.foo }</p>
      <div v-catch-error> <!-- v-catch-<var name> -->
        <p>Something went wrong: { error.message }</p>
      </div>
    </v-for>
  </div>
</template>

EDIT: Easy tags transformation:

<!-- can be imported from a Vue file or used inline -->
<!-- import { BlogPost } from './blog-post-makro.vue' -->
<v-makro title="title" url="url" name="blog-post">
  <div class="section">
    <h2>
      <a :href="url">{ title }</a>
    </h2>
    <div>
      <slot></slot>
    </p>
  </div>
</v-makro>

<template>
  <BlogPost
    title="Best Blog Post"
    url="http://example.com/blog"
  >
    <p>Lorem ipsum...</p>
  </BlogPost>
  
  <BlogPost
    title="Next Best Blog Post"
    url="http://example.com/blog"
  >
    <p>Lorem ipsum 2...</p>
  </BlogPost>
</template>

But of course always debatable, as these would only be minor tweaks but for me as an Angular/Svelte developer it would be a starting point.

Any really interesting approaches would require more brain power and time of course. 😄

[MartinMalinda]

I'd prefer to handle the async stuff via components + slots. That way you can provide your own custom defaults which you can then override later.

The v-makro trick can be done with :set="title = 'foo' I think. I've seen it somewhere on Twitter though ad it might be private API still.

You could however solve that with a component as well:

<Reactive firstName="John" lastName="Doe" v-slot="{ firstName, lastName }">
  {{ firstName }} {{ lastName }}
</Reactive>

But this is kinda verbose yeah 🤷