{"id":15295066,"url":"https://github.com/goodmeasuresllc/vue-generators","last_synced_at":"2025-04-13T15:56:39.203Z","repository":{"id":34643623,"uuid":"168704334","full_name":"GoodMeasuresLLC/vue-generators","owner":"GoodMeasuresLLC","description":"Generates Vue components and mix-ins","archived":false,"fork":false,"pushed_at":"2023-04-12T05:54:55.000Z","size":46,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T11:43:11.548Z","etag":null,"topics":["rails-gem","rails-generators","vue-component","vue-mixin","vuejs2"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","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/GoodMeasuresLLC.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-01T13:50:40.000Z","updated_at":"2022-12-14T12:20:29.000Z","dependencies_parsed_at":"2023-02-11T22:31:44.389Z","dependency_job_id":null,"html_url":"https://github.com/GoodMeasuresLLC/vue-generators","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoodMeasuresLLC%2Fvue-generators","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoodMeasuresLLC%2Fvue-generators/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoodMeasuresLLC%2Fvue-generators/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoodMeasuresLLC%2Fvue-generators/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoodMeasuresLLC","download_url":"https://codeload.github.com/GoodMeasuresLLC/vue-generators/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741146,"owners_count":21154251,"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":["rails-gem","rails-generators","vue-component","vue-mixin","vuejs2"],"created_at":"2024-09-30T17:08:28.063Z","updated_at":"2025-04-13T15:56:39.175Z","avatar_url":"https://github.com/GoodMeasuresLLC.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue::Generators\nvue-generators is an opinionated library for generating Vue components, mixins, packs,\nand stores for a Rails project.\n\n## Usage\n\n### Help\n```bash\nrails g vue:component -h\nrails g vue:mixin -h\nrails g vue:store -h\nrails g vue:pack -h\n```\n\n### Generate a component\n\n```bash\nrails g vue:component ButtonCounter\n```\n\n**This will generate:**\n\n*`app/javascript/components/ButtonCounter.vue`*\n```JavaScript\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'ButtonCounter',\n\n  components: {},\n\n  mixins: [],\n\n  props: {\n    /*\n    property: {\n      type: String|Number|Boolean|Array|Object|Date|Function|Symbol,\n      default: null,\n      required: false\n    },\n    */\n  },\n\n  data() {\n    return {\n      // field: 'value'\n    }\n  },\n\n  computed: {\n    // computed properties are cached based on their dependencies\n    /*\n    computedProperty() {\n      return 'value'\n    },\n    */\n  },\n\n  methods: {\n    // Methods run whenever a re-render happens, their results aren't cached.\n    /*\n    onClick() {\n      this.$emit('click-happened')\n    },\n    */\n  },\n\n  mounted() {\n    // Invoked when the component loads, good place to fetch data from the API\n  },\n}\n\u003c/script\u003e\n\n\u003cstyle lang=\"stylus\" scoped\u003e\n\u003c/style\u003e\n```\n\n### Generate a mixin\n\n```bash\nrails g vue:mixin MyMixin\n```\n**This will generate:**\n\n*`app/javascript/mixins/MyMixin.js`*\n\n```JavaScript\nexport default {\n  props: {\n    /*\n    property: {\n      type: String|Number|Boolean|Array|Object|Date|Function|Symbol,\n      default: null,\n      required: false\n    },\n    */\n  },\n\n  data() {\n    return {\n      // field: 'value'\n    }\n  },\n\n  computed: {\n    // computed properties are cached based on their dependencies\n    /*\n    computedProperty() {\n      return 'value'\n    },\n    */\n  },\n\n  methods: {\n    // Methods run whenever a re-render happens, their results aren't cached.\n    /*\n    onClick() {\n      this.$emit('click-happened')\n    },\n    */\n  },\n}\n```\n\n### Generate a pack\n```bash\nrails g vue:pack admin\n```\n\n**This will generate:**\n*`app/javascript/packs/admin.js`\n```JavaScript\nimport VueRouter from 'vue-router'\n\n// Routing\nconst router = new VueRouter({\n})\n\n// Vuex\nconst store = new Vuex.Store({\n\n})\n\ndocument.addEventListener(\"DOMContentLoaded\", () =\u003e {\n  Vue.use(VueRouter)\n\n  const el = document.getElementById(\"root\")\n\n  const app = new Vue({\n    el: el,\n    template: \"\u003cdiv\u003e\u003crouter-view /\u003e\u003c/div\u003e\",\n    components: {},\n    router,\n    store,\n    mounted() {\n    },\n  })\n})\n\n```\n### Generate a store\n\n```bash\nrails g vue:store Application\n```\n\n**This will generate:**\n\n*`app/javascript/stores/application/Store.js`*\n```JavaScript\nimport { actions }    from \"./actions\"\nimport { getters }    from \"./getters\"\nimport { mutations }  from \"./mutations\"\nimport { state }      from \"./state\"\n\nexport default {\n  namespaced: true,\n\n  actions:    actions,\n  getters:    getters,\n  mutations:  mutations,\n  state:      state\n}\n```\n\n*`app/javascript/stores/application/actions.js`*\n```JavaScript\nexport const actions = {\n\n}\n```\n\n*`app/javascript/stores/application/getters.js`*\n```JavaScript\nexport const getters = {\n\n}\n```\n\n*`app/javascript/stores/application/mutations.js`*\n```JavaScript\nexport const mutations = {\n}\n\n```\n\n*`app/javascript/stores/application/state.js`*\n```JavaScript\nexport const state = {\n\n}\n```\n\n\n## Installation\nAdd this line to your application's Gemfile:\n\n```ruby\ngroup :development do\n  gem 'vue-generators'\nend\n```\n\nAnd then execute:\n```bash\n$ bundle\n```\n\nOr install it yourself as:\n```bash\n$ gem install vue-generators\n```\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies. Then, run `rake` to run the tests.\n\nTo install this gem onto your local machine, run `bundle exec rake install`.\n\nTo release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).\n\n# Contributing\n\nBug reports and pull requests are welcome on GitHub at https://github.com/GoodMeasuresLLC/vue-generators. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.\n\n## License\n\nThe gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).\n\n## Code of Conduct\n\nEveryone interacting in the vue-generators project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/GoodMeasuresLLC/vue-generators/blob/master/CODE_OF_CONDUCT.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoodmeasuresllc%2Fvue-generators","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoodmeasuresllc%2Fvue-generators","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoodmeasuresllc%2Fvue-generators/lists"}