How to write good and reusable Components in Vue.js
How to write good and reusable Components in Vue.js
Developers are often talking about style guide driven development. The guide often provides an indicative way to structure code, making it easier for developers/team members to understand and find things. The author of this article, due the lack of a good Style Guide for developing Vue.js Components, has created one document that will help those who are entering the Vue.js world.
The guide provides a way to structure your code, making it:
- easier for developers/team members to understand and find things.
- easier for IDEs to interpret the code and provide assistance.
- easier to (re)use build tools you already use.
- easier to cache and serve bundles of code separately.
The guide's table of content is:
- Module based development
- vue component names
- Use
<script type="text/javascript">inside component - Keep component expressions simple
- Keep component options primitive
- Harness your component options
- Assign
thistocomponent - Component structure
- Avoid
this.$parent - Avoid
this.$refs - Use component name as style scope
- Document your component API
- Add a component demo
- Lint your component files
Check it out on Github.
The guide is based on a document written by De Voorhoede that had the same style guiding goal.
Created and submitted by Pablo H. P Silva.
