<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">similar to angularjs directives, would like the ability to alias the names the component's parent uses to pass values</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">component:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export default {
		name: &quot;paging&quot;,
		props: {
			&quot;count&quot;: {&quot;name&quot;: &quot;pagingCount&quot;, &quot;type&quot;: Number}
		},
"><pre class="notranslate"><code class="notranslate">export default {
		name: "paging",
		props: {
			"count": {"name": "pagingCount", "type": Number}
		},

</code></pre></div>
<p dir="auto">parent:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;paging v-bind:paging-count=&quot;itemsCount&quot;&gt;&lt;/paging&gt;"><pre class="notranslate"><code class="notranslate">&lt;paging v-bind:paging-count="itemsCount"&gt;&lt;/paging&gt;
</code></pre></div>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">Debugging from template code is frustratingly impractical because you lose access to the conventional tools available to you in plain javascript. The reference to the <code class="notranslate">console</code> is missing because it is not in the scope of the component instance. Yes, you can add it to the component instance or even the global Vue prototype, but to have to do this every time you need to debug, and then remove for the sake of keeping your code clean, is needlessly tedious.</p>
<p dir="auto">Additionally, the <code class="notranslate">debugger</code> keyword (for example within an in-template IIFE) is barely of any use because the compiled variables do not match those of the component instance.</p>
<p dir="auto">This has been an issue for me for a while now, but I was more forgiving of it because how incredible Vue otherwise is. However, I recently noticed that <a href="https://svelte.dev/docs#debug" rel="nofollow">Svelte.js offers a pretty nifty OOTB feature for debugging in templates</a>.</p>
<p dir="auto">From their docs:</p>
<blockquote>
<p dir="auto">The {<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/debug/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/debug">@debug</a> ...} tag offers an alternative to console.log(...). It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.</p>
<p dir="auto">It accepts a comma-separated list of variable names (not arbitrary expressions).</p>
<p dir="auto">The {<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/debug/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/debug">@debug</a>} tag without any arguments will insert a debugger statement that gets triggered when any state changes, as opposed to the specified variables.</p>
</blockquote>
<p dir="auto">Is there any way we can bring this into Vue template syntax?</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div&gt;
    {{ @debug }}
    or
    {{ @debug var1, var2, ..., varN }}
  &lt;/div&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;div&gt;
    {{ @debug }}
    or
    {{ @debug var1, var2, ..., varN }}
  &lt;/div&gt;
&lt;/template&gt;
</code></pre></div>