Vue Component Builder

Generate Vue component CRUD from Rails model mapping

Preview

Default theme

Element-plus theme

Compatibility

vue 3.x to element-plus theme

Install

In development section of your Gemfile put:

gem 'vue_component_builder'

And run

$ bundle install

Features

• Generate validate inputs from model validates roles;
• Generate Vue methods hook with create, show, update, list and destroy javascript methods with Axios api calls template;
• Recognize model attributes types (string, integer, datetime, date, decimal) and generate form fields according to them;
• Mapping labels of form component from the i18n model;
• Generate table list of in the same screen;
• Exclude attributes models option;
• Select theme element-plus. (is default)

Usage

model=Fruit
component=MyFruitComponent
theme=default [default or element-plus]
exclude=id,created_at,updated_at [optional]

Note: Your model and controller must be created (e.g Fuit model and FruitsController)

rails g vue_component_builder:new model=Fruit  component=MyFruitComponent theme=default exclude=id,created_at,updated_at

The new component will be generated inside in your Rails public folder

public/MyFruitComponent.vue

Then you can copy this component to your Vue application folder.

TODO / coming soon

• Implement gem test;
• More theme options like Vuesax, BootstrapVue, Buefy or PrimeVue;
• Output directory option of generated component.
• Add search option in table;
• Add filter in table.
• Use vuex state management pattern instead of using the date method (the current way is't not good practice)