{"id":21246914,"url":"https://github.com/mitevpi/vue-snippets","last_synced_at":"2025-07-13T16:05:44.089Z","repository":{"id":51502679,"uuid":"265824213","full_name":"mitevpi/vue-snippets","owner":"mitevpi","description":"Useful Vue.js snippets and patterns.","archived":false,"fork":false,"pushed_at":"2021-05-11T18:40:20.000Z","size":1684,"stargazers_count":0,"open_issues_count":6,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T04:45:17.985Z","etag":null,"topics":["code-snippets","frontend","patterns","snippets","vue","vuejs","web"],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/mitevpi.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}},"created_at":"2020-05-21T10:51:38.000Z","updated_at":"2021-05-11T10:05:38.000Z","dependencies_parsed_at":"2022-08-22T00:01:15.736Z","dependency_job_id":null,"html_url":"https://github.com/mitevpi/vue-snippets","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"mitevpi/vue-template","purl":"pkg:github/mitevpi/vue-snippets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitevpi","download_url":"https://codeload.github.com/mitevpi/vue-snippets/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitevpi%2Fvue-snippets/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265167476,"owners_count":23721450,"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":["code-snippets","frontend","patterns","snippets","vue","vuejs","web"],"created_at":"2024-11-21T02:09:38.119Z","updated_at":"2025-07-13T16:05:44.064Z","avatar_url":"https://github.com/mitevpi.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://cdn.auth0.com/blog/vuejs/vue-logo.png\" alt=\"Vue.js\" width=\"100\"/\u003e\r\n\r\n# Vue Snippets\r\n\r\nA collection of useful Vue.js snippets and patterns.\r\n\r\n## Usage\r\n\r\nFork, download, or clone this repository and run locally to interact with the examples and read the code in parallel.\r\nThe snippets are best understood through local execution using [Vue Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en).\r\nRunning this application locally while browsing the components using the Vue Devtools extension will allow you to see\r\nhow the code snippets enact the changes in the DOM that are described below. Without Vue Devtools, you won't be able\r\nto see how data is manipulated.\r\n\r\n### Current Snippets\r\n\r\n1. [CSS/SASS By Props](/src/components/CssByProps.vue)\r\n\r\n- This example shows how we can influence the style of the component by passing props which directly edit the CSS/SASS\r\nof the component itself.\r\n- Example: You're creating a button component, and you want other developers on your project to be able to use it. However,\r\nthey are working on different pages in the application, and they need to be able to control the button's text color\r\nand font styling.\r\n\r\n2. [Custom V-Model](/src/components/CustomVModel.vue)\r\n\r\n- How to create a custom component which naturally interfaces with the `v-model` paradigm of Vue.js, and allows us \r\nto pass information up to parent components from a child.\r\n- Example: You're creating a text input component, and want to get data out of it so that the parent component which\r\nis displaying the text input can do a computation using the input text.\r\n\r\n3. [Manipulating Props](/src/components/ManipulatingProps.vue)\r\n- How to manipulate data in a child component which is passed down from the parent component.\r\n- Example: You're creating a component which has to display the most current data in the global store (Vuex), but your\r\ncomponent also has to change that data and (both) re-render the correct data, and save it in the global store.\r\n\r\n## Development\r\n\r\n### Added/Updated Configurations to Vue CLI Starter\r\n\r\n1. [AirBnB Style Guide](https://github.com/airbnb/javascript)\r\n2. [Prettier Style Guide](https://prettier.io/)\r\n3. [Jest (Unit Testing)](https://jestjs.io/)\r\n4. [ESLint (Style Enforcing)](https://eslint.org/)\r\n\r\n### Commands\r\n\r\nThe following commands are used to develop the project:\r\n\r\n1. `npm run build` - Build the package distribution bundle.\r\n2. `npm run serve` - Start a development server with live-reloading on changes. (Used for previewing individual components.)\r\n3. `npm run lint` - Lint code using ESLint and Vue, AirBnB, and Prettier configs.\r\n4. `npm run test:unit` - Run unit tests for the individual components in the package.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitevpi%2Fvue-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitevpi%2Fvue-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitevpi%2Fvue-snippets/lists"}