Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/goodmeasuresllc/vue-generators
Generates Vue components and mix-ins
https://github.com/goodmeasuresllc/vue-generators
rails-gem rails-generators vue-component vue-mixin vuejs2
Last synced: 3 months ago
JSON representation
Generates Vue components and mix-ins
- Host: GitHub
- URL: https://github.com/goodmeasuresllc/vue-generators
- Owner: GoodMeasuresLLC
- License: mit
- Created: 2019-02-01T13:50:40.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-12T05:54:55.000Z (over 1 year ago)
- Last Synced: 2024-10-14T23:20:27.587Z (3 months ago)
- Topics: rails-gem, rails-generators, vue-component, vue-mixin, vuejs2
- Language: Ruby
- Size: 44.9 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Vue::Generators
vue-generators is an opinionated library for generating Vue components, mixins, packs,
and stores for a Rails project.
## Usage
### Help
```bash
rails g vue:component -h
rails g vue:mixin -h
rails g vue:store -h
rails g vue:pack -h
```
### Generate a component
```bash
rails g vue:component ButtonCounter
```
**This will generate:**
*`app/javascript/components/ButtonCounter.vue`*
```JavaScript
export default {
name: 'ButtonCounter',
components: {},
mixins: [],
props: {
/*
property: {
type: String|Number|Boolean|Array|Object|Date|Function|Symbol,
default: null,
required: false
},
*/
},
data() {
return {
// field: 'value'
}
},
computed: {
// computed properties are cached based on their dependencies
/*
computedProperty() {
return 'value'
},
*/
},
methods: {
// Methods run whenever a re-render happens, their results aren't cached.
/*
onClick() {
this.$emit('click-happened')
},
*/
},
mounted() {
// Invoked when the component loads, good place to fetch data from the API
},
}
```
### Generate a mixin
```bash
rails g vue:mixin MyMixin
```
**This will generate:**
*`app/javascript/mixins/MyMixin.js`*
```JavaScript
export default {
props: {
/*
property: {
type: String|Number|Boolean|Array|Object|Date|Function|Symbol,
default: null,
required: false
},
*/
},
data() {
return {
// field: 'value'
}
},
computed: {
// computed properties are cached based on their dependencies
/*
computedProperty() {
return 'value'
},
*/
},
methods: {
// Methods run whenever a re-render happens, their results aren't cached.
/*
onClick() {
this.$emit('click-happened')
},
*/
},
}
```
### Generate a pack
```bash
rails g vue:pack admin
```
**This will generate:**
*`app/javascript/packs/admin.js`
```JavaScript
import VueRouter from 'vue-router'
// Routing
const router = new VueRouter({
})
// Vuex
const store = new Vuex.Store({
})
document.addEventListener("DOMContentLoaded", () => {
Vue.use(VueRouter)
const el = document.getElementById("root")
const app = new Vue({
el: el,
template: "
",
components: {},
router,
store,
mounted() {
},
})
})
```
### Generate a store
```bash
rails g vue:store Application
```
**This will generate:**
*`app/javascript/stores/application/Store.js`*
```JavaScript
import { actions } from "./actions"
import { getters } from "./getters"
import { mutations } from "./mutations"
import { state } from "./state"
export default {
namespaced: true,
actions: actions,
getters: getters,
mutations: mutations,
state: state
}
```
*`app/javascript/stores/application/actions.js`*
```JavaScript
export const actions = {
}
```
*`app/javascript/stores/application/getters.js`*
```JavaScript
export const getters = {
}
```
*`app/javascript/stores/application/mutations.js`*
```JavaScript
export const mutations = {
}
```
*`app/javascript/stores/application/state.js`*
```JavaScript
export const state = {
}
```
## Installation
Add this line to your application's Gemfile:
```ruby
group :development do
gem 'vue-generators'
end
```
And then execute:
```bash
$ bundle
```
Or install it yourself as:
```bash
$ gem install vue-generators
```
## Development
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake` to run the tests.
To install this gem onto your local machine, run `bundle exec rake install`.
To 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).
# Contributing
Bug 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.
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
## Code of Conduct
Everyone 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).