{"id":22129172,"url":"https://github.com/tomattban/a-guide-to-follow","last_synced_at":"2026-03-19T21:52:20.600Z","repository":{"id":239082849,"uuid":"798443354","full_name":"ToMattBan/a-guide-to-follow","owner":"ToMattBan","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-13T16:30:26.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-29T14:23:51.527Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ToMattBan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-09T19:37:00.000Z","updated_at":"2024-12-13T16:30:29.000Z","dependencies_parsed_at":"2024-05-09T22:38:46.885Z","dependency_job_id":"ee5f21d6-ba6f-4fc7-8be8-06d07eda215c","html_url":"https://github.com/ToMattBan/a-guide-to-follow","commit_stats":null,"previous_names":["tomattban/a-guide-to-follow"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2Fa-guide-to-follow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2Fa-guide-to-follow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2Fa-guide-to-follow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ToMattBan%2Fa-guide-to-follow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ToMattBan","download_url":"https://codeload.github.com/ToMattBan/a-guide-to-follow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245240848,"owners_count":20583099,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-01T17:59:00.553Z","updated_at":"2026-01-05T10:34:50.855Z","avatar_url":"https://github.com/ToMattBan.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# A GUIDE TO FOLLOW\n\n#### General thoughts\n- This is a guide to be used with Vue\n- Idealized to be used with Nuxt2, but can be used with others versions as well\n\n\u003c/br\u003e\n\n# About names\n### Everything\n- Names must use camelCase\n  - ```buttonColor``` instead of anything else\n- Names must have no more than 3 words\n  - ```crypoSelected``` instead of ```theLastCryptoThatTheUserSelected```\n\n### Props\n- Vue accept kebab-case when passing props, but all props should be camelCase\n  - ```\u003ccomponent userName=\"\" /\u003e``` instead of ```\u003ccomponent user-name=\"\" /\u003e```\n\n### Components\n- Components must start with a capital letter\n  - ```MyComponent``` instead of ```my-component``` or ```myComponent```\n- Components must have at least two words\n  - ```MainHeader``` instead of ```Header```\n- It should start with the context\n  - ```ClearSearchButton``` instead of ```ButtonToClearSearch```\n- If the component is a modal it must end with \"Modal\"\n  - ```MyComponentModal``` instead of ```my-component-modal``` or ```MyComponent```\n \n### Utils\n- The name of the util file must explain what kind of util functions the file have\n  - `errors.js` instead of `utils.js`\n- Don't know how to create a util file/function? [Read this and learn by yourself](https://github.com/ToMattBan/a-guide-to-follow/blob/main/How%20to%20create%20utils.md)\n\u003c/br\u003e\n\n# About components\n### Where to put them?\n- Componentes that are not a page must be in the components folder\n  - The component folder must be divided in what type that component is\n  - For example, modals must be on ```/components/modals```\n \n### What are they about?\n- They should have just one use, no more, no less.\n  - A button will always be a button. A successModal will always be just a successModal\n- Ps.: Don't fear in create a component that just wrapp two or three other components, changing just the props.\n \n### When?\n- When your page have too much code and you want to split it\n- When you are repeating a lot of code\n\n### How to organize them?\n- First `template` then `script` and end with `style`\n- NEVER use logic on the template, instead, use a computed, a function, a watch, a ref, anything but to put the logic on template\n- ALWAYS use `scoped` on your style, and if you need to style an external component, put everything inside a container with an id and use this id in the styles, so the css won't change anything besides this component:\n  ```\u003ctemplate\u003e \u003cdiv id=\"uniqueContainerID\"\u003e{{ content }}\u003c/div\u003e``` \u003c/br\u003e\n  ```\u003cstyle lang=\"scss\"\u003e #uniqueContainerID { everyRuleInsideThisSelector } \u003c/style\u003e```\n\n\u003c/br\u003e\n\n# About how should I write this damn thing?\n### Directives\n- Always use shorthands!\n  - `:src=\"imageSrc\"` instead of `v-bind:src=\"imageSrc\"`\n  - `@click=\"clickHandler\"` instead of `v-on:click=\"clickHandler\"`\n\n### Conditionals\n- Every v-else NEEDS to be \"opened\"\n  - `\u003cdiv v-else=\"\"\u003e` instead of `\u003cdiv v-else\u003e`\n  - Why? This can avoid some rare problems after the app is build and in production.\n- Try always to avoid a deny check\n  - ```\n    if (isCool) {\n      putInTheFridge()\n    } else {\n      makeItCool()\n    };\n    ```\n    instead of\n    ```\n    if (!isCool) {\n      makeItCool()\n    } else {\n      putItInTheFridge()\n    };\n    ```\n    \n### Commom Sense\n- Always put a space between symbols\n  - `this.user = that.user;` instead of `this.user=that.user;`\n  - `if (condition) {};` instead of `if(condition){};`\n- Always put a semicolon at the end of the lines (Avoid some problems with bundlers like webpack or vite)\n  - `this.user = that.user;` instead of `this.user = that.user`\n\n\u003c/br\u003e\n\n# Stores\n### How to create a store and other things?\n- [Read this and learn by yourself](https://github.com/ToMattBan/a-guide-to-follow/blob/main/How%20create%20and%20use%20stores.md)\n\n\u003c/br\u003e\n\n# Props\n### How create props?\n- NEVER just declare props\n- ALWAYS give context, at least, their type\n- `props: { title: String }` \n  or\n  ```\n  props:{ \n    title: { \n      type: String, \n      required: true \n    }\n  }\n  ``` \n  instead of ```props: ['title']```\n\n\u003c/br\u003e\n\n# Store or props?\n### When use store?\n- Your component is independent\n- Your component use the data from the store, but the parent doesn't\n- Pages, as they don't have props\n\n### When use props?\n- Your component have a parent that use the same data\n  - So you will import the store in the parent and pass just the data the child component needs via props\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomattban%2Fa-guide-to-follow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomattban%2Fa-guide-to-follow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomattban%2Fa-guide-to-follow/lists"}