{"id":16424081,"url":"https://github.com/funkatron/vueandbootstrap","last_synced_at":"2025-09-07T01:40:26.680Z","repository":{"id":66389189,"uuid":"97839510","full_name":"funkatron/VueAndBootstrap","owner":"funkatron","description":"Examples of VueJS and Bootstrap working together","archived":false,"fork":false,"pushed_at":"2017-07-21T17:32:08.000Z","size":21,"stargazers_count":15,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-01T21:43:56.411Z","etag":null,"topics":["bootstrap","bootstrap3","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/funkatron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2017-07-20T13:37:06.000Z","updated_at":"2024-01-21T13:57:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"f500237a-45cb-434c-82b2-dadaf4a79901","html_url":"https://github.com/funkatron/VueAndBootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/funkatron/VueAndBootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funkatron%2FVueAndBootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funkatron%2FVueAndBootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funkatron%2FVueAndBootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funkatron%2FVueAndBootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/funkatron","download_url":"https://codeload.github.com/funkatron/VueAndBootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/funkatron%2FVueAndBootstrap/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273986609,"owners_count":25202704,"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","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap","bootstrap3","vuejs","vuejs2"],"created_at":"2024-10-11T07:43:03.677Z","updated_at":"2025-09-07T01:40:26.672Z","avatar_url":"https://github.com/funkatron.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VueAndBootstrap\n\nExamples of VueJS and Bootstrap working together\n\n----\n\nThis is a set of **self-contained** examples of using VueJS and Bootstrap together. They are intended to\ndemonstrate basic concepts of VueJS within an attractive, commonly-used UI framework.\n\nNo additional build tools are required. All JS is loaded from CDNs. The focus here is on learning VueJS and\nhow it can be applied to existing projects without adopting a new toolchain or throwing out old, working code.\n\n## [Example 1](./Example%201) - Bootstrap panel rendered with Vue\n\nA basic \"hello world\"-type example, showing how to instantiate Vue and render of data inside the DOM.\n\n## [Example 2](./Example%202) - Rendering a list view with `v-for`\n\nRendering an array of data into a list view using the [`v-for` directive](https://vuejs.org/v2/guide/list.html). \n\n## [Example 3](./Example%203) - Rendering a *sorted* list view with `computed`\n\nUsing a [`computed` property](https://vuejs.org/v2/guide/computed.html) to render alphabetically-sorted data without modifying the original array. \n\n## [Example 4](./Example%204) - Add and delete items in list view dynamically\n\nAdding functionality via [`methods`](https://vuejs.org/v2/guide/events.html#Method-Event-Handlers) to add and remove items from an array, and demonstrating the automatic\nre-rendering of Vue.\n\n## [Example 5](./Example%205) - Conditional rendering\n\nUtilize the [`v-if` directive](https://vuejs.org/v2/guide/conditional.html) to conditionally render based on the state of the data.\n\n## [Example 6](./Example%206) - Simple custom component\n\nA simple example of a [custom component](https://vuejs.org/v2/guide/components.html), allowing for complex custom functionality to be wrapped in\nHTML-style tags.\n\n## [Example 7](./Example%207) - Complex custom component, slots\n\nUse a [custom component](https://vuejs.org/v2/guide/components.html) to encapsulate the complex functionality of the editable list group in simple HTML tags.\nDemonstrates more complex use of the [`\u003cslot\u003e` tag](https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots) for \"content distribution\"\na la [Web Components](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md)\n\n## [Example 8](./Example%208) - Loading and saving data using watchers\n\nBuilding on example 7, we add a [watcher](https://vuejs.org/v2/guide/computed.html#Watchers) to save our list of items every time it changes. We leverage the [Store library](https://github.com/nbubna/store)\nto load data from and save to localStorage in the browser. \n\n\n\n----\n\nEd Finkler    \n\u003ccoj@funkatron.com\u003e        \n[@funkatron](https://twitter.com/funkatron)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunkatron%2Fvueandbootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffunkatron%2Fvueandbootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffunkatron%2Fvueandbootstrap/lists"}