import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as o,o as i}from"./app-h9l50wZ_.js";const a={};function l(t,e){return i(),n("div",null,e[0]||(e[0]=[o(`<h1 id="vue-–-code-guidelines" tabindex="-1"><a class="header-anchor" href="#vue-–-code-guidelines"><span>Vue – Code Guidelines</span></a></h1><h2 id="we-use-single-file-components" tabindex="-1"><a class="header-anchor" href="#we-use-single-file-components"><span>We use single-file components</span></a></h2><p>Each component lives in a single file, containing:</p><ul><li>its <code>template</code> (the DOM structure)</li><li>its <code>script</code> (including <code>props</code>, <code>data</code> and <code>methods</code> among other things)</li><li>its <code>style</code> (defining the look of the component)</li></ul><p>See the <a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener noreferrer">Vue.js docs</a> for more details.</p><p>Placed in the same folder are also:</p><ul><li>the test file (e.g. <code>MyComponent.spec.js</code>)</li><li>the storybook file (e.g. <code>MyComponent.story.js</code>)</li></ul><h2 id="we-use-typed-props" tabindex="-1"><a class="header-anchor" href="#we-use-typed-props"><span>We use typed props</span></a></h2><p>Vue.js allows us to define component props either as strings or as objects (with <code>type</code> and <code>default</code> or <code>required</code> values). Always go for the second option!</p><p>Also: only (and always!) define a <code>default</code> for props that are <em>not required</em>.</p><p>Why?</p><ul><li>it makes our code more robust – a warning will be shown when passing a wrong prop type</li><li>it clearly defines the component API and tells other developers how to use it</li></ul><p>It is as easy as writing:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>props: {</span></span>
<span class="line"><span>  title: {</span></span>
<span class="line"><span>    type: String,</span></span>
<span class="line"><span>    required: true,</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>  image: {</span></span>
<span class="line"><span>    type: String,</span></span>
<span class="line"><span>    default: &#39;human-connection-logo.png&#39;,</span></span>
<span class="line"><span>  },</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For more complex use cases see the <a href="https://vuejs.org/v2/guide/components-props.html#Prop-Validation" target="_blank" rel="noopener noreferrer">official Vue.js documentation</a>.</p><h2 id="we-use-shorthands" tabindex="-1"><a class="header-anchor" href="#we-use-shorthands"><span>We use shorthands</span></a></h2><p>For better readability we prefer</p><ul><li><code>:something</code> over <code>v-bind:something</code></li><li><code>@click</code> over <code>v-on:click</code></li><li><code>#slotSame</code> over <code>v-slot:slotName</code></li><li><code>#default</code> over <code>v-slot</code></li></ul><p>Read more in the <a href="https://vuejs.org/v2/guide/syntax.html#Shorthands" target="_blank" rel="noopener noreferrer">official Vue.js docs</a> (for <a href="https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand" target="_blank" rel="noopener noreferrer">slots</a>)</p><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>The <a href="https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props" target="_blank" rel="noopener noreferrer">Vue.js component style guide</a> offers a whole list of best-practices for writing Vue components.</p>`,21)]))}const p=s(a,[["render",l],["__file","vue.html.vue"]]),c=JSON.parse('{"path":"/webapp/vue.html","title":"Vue – Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We use single-file components","slug":"we-use-single-file-components","link":"#we-use-single-file-components","children":[]},{"level":2,"title":"We use typed props","slug":"we-use-typed-props","link":"#we-use-typed-props","children":[]},{"level":2,"title":"We use shorthands","slug":"we-use-shorthands","link":"#we-use-shorthands","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.84,"words":252},"filePathRelative":"webapp/vue.md","localizedDate":"April 5, 2026","excerpt":"\\n<h2>We use single-file components</h2>\\n<p>Each component lives in a single file, containing:</p>\\n<ul>\\n<li>its <code>template</code> (the DOM structure)</li>\\n<li>its <code>script</code> (including <code>props</code>, <code>data</code> and <code>methods</code> among other things)</li>\\n<li>its <code>style</code> (defining the look of the component)</li>\\n</ul>"}');export{p as comp,c as data};
