Human Connection
1.0.0
1.0.0
  • Introduction
  • Edit this Documentation
  • Installation
  • Neo4J
  • Backend
    • GraphQL
    • neo4j-graphql-js
  • Webapp
    • Components
    • HTML
    • SCSS
    • Vue
  • Testing Guide
    • End-to-end tests
    • Frontend tests
    • Backend tests
  • Contributing
  • Kubernetes Deployment
    • Minikube
    • Digital Ocean
      • Kubernetes Dashboard
      • HTTPS
    • Human Connection
      • Error Reporting
      • Mailserver
      • Maintenance
    • Volumes
      • Neo4J Offline-Backups
      • Neo4J Online-Backups
      • Volume Snapshots
      • Reclaim Policy
      • Velero
    • Metrics
    • Legacy Migration
  • Feature Specification
  • Code of conduct
  • License
Powered by GitBook
On this page
  • We use single-file components
  • We use typed props
  • We use shorthands
  • Recommended reads

Was this helpful?

  1. Webapp

Vue

PreviousSCSSNextTesting Guide

Last updated 5 years ago

Was this helpful?

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 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',
  },
}

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

Recommended reads

For more complex use cases see the .

Read more in the (for )

The offers a whole list of best-practices for writing Vue components.

Vue.js docs
official Vue.js documentation
official Vue.js docs
slots
Vue.js component style guide