# Vue – Code Guidelines | Ocelot.Social Documentation
Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

# Vue – Code Guidelines

April 5, 2026
Less than 1 minute

On This Page

- We use single-file components
- We use typed props
- We use shorthands
- Recommended reads

# Vue – Code Guidelines

## 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 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.

## 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 (for slots)

## Recommended reads

The Vue.js component style guide offers a whole list of best-practices for writing Vue components.