{"id":16773238,"url":"https://github.com/aeksco/vuejs-simple-frontend-example","last_synced_at":"2025-04-05T08:14:03.160Z","repository":{"id":37785969,"uuid":"195606383","full_name":"aeksco/vuejs-simple-frontend-example","owner":"aeksco","description":":wave: A simple Vue.js CRUD frontend backed by localstorage. Great for learning and prototyping - hack it!","archived":false,"fork":false,"pushed_at":"2022-12-10T21:36:17.000Z","size":3065,"stargazers_count":2,"open_issues_count":22,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-10T15:50:36.188Z","etag":null,"topics":["buefy","bulma","codotype","codotype-generator","font-awesome","vue","vue-router","vuex"],"latest_commit_sha":null,"homepage":"https://vuejs-simple-frontend-example.netlify.com/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aeksco.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}},"created_at":"2019-07-07T03:39:04.000Z","updated_at":"2023-03-04T18:19:24.000Z","dependencies_parsed_at":"2023-01-26T11:31:58.061Z","dependency_job_id":null,"html_url":"https://github.com/aeksco/vuejs-simple-frontend-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fvuejs-simple-frontend-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fvuejs-simple-frontend-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fvuejs-simple-frontend-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aeksco%2Fvuejs-simple-frontend-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aeksco","download_url":"https://codeload.github.com/aeksco/vuejs-simple-frontend-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305947,"owners_count":20917208,"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":["buefy","bulma","codotype","codotype-generator","font-awesome","vue","vue-router","vuex"],"created_at":"2024-10-13T06:45:10.188Z","updated_at":"2025-04-05T08:14:03.142Z","avatar_url":"https://github.com/aeksco.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tasks\n\n### A simple Vue.js CRUD frontend backed by localstorage. Great for learning and prototyping - hack it!\n\nBuilt with [Vue.js](https://vuejs.org/), [Vue Router](https://router.vuejs.org/), [Vuex](https://vuex.vuejs.org/), [Bulma](https://buefy.org/), \u0026 [Buefy](https://buefy.org/). Generated with [Codotype](https://codotype.io).\n\n\n## Vuex + Persisted State\n\nAll local data is managed in [Vuex](https://vuex.vuejs.org) and persisted in `localstorage` using the [vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate) package. Please note that clearning your browser cache will erase any data you enter in the tool. See the `Import / Export Data` section for more details. The `vuex-persistedstate` library stores all the local data as a string in `window.localstorage.vuex`.\n\nAll the CRUD operations in the app are encapsulated in a single function that returns a [Vuex module](https://vuex.vuejs.org/guide/modules.html). We invoke this function once for each collection we want to manage - you can view that code in `store/lib/collectionModule.js`.\n\n\n## Import / Export Data\nYou can import and export `.json` files containing data created in the app. You can also flush all the data as well. These features are available on the `/settings` page.\n\nThe app expects the data for be formatted like so:\n\n```javascript\n{\n  movies: [\n    { id: '1', title: 'The Godfather', director_id: '10' }\n    { id: '2', title: 'Back to the Future', director_id: '11' }\n  ],\n  directors: [\n    { id: '10', name: 'Francis Ford Coppla' }\n    { id: '11', name: 'Robert Zemeckis' }\n  ],\n\n}\n```\n\n\n## Directory Structure\nThe following is a good indication of how the code is organized in the `/src` directory:\n\n```\n├── App.vue                         // Top-level Vue component\n├── components                      // Top-level page components\n│   └── Navbar.vue\n├── main.js                         // JavaScript entry-point for the app\n├── modules                         // The \"modules\" directory encapsulates many sub-apps, one for each schema\n│   ├── main                        // The \"main\" module contains the \"Home\" and \"Settings\" pages\n│   │   ├── pages\n│   │   │   ├── home\n│   │   │   │   └── index.vue\n│   │   │   └── settings\n│   │   │       └── index.vue\n│   │   └── router.js\n│   └── schema\n│       ├── components              // The schema-module's components used on the CRUD pages\n│       │   ├── Detail.vue\n│       │   ├── Form.vue\n│       │   ├── ListItem.vue\n│       │   └── List.vue\n│       ├── pages                   // The schema-module's CRUD pages\n│       │   ├── edit.vue\n│       │   ├── list.vue\n│       │   ├── new.vue\n│       │   └── show.vue\n│       ├── router.js               // The schema-module's routes\n│       └── store.js                // The schema-module's Vuex module\n│\n├── router.js                       // Initializes Vue Router and imports all module routes\n└── store\n    ├── index.js                    // Initializes the Vuex store and imports all module stores\n    └── lib\n        └── collectionModule.js     // Vuex CRUD module\n```\n\nNote that your generated code may contain more or fewer files\n\n\n## Build Setup\n\n*Project setup*\n```\nyarn install\n```\n\n*Compiles and hot-reloads for development*\n```\nyarn run serve\n```\n\n*Compiles and minifies for production*\n```\nyarn run build\n```\n\n*Run your tests*\n```\nyarn run test\n```\n\n*Lints and fixes files*\n```\nyarn run lint\n```\n\n*Customize configuration*\nSee [Configuration Reference](https://cli.vuejs.org/config/).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeksco%2Fvuejs-simple-frontend-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faeksco%2Fvuejs-simple-frontend-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faeksco%2Fvuejs-simple-frontend-example/lists"}