Skip to content

Instantly share code, notes, and snippets.

@razbakov

razbakov/vue-styleguide.md

Created February 1, 2019 08:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save razbakov/7217e3f8abf9a91834c6af206c0c2da1 to your computer and use it in GitHub Desktop.
Save razbakov/7217e3f8abf9a91834c6af206c0c2da1 to your computer and use it in GitHub Desktop.
Download ZIP
Vue Style Guide
Raw
vue-styleguide.md

Style guide

Filenames

  • should be PascalCase

Filenames of single-file components should either be always PascalCase or always kebab-case. PascalCase works best with autocompletion in code editors, as it’s consistent with how we reference components in JS(X) and templates, wherever possible. However, mixed case filenames can sometimes create issues on case-insensitive file systems, which is why kebab-case is also perfectly acceptable.

Components

  • name in PascalCase in .vue files (in template and in script)
  • if it is vue integration via CDN then use kebab-case
  • name should always have prefix "V"
  • single instance should have prefix "The"
  • props in template in kebab-case
  • props in script in camelCase
props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

Base components (a.k.a. presentational, dumb, or pure components) that apply app-specific styling and conventions should all begin with a specific prefix, such as Base, App, or V.

Source

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment