# Vue

## We use single-file components

Each component lives in a single file, containing:

* its `template` (the DOM structure)
* its `script` (including `props`, `data` and `methods` among other things)
* its `style` (defining the look of the component)

See the [Vue.js docs](https://vuejs.org/v2/guide/single-file-components.html) for more details.

Placed in the same folder are also:

* the test file (e.g. `MyComponent.spec.js`)
* the storybook file (e.g. `MyComponent.story.js`)

## We use typed props

Vue.js allows us to define component props either as strings or as objects (with `type` and `default` or `required` values). Always go for the second option!

Also: only (and always!) define a `default` for props that are *not required*.

Why?

* it makes our code more robust – a warning will be shown when passing a wrong prop type
* it clearly defines the component API and tells other developers how to use it

It is as easy as writing:

```
props: {
  title: {
    type: String,
    required: true,
  },
  image: {
    type: String,
    default: 'human-connection-logo.png',
  },
}
```

For more complex use cases see the [official Vue.js documentation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation).

## We use shorthands

For better readability we prefer

* `:something` over `v-bind:something`
* `@click` over `v-on:click`
* `#slotSame` over `v-slot:slotName`
* `#default` over `v-slot`

Read more in the [official Vue.js docs](https://vuejs.org/v2/guide/syntax.html#Shorthands) (for [slots](https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand))

## Recommended reads

The [Vue.js component style guide](https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props) offers a whole list of best-practices for writing Vue components.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.human-connection.org/human-connection/webapp/vue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.