├── .babelrc ├── .gitignore ├── .postcssrc.yml ├── .ruby-gemset ├── Gemfile ├── Gemfile.lock ├── README.md ├── Rakefile ├── app ├── assets │ ├── config │ │ └── manifest.js │ ├── images │ │ ├── .keep │ │ └── vue.svg │ ├── javascripts │ │ └── application.js │ └── stylesheets │ │ ├── _errors.scss │ │ ├── _section.scss │ │ ├── _vue.scss │ │ └── application.scss ├── controllers │ ├── api │ │ └── customers_controller.rb │ ├── application_controller.rb │ ├── concerns │ │ └── .keep │ ├── customers_controller.rb │ ├── example_controller.rb │ └── home_controller.rb ├── helpers │ └── application_helper.rb ├── javascript │ ├── packs │ │ ├── application.js │ │ ├── customers.js │ │ ├── spa.js │ │ └── static.js │ └── spa │ │ ├── edit_form.js │ │ ├── index.js │ │ └── new_form.js ├── jobs │ └── application_job.rb ├── mailers │ └── application_mailer.rb ├── models │ ├── application_record.rb │ ├── concerns │ │ └── .keep │ ├── customer.rb │ └── phone.rb └── views │ ├── api │ └── customers │ │ ├── _fields.html.erb │ │ ├── edit.html.erb │ │ ├── index.html.erb │ │ └── new.html.erb │ ├── application │ ├── _footer.html.erb │ └── _header.html.erb │ ├── customers │ ├── _fields.html.erb │ ├── edit.html.erb │ ├── index.html.erb │ └── new.html.erb │ ├── example │ ├── spa.html.erb │ └── static.html.erb │ ├── home │ └── index.html.erb │ └── layouts │ ├── application.html.erb │ ├── application_base.html.erb │ ├── mailer.html.erb │ └── mailer.text.erb ├── bin ├── bundle ├── rails ├── rake ├── setup ├── update ├── webpack ├── webpack-dev-server └── yarn ├── config.ru ├── config ├── application.rb ├── boot.rb ├── database.yml ├── environment.rb ├── environments │ ├── development.rb │ ├── production.rb │ └── test.rb ├── initializers │ ├── application_controller_renderer.rb │ ├── assets.rb │ ├── backtrace_silencers.rb │ ├── cookies_serializer.rb │ ├── filter_parameter_logging.rb │ ├── inflections.rb │ ├── mime_types.rb │ └── wrap_parameters.rb ├── locales │ └── en.yml ├── puma.rb ├── routes.rb ├── secrets.yml ├── spring.rb ├── webpack │ ├── configuration.js │ ├── development.js │ ├── environment.js │ ├── loaders │ │ ├── assets.js │ │ ├── babel.js │ │ ├── coffee.js │ │ ├── erb.js │ │ ├── sass.js │ │ └── vue.js │ ├── production.js │ ├── shared.js │ └── test.js └── webpacker.yml ├── db ├── migrate │ ├── 20170511073027_create_customers.rb │ ├── 20171111044841_create_phones.rb │ └── 20180214234417_alter_customers1.rb ├── schema.rb └── seeds.rb ├── lib ├── assets │ └── .keep └── tasks │ └── .keep ├── log └── .keep ├── package-lock.json ├── package.json ├── public ├── 404.html ├── 422.html ├── 500.html ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── favicon.ico └── robots.txt ├── vendor └── .keep └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": "> 1%", 7 | "uglify": true 8 | }, 9 | "useBuiltIns": true 10 | }] 11 | ], 12 | 13 | "plugins": [ 14 | "syntax-dynamic-import", 15 | ["transform-class-properties", { "spec": true }] 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files for more about ignoring files. 2 | # 3 | # If you find yourself ignoring temporary files generated by your text editor 4 | # or operating system, you probably want to add a global ignore instead: 5 | # git config --global core.excludesfile '~/.gitignore_global' 6 | 7 | # Ignore bundler config. 8 | /.bundle 9 | 10 | # Ignore the default SQLite database. 11 | /db/*.sqlite3 12 | /db/*.sqlite3-journal 13 | 14 | # Ignore all logfiles and tempfiles. 15 | /log/* 16 | /tmp/* 17 | !/log/.keep 18 | !/tmp/.keep 19 | 20 | /node_modules 21 | /yarn-error.log 22 | 23 | .byebug_history 24 | /public/packs 25 | /node_modules 26 | -------------------------------------------------------------------------------- /.postcssrc.yml: -------------------------------------------------------------------------------- 1 | plugins: 2 | postcss-smart-import: {} 3 | precss: {} 4 | autoprefixer: {} 5 | -------------------------------------------------------------------------------- /.ruby-gemset: -------------------------------------------------------------------------------- 1 | vue-rails-form-builder-demo 2 | 3 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | git_source(:github) do |repo_name| 4 | repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") 5 | "https://github.com/#{repo_name}.git" 6 | end 7 | 8 | gem 'rails', '~> 5.2.1' 9 | gem 'sqlite3' 10 | gem 'puma', '~> 3.7' 11 | gem 'sass-rails', '~> 5.0' 12 | gem 'spectre_scss', '~> 0.4.5' 13 | 14 | gem 'webpacker' 15 | gem 'vue-rails-form-builder', '~> 0.8.2' 16 | 17 | group :development do 18 | gem 'web-console', '>= 3.3.0' 19 | gem 'listen', '>= 3.0.5', '< 3.2' 20 | gem 'spring' 21 | gem 'spring-watcher-listen', '~> 2.0.0' 22 | end 23 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | actioncable (5.2.1) 5 | actionpack (= 5.2.1) 6 | nio4r (~> 2.0) 7 | websocket-driver (>= 0.6.1) 8 | actionmailer (5.2.1) 9 | actionpack (= 5.2.1) 10 | actionview (= 5.2.1) 11 | activejob (= 5.2.1) 12 | mail (~> 2.5, >= 2.5.4) 13 | rails-dom-testing (~> 2.0) 14 | actionpack (5.2.1) 15 | actionview (= 5.2.1) 16 | activesupport (= 5.2.1) 17 | rack (~> 2.0) 18 | rack-test (>= 0.6.3) 19 | rails-dom-testing (~> 2.0) 20 | rails-html-sanitizer (~> 1.0, >= 1.0.2) 21 | actionview (5.2.1) 22 | activesupport (= 5.2.1) 23 | builder (~> 3.1) 24 | erubi (~> 1.4) 25 | rails-dom-testing (~> 2.0) 26 | rails-html-sanitizer (~> 1.0, >= 1.0.3) 27 | activejob (5.2.1) 28 | activesupport (= 5.2.1) 29 | globalid (>= 0.3.6) 30 | activemodel (5.2.1) 31 | activesupport (= 5.2.1) 32 | activerecord (5.2.1) 33 | activemodel (= 5.2.1) 34 | activesupport (= 5.2.1) 35 | arel (>= 9.0) 36 | activestorage (5.2.1) 37 | actionpack (= 5.2.1) 38 | activerecord (= 5.2.1) 39 | marcel (~> 0.3.1) 40 | activesupport (5.2.1) 41 | concurrent-ruby (~> 1.0, >= 1.0.2) 42 | i18n (>= 0.7, < 2) 43 | minitest (~> 5.1) 44 | tzinfo (~> 1.1) 45 | arel (9.0.0) 46 | bindex (0.5.0) 47 | builder (3.2.3) 48 | concurrent-ruby (1.0.5) 49 | crass (1.0.4) 50 | erubi (1.7.1) 51 | ffi (1.9.25) 52 | globalid (0.4.1) 53 | activesupport (>= 4.2.0) 54 | i18n (1.1.0) 55 | concurrent-ruby (~> 1.0) 56 | listen (3.1.5) 57 | rb-fsevent (~> 0.9, >= 0.9.4) 58 | rb-inotify (~> 0.9, >= 0.9.7) 59 | ruby_dep (~> 1.2) 60 | loofah (2.2.2) 61 | crass (~> 1.0.2) 62 | nokogiri (>= 1.5.9) 63 | mail (2.7.0) 64 | mini_mime (>= 0.1.1) 65 | marcel (0.3.3) 66 | mimemagic (~> 0.3.2) 67 | method_source (0.9.0) 68 | mimemagic (0.3.2) 69 | mini_mime (1.0.1) 70 | mini_portile2 (2.3.0) 71 | minitest (5.11.3) 72 | nio4r (2.3.1) 73 | nokogiri (1.8.4) 74 | mini_portile2 (~> 2.3.0) 75 | puma (3.12.0) 76 | rack (2.0.5) 77 | rack-proxy (0.6.5) 78 | rack 79 | rack-test (1.1.0) 80 | rack (>= 1.0, < 3) 81 | rails (5.2.1) 82 | actioncable (= 5.2.1) 83 | actionmailer (= 5.2.1) 84 | actionpack (= 5.2.1) 85 | actionview (= 5.2.1) 86 | activejob (= 5.2.1) 87 | activemodel (= 5.2.1) 88 | activerecord (= 5.2.1) 89 | activestorage (= 5.2.1) 90 | activesupport (= 5.2.1) 91 | bundler (>= 1.3.0) 92 | railties (= 5.2.1) 93 | sprockets-rails (>= 2.0.0) 94 | rails-dom-testing (2.0.3) 95 | activesupport (>= 4.2.0) 96 | nokogiri (>= 1.6) 97 | rails-html-sanitizer (1.0.4) 98 | loofah (~> 2.2, >= 2.2.2) 99 | railties (5.2.1) 100 | actionpack (= 5.2.1) 101 | activesupport (= 5.2.1) 102 | method_source 103 | rake (>= 0.8.7) 104 | thor (>= 0.19.0, < 2.0) 105 | rake (12.3.1) 106 | rb-fsevent (0.10.3) 107 | rb-inotify (0.9.10) 108 | ffi (>= 0.5.0, < 2) 109 | ruby_dep (1.5.0) 110 | sass (3.6.0) 111 | sass-listen (~> 4.0.0) 112 | sass-listen (4.0.0) 113 | rb-fsevent (~> 0.9, >= 0.9.4) 114 | rb-inotify (~> 0.9, >= 0.9.7) 115 | sass-rails (5.0.7) 116 | railties (>= 4.0.0, < 6) 117 | sass (~> 3.1) 118 | sprockets (>= 2.8, < 4.0) 119 | sprockets-rails (>= 2.0, < 4.0) 120 | tilt (>= 1.1, < 3) 121 | spectre_scss (0.4.7.0) 122 | spring (2.0.2) 123 | activesupport (>= 4.2) 124 | spring-watcher-listen (2.0.1) 125 | listen (>= 2.7, < 4.0) 126 | spring (>= 1.2, < 3.0) 127 | sprockets (3.7.2) 128 | concurrent-ruby (~> 1.0) 129 | rack (> 1, < 3) 130 | sprockets-rails (3.2.1) 131 | actionpack (>= 4.0) 132 | activesupport (>= 4.0) 133 | sprockets (>= 3.0.0) 134 | sqlite3 (1.3.13) 135 | thor (0.20.0) 136 | thread_safe (0.3.6) 137 | tilt (2.0.8) 138 | tzinfo (1.2.5) 139 | thread_safe (~> 0.1) 140 | vue-rails-form-builder (0.8.2) 141 | actionview (>= 4.2, < 6) 142 | railties (>= 4.2, < 6) 143 | web-console (3.7.0) 144 | actionview (>= 5.0) 145 | activemodel (>= 5.0) 146 | bindex (>= 0.4.0) 147 | railties (>= 5.0) 148 | webpacker (3.5.5) 149 | activesupport (>= 4.2) 150 | rack-proxy (>= 0.6.1) 151 | railties (>= 4.2) 152 | websocket-driver (0.7.0) 153 | websocket-extensions (>= 0.1.0) 154 | websocket-extensions (0.1.3) 155 | 156 | PLATFORMS 157 | ruby 158 | 159 | DEPENDENCIES 160 | listen (>= 3.0.5, < 3.2) 161 | puma (~> 3.7) 162 | rails (~> 5.2.1) 163 | sass-rails (~> 5.0) 164 | spectre_scss (~> 0.4.5) 165 | spring 166 | spring-watcher-listen (~> 2.0.0) 167 | sqlite3 168 | vue-rails-form-builder (~> 0.8.2) 169 | web-console (>= 3.3.0) 170 | webpacker 171 | 172 | BUNDLED WITH 173 | 1.16.1 174 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-rails-form-builder-demo 2 | 3 | This is a Rails demo application using these libraries: 4 | 5 | * [vue-rails-form-builder](https://github.com/kuroda/vue-rails-form-builder) - 6 | A custom Rails form builder for Vue.js 7 | * [vue-data-scooper](https://github.com/kuroda/vue-data-scooper) - 8 | A Vue.js plugin to initialize the Vue instance data from form elements 9 | * [vue-remote-template](https://github.com/kuroda/vue-remote-template) - 10 | A Vue.js mixin to fetch template via Ajax 11 | 12 | This application illustrates how we can combine the _traditional_ form builder 13 | with Vue.js components. 14 | 15 | Look at carefully these files: 16 | 17 | * `Gemfile` 18 | * `package.json` 19 | * `app/views/customers/edit.html.erb` 20 | * `app/views/customers/new.html.erb` 21 | * `app/views/customers/_fields.html.erb` 22 | * `app/javascript/packs/customers/fields.js` 23 | 24 | Especially, note that we use `vue_form_for` helper in stead of `form_for`: 25 | 26 | ```erb 27 | <%= vue_form_for @customer, html: { id: "customer-form" } do |f| %> 28 | <%= render "fields", f: f %> 29 |
30 | <%= f.submit "Update" %> 31 |
32 | <% end %> 33 | ``` 34 | 35 | Also observe how we _use_ the `vue-data-scooper` plugin: 36 | 37 | ```javascript 38 | import Vue from 'vue/dist/vue.esm' 39 | import VueDataScooper from "vue-data-scooper" 40 | 41 | Vue.use(VueDataScooper) 42 | 43 | document.addEventListener("DOMContentLoaded", () => { 44 | new Vue({ 45 | el: "#customer-form" 46 | }) 47 | }) 48 | ``` 49 | 50 | ## Installation 51 | 52 | ```bash 53 | git clone https://github.com/kuroda/vue-rails-form-builder-demo.git 54 | cd vue-rails-form-builder-demo 55 | bundle 56 | yarn 57 | bin/rake db:setup 58 | ``` 59 | 60 | ## Running in development mode 61 | 62 | In one terminal: 63 | 64 | ```bash 65 | bin/webpack-dev-server 66 | ``` 67 | 68 | In another terminal: 69 | 70 | ```bash 71 | rails s 72 | ``` 73 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require_relative 'config/application' 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_tree ../images 2 | //= link_directory ../javascripts .js 3 | //= link_directory ../stylesheets .css 4 | -------------------------------------------------------------------------------- /app/assets/images/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/app/assets/images/.keep -------------------------------------------------------------------------------- /app/assets/images/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/assets/javascripts/application.js: -------------------------------------------------------------------------------- 1 | // This is a manifest file that'll be compiled into application.js, which will include all the files 2 | // listed below. 3 | // 4 | // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5 | // vendor/assets/javascripts directory can be referenced here using a relative path. 6 | // 7 | // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8 | // compiled file. JavaScript code in this file should be added after the last require_* statement. 9 | // 10 | // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11 | // about supported directives. 12 | // 13 | //= require rails-ujs 14 | //= require_tree . 15 | -------------------------------------------------------------------------------- /app/assets/stylesheets/_errors.scss: -------------------------------------------------------------------------------- 1 | .field_with_errors { 2 | display: inline; 3 | @extend .has-error; 4 | } 5 | 6 | .field_with_errors ~ .form-icon { 7 | border: 1px solid $error-color; 8 | } 9 | -------------------------------------------------------------------------------- /app/assets/stylesheets/_section.scss: -------------------------------------------------------------------------------- 1 | .section-header { 2 | padding: 1rem .5rem; 3 | } 4 | 5 | .section-hero { 6 | padding: 4.5rem .5rem; 7 | } 8 | 9 | .section-features { 10 | padding: 4.5rem .5rem 3.5rem .5rem; 11 | } 12 | 13 | .section-footer { 14 | color: #acb3c2; 15 | padding: 3.5rem .5rem; 16 | } 17 | -------------------------------------------------------------------------------- /app/assets/stylesheets/_vue.scss: -------------------------------------------------------------------------------- 1 | [v-cloak] { 2 | display: none !important; 3 | } 4 | -------------------------------------------------------------------------------- /app/assets/stylesheets/application.scss: -------------------------------------------------------------------------------- 1 | // vuejs brand color 2 | $primary-color: #4fc08d; 3 | 4 | // spectre lib 5 | @import "spectre"; 6 | @import "spectre/spectre-icons"; 7 | 8 | // extends 9 | @import "errors"; 10 | @import "vue"; 11 | @import "section"; 12 | -------------------------------------------------------------------------------- /app/controllers/api/customers_controller.rb: -------------------------------------------------------------------------------- 1 | class Api::CustomersController < ApplicationController 2 | layout false 3 | 4 | def index 5 | @customers = Customer.order(:id) 6 | .select([ :id, :name, :plan, :gender, :confirmed, :approved]) 7 | template = render_to_string(template: "api/customers/index", layout: false) 8 | data = { customers: @customers } 9 | render json: { template: template, data: data } 10 | end 11 | 12 | def new 13 | @customer = Customer.new 14 | populate_phones 15 | end 16 | 17 | def edit 18 | @customer = Customer.find(params[:id]) 19 | populate_phones 20 | end 21 | 22 | def create 23 | @customer = Customer.new(customer_params) 24 | if @customer.save 25 | render json: { 26 | templatePath: api_customers_path 27 | } 28 | else 29 | populate_phones 30 | render action: "new" 31 | end 32 | end 33 | 34 | def update 35 | @customer = Customer.find(params[:id]) 36 | @customer.assign_attributes(customer_params) 37 | if @customer.save 38 | render json: { 39 | templatePath: api_customers_path 40 | } 41 | else 42 | populate_phones 43 | render action: "edit" 44 | end 45 | end 46 | 47 | def destroy 48 | customer = Customer.find(params[:id]) 49 | customer.destroy 50 | 51 | @customers = Customer.order(:id) 52 | .select([ :id, :name, :plan, :gender, :confirmed, :approved]) 53 | data = { customers: @customers } 54 | render json: { data: data } 55 | end 56 | 57 | private def populate_phones 58 | (3 - @customer.phones.size).times do 59 | @customer.phones.build 60 | end 61 | end 62 | 63 | private def customer_params 64 | params.require(:customer).permit( 65 | :name, 66 | :plan, 67 | :gender, 68 | :confirmed, 69 | :approved, 70 | :remarks, 71 | :phones_attributes => [ :id, :number, :primary, :_destroy ] 72 | ) 73 | end 74 | end 75 | -------------------------------------------------------------------------------- /app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | protect_from_forgery with: :exception 3 | end 4 | -------------------------------------------------------------------------------- /app/controllers/concerns/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/app/controllers/concerns/.keep -------------------------------------------------------------------------------- /app/controllers/customers_controller.rb: -------------------------------------------------------------------------------- 1 | class CustomersController < ApplicationController 2 | def index 3 | @customers = Customer.order(:id) 4 | end 5 | 6 | def new 7 | @customer = Customer.new 8 | populate_phones 9 | end 10 | 11 | def edit 12 | @customer = Customer.find(params[:id]) 13 | populate_phones 14 | end 15 | 16 | def create 17 | @customer = Customer.new(customer_params) 18 | if @customer.save 19 | redirect_to :customers 20 | else 21 | populate_phones 22 | render action: "new" 23 | end 24 | end 25 | 26 | def update 27 | @customer = Customer.find(params[:id]) 28 | @customer.assign_attributes(customer_params) 29 | if @customer.save 30 | redirect_to :customers 31 | else 32 | populate_phones 33 | render action: "edit" 34 | end 35 | end 36 | 37 | private def populate_phones 38 | (3 - @customer.phones.size).times do 39 | @customer.phones.build 40 | end 41 | end 42 | 43 | private def customer_params 44 | params.require(:customer).permit( 45 | :name, 46 | :plan, 47 | :gender, 48 | :confirmed, 49 | :approved, 50 | :remarks, 51 | :phones_attributes => [ :id, :number, :primary, :_destroy ] 52 | ) 53 | end 54 | end 55 | -------------------------------------------------------------------------------- /app/controllers/example_controller.rb: -------------------------------------------------------------------------------- 1 | class ExampleController < ApplicationController 2 | def index 3 | end 4 | 5 | def spa 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /app/controllers/home_controller.rb: -------------------------------------------------------------------------------- 1 | class HomeController < ApplicationController 2 | layout "application_base" 3 | 4 | def index 5 | end 6 | end 7 | -------------------------------------------------------------------------------- /app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/javascript/packs/application.js: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | // This file is automatically compiled by Webpack, along with any other files 3 | // present in this directory. You're encouraged to place your actual application logic in 4 | // a relevant structure within app/javascript and only use these pack files to reference 5 | // that code so it'll be compiled. 6 | // 7 | // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate 8 | // layout file, like app/views/layouts/application.html.erb 9 | 10 | console.log('Hello World from Webpacker') 11 | -------------------------------------------------------------------------------- /app/javascript/packs/customers.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue/dist/vue.esm' 2 | import VueDataScooper from 'vue-data-scooper' 3 | 4 | Vue.config.productionTip = false 5 | Vue.use(VueDataScooper) 6 | 7 | document.addEventListener("DOMContentLoaded", () => { 8 | new Vue({ 9 | el: "#customer-form", 10 | data: { 11 | open: true 12 | }, 13 | computed: { 14 | customerNameLength: function() { return this.customer.name.length }, 15 | customerRemarksLength: function() { return this.customer.remarks.length }, 16 | } 17 | }) 18 | }); 19 | -------------------------------------------------------------------------------- /app/javascript/packs/spa.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue/dist/vue.esm" 2 | import VueRemoteTemplate from "vue-remote-template" 3 | import { index } from "../spa/index" 4 | import { newForm } from "../spa/new_form" 5 | import { editForm } from "../spa/edit_form" 6 | 7 | Vue.config.productionTip = false 8 | 9 | document.addEventListener("DOMContentLoaded", () => { 10 | new Vue({ 11 | mixins: [ VueRemoteTemplate ], 12 | el: "#app", 13 | data: { 14 | templatePath: "/api/customers", 15 | extensions: { 16 | index: index, 17 | newForm: newForm, 18 | editForm: editForm 19 | } 20 | } 21 | }) 22 | }) 23 | -------------------------------------------------------------------------------- /app/javascript/packs/static.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue/dist/vue.esm' 2 | import VueDataScooper from "vue-data-scooper" 3 | 4 | Vue.config.productionTip = false 5 | Vue.use(VueDataScooper) 6 | 7 | document.addEventListener("DOMContentLoaded", () => { 8 | new Vue({ 9 | el: "#customer-form", 10 | data: { 11 | open: true 12 | } 13 | }) 14 | }); 15 | -------------------------------------------------------------------------------- /app/javascript/spa/edit_form.js: -------------------------------------------------------------------------------- 1 | export const editForm = { 2 | data: function() { 3 | return { 4 | open: false 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /app/javascript/spa/index.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios" 2 | Axios.defaults.headers["X-CSRF-TOKEN"] = 3 | document.querySelector("meta[name='csrf-token']").getAttribute("content") 4 | 5 | export const index = { 6 | methods: { 7 | destroy: function(customer) { 8 | const self = this 9 | Axios.delete(`/api/customers/${customer.id}`) 10 | .then(function(response) { 11 | self.customers = response.data.data.customers 12 | }) 13 | .catch(function(error) { 14 | console.log(error) 15 | }) 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /app/javascript/spa/new_form.js: -------------------------------------------------------------------------------- 1 | export const newForm = { 2 | data: function() { 3 | return { 4 | open: false 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /app/jobs/application_job.rb: -------------------------------------------------------------------------------- 1 | class ApplicationJob < ActiveJob::Base 2 | end 3 | -------------------------------------------------------------------------------- /app/mailers/application_mailer.rb: -------------------------------------------------------------------------------- 1 | class ApplicationMailer < ActionMailer::Base 2 | default from: 'from@example.com' 3 | layout 'mailer' 4 | end 5 | -------------------------------------------------------------------------------- /app/models/application_record.rb: -------------------------------------------------------------------------------- 1 | class ApplicationRecord < ActiveRecord::Base 2 | self.abstract_class = true 3 | end 4 | -------------------------------------------------------------------------------- /app/models/concerns/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/app/models/concerns/.keep -------------------------------------------------------------------------------- /app/models/customer.rb: -------------------------------------------------------------------------------- 1 | class Customer < ApplicationRecord 2 | has_many :phones 3 | accepts_nested_attributes_for :phones, allow_destroy: true, limit: 3, 4 | reject_if: -> (phone) { phone[:id].blank? && phone[:number].blank? } 5 | 6 | validates :name, presence: true, length: { maximum: 40 } 7 | validates :remarks, presence: true 8 | end 9 | -------------------------------------------------------------------------------- /app/models/phone.rb: -------------------------------------------------------------------------------- 1 | class Phone < ApplicationRecord 2 | belongs_to :customer 3 | 4 | validates :number, format: { with: /\A\d+(-\d+)*\z/ } 5 | end 6 | -------------------------------------------------------------------------------- /app/views/api/customers/_fields.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= f.label :name, "Name", class: "form-label" %> 3 | <%= f.text_field :name, class: "form-input" %> 4 |
5 | 6 |
7 | <%= f.label :plan, "Plan", class: "form-label" %> 8 | 12 | 16 |
17 | 18 |
19 | <%= f.label :gender, "Gender", class: "form-label" %> 20 | <%= f.select :gender, [ [ "Male", "male" ], [ "Female", "female" ] ], { include_blank: true }, class: "form-select" %> 21 |
22 | 23 |
24 | <%= f.label :phones, "Phones", class: "form-label" %> 25 |
    26 | <%= f.fields_for :phones do |pf| %> 27 |
  1. 28 | <%= pf.text_field :number, class: "form-input d-inline", 29 | style: "width: 50%; margin-right: 40px", 30 | disabled: pf.vue_prefix + "._destroy" %> 31 | 36 | <% if pf.object.persisted? %> 37 | 41 | <% end %> 42 |
    2. 43 | <% end %> 44 |
45 |
46 | 47 |
48 | 52 |
53 | 54 |
55 | 59 |
60 | 61 |
62 | <%= f.label :remarks, "Remarks", class: "form-label" %> 63 | <%= f.text_area :remarks, class: "form-input" %> 64 |
65 | 66 |
67 | <%= f.label :avatar, "Avatar", class: "form-label" %> 68 | <%= f.file_field :avatar, class: "form-input", disabled: "customer.plan === 'Alpha'" %> 69 |
70 | 71 |
72 |
73 | 74 | 75 |
76 | 
customer.name = "{{customer.name}}"
77 | customer.plan = "{{customer.plan}}"
78 | customer.gender = {{customer.gender}}
79 | customer.phones_attributes = {{customer.phones_attributes}}
80 | customer.confirmed = {{customer.confirmed}}
81 | customer.approved = {{customer.approved}}
82 | customer.remarks = "{{customer.remarks}}"
83 | open = "{{open}}"
84 |
85 | -------------------------------------------------------------------------------- /app/views/api/customers/edit.html.erb: -------------------------------------------------------------------------------- 1 |
3 | 4 | 15 | 16 | <%= vue_form_with model: [ :api, @customer ], id: "customer-form", 17 | html: { "@submit.prevent" => "submit" } do |f| %> 18 | <%= render "fields", f: f %> 19 | 20 |
21 | <%= f.submit "Update", class: "btn btn-primary" %> 22 |
23 | <% end %> 24 |
25 | -------------------------------------------------------------------------------- /app/views/api/customers/index.html.erb: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 5 | 6 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 34 | 35 | 36 |
7 | <%= link_to :new_api_customer, class: "btn btn-primary", "@click.prevent" => "visit" do %> 8 | New customer 9 | <% end %> 10 |
NamePlanGenderConfirmedApproved
{{ customer.name }}{{ customer.plan }}{{ customer.gender }}{{ customer.confirmed }}{{ customer.approved }} 31 | Edit 32 | Delete 33 |
37 |
38 | -------------------------------------------------------------------------------- /app/views/api/customers/new.html.erb: -------------------------------------------------------------------------------- 1 |
2 | 3 | 14 | 15 | <%= vue_form_with model: [ :api, @customer ], id: "customer-form", 16 | html: { "@submit.prevent" => "submit" } do |f| %> 17 | <%= render "fields", f: f %> 18 | 19 |
20 | <%= f.submit "Create", class: "btn btn-primary" %> 21 |
22 | <% end %> 23 |
24 | -------------------------------------------------------------------------------- /app/views/application/_footer.html.erb: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 | Readme | 5 | vue-rails-form-builder | 6 | vue-data-scooper | 7 | vue-remote-template 8 |

9 | 10 |

11 | Built with ♥ by Tsutomu Kuroda. Licensed under the MIT License. 12 |

13 |
14 |
15 | -------------------------------------------------------------------------------- /app/views/application/_header.html.erb: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | <%= link_to "Vue Rails Form Builder Demo", :root %> 6 |
7 |
8 | <%= link_to :root do %> 9 | <%= image_tag "vue.svg", size: "32x32" %> 10 | <% end %> 11 |
12 |
13 | GitHub 14 |
15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /app/views/customers/_fields.html.erb: -------------------------------------------------------------------------------- 1 |
2 | <%= f.label :name, class: "form-label" do %> 3 | Name {{ customerNameLength }} 4 | <% end %> 5 | <%= f.text_field :name, class: "form-input" %> 6 |
7 | 8 |
9 | <%= f.label :plan, "Plan", class: "form-label" %> 10 | 14 | 18 |
19 | 20 |
21 | <%= f.label :gender, "Gender", class: "form-label" %> 22 | <%= f.select :gender, [ [ "Male", "male" ], [ "Female", "female" ] ], { include_blank: true }, class: "form-select" %> 23 |
24 | 25 |
26 | <%= f.label :phones, "Phones", class: "form-label" %> 27 |
    28 | <%= f.fields_for :phones do |pf| %> 29 |
  1. 30 | <%= pf.text_field :number, class: "form-input d-inline", 31 | style: "width: 50%; margin-right: 40px", 32 | disabled: pf.vue_prefix + "._destroy" %> 33 | 38 | <% if pf.object.persisted? %> 39 | 43 | <% end %> 44 |
    2. 45 | <% end %> 46 |
47 |
48 | 49 |
50 | 54 |
55 | 56 |
57 | 61 |
62 | 63 |
64 | <%= f.label :remarks, class: "form-label" do %> 65 | Remarks {{ customerRemarksLength }} 66 | <% end %> 67 | <%= f.text_area :remarks, class: "form-input" %> 68 |
69 | 70 |
71 | <%= f.label :avatar, class: "form-label" %> 72 | <%= f.file_field :avatar, class: "form-input", disabled: "customer.plan === 'Alpha'" %> 73 |
74 | 75 |
76 | 
customer.name = "{{customer.name}}"
77 | customerNameLength = {{customerNameLength}}
78 | customer.plan = "{{customer.plan}}"
79 | customer.gender = {{customer.gender}}
80 | customer.phones_attributes = {{customer.phones_attributes}}
81 | customer.confirmed = {{customer.confirmed}}
82 | customer.approved = {{customer.approved}}
83 | customer.remarks = "{{customer.remarks}}"
84 | customerRemarksLength = {{customerRemarksLength}}
85 |
86 | -------------------------------------------------------------------------------- /app/views/customers/edit.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for :breadcrumb do %> 2 | 13 | <% end %> 14 | 15 | <%= vue_form_for @customer, html: { id: "customer-form" } do |f| %> 16 | <%= render "fields", f: f %> 17 | 18 |
19 | <%= f.submit "Update", class: "btn btn-primary" %> 20 |
21 | <% end %> 22 | 23 | <%= javascript_pack_tag "customers" %> 24 | -------------------------------------------------------------------------------- /app/views/customers/index.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for :breadcrumb do %> 2 | 10 | <% end %> 11 | 12 | 13 | 14 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | <% @customers.each do |customer| %> 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | <% end %> 43 | 44 |
16 | <%= link_to :new_customer, class: "btn btn-primary" do %> 17 | New customer 18 | <% end %> 19 |
NamePlanGenderConfirmedApproved
<%= customer.name %><%= customer.plan %><%= customer.gender %><%= customer.confirmed? %><%= customer.approved? %><%= link_to "Edit", [ :edit, customer ] %>
45 | -------------------------------------------------------------------------------- /app/views/customers/new.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for :breadcrumb do %> 2 | 13 | <% end %> 14 | 15 | <%= vue_form_with model: @customer, id: "customer-form" do |f| %> 16 | <%= render "fields", f: f %> 17 | 18 |
19 | <%= f.submit "Create", class: "btn btn-primary" %> 20 |
21 | <% end %> 22 | 23 | <%= javascript_pack_tag "customers" %> 24 | -------------------------------------------------------------------------------- /app/views/example/spa.html.erb: -------------------------------------------------------------------------------- 1 |
2 | 3 | <%= javascript_pack_tag "spa" %> 4 | -------------------------------------------------------------------------------- /app/views/example/static.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for :breadcrumb do %> 2 | 13 | <% end %> 14 | 15 |
16 |
17 |
18 |
19 | 20 | 21 |
22 | 23 |
24 | 25 | 29 | 33 |
34 | 35 |
36 | 41 |
42 | 43 |
44 | 49 |
50 | 51 |
52 | 53 | 57 | 61 | 65 |
66 | 67 |
68 | 69 | 74 |
75 | 76 |
77 | 78 | 82 |
83 | 84 |
85 | 86 | 91 |
92 | 93 |
94 | 95 | 96 |
97 | 98 |
99 | 100 | 101 |
102 | 103 |
104 |
105 | 106 | 107 |
108 |

Debug

109 |
110 |
111 | 112 | 113 |
114 |
115 | 
customer.name = "{{customer.name}}"
116 | customer.plan = "{{customer.plan}}"
117 | customer.confirmed = {{customer.confirmed}}
118 | customer.approved = {{customer.approved}}
119 | customer.colors = {{customer.colors}}
120 | customer.remember = {{customer.remember}}
121 | customer.gender = {{customer.gender}}
122 | customer.tags = {{customer.tags}}
123 | customer.remarks = "{{customer.remarks}}"
124 |
125 |
126 |
127 |
128 | 129 | <%= javascript_pack_tag "static" %> 130 | -------------------------------------------------------------------------------- /app/views/home/index.html.erb: -------------------------------------------------------------------------------- 1 |
2 |

vue-rails-form-builder-demo

3 |

Demo Application and Reference Implementation.

4 |
5 | 6 |
7 |
8 |
9 |
10 |
11 |
12 |
Static Form
13 |
14 |
15 | Static form markup, with vuejs debug output 16 |
17 |
18 | <%= link_to "Static Form", :static, class: "btn btn-primary" %> 19 |
20 |
21 |
22 |
23 |
24 |
25 |
Database Scaffold Form
26 |
27 |
28 | Rails CRUD scaffold for a customer model 29 |
30 |
31 | <%= link_to "Database Scaffold Form", :customers, class: "btn btn-primary" %> 32 |
33 |
34 |
35 |
36 |
37 |
38 |
Single Page App
39 |
40 |
41 | Basic SPA, with rails build in webpacker setup 42 |
43 |
44 | <%= link_to "Single Page App", :spa, class: "btn btn-primary" %> 45 |
46 |
47 |
48 |
49 |
50 |
51 | -------------------------------------------------------------------------------- /app/views/layouts/application.html.erb: -------------------------------------------------------------------------------- 1 | <% content_for :body do %> 2 |
3 | <%= content_for?(:breadcrumb) ? yield(:breadcrumb) : render("breadcrumb") rescue nil %> 4 | 5 | <%= yield %> 6 |
7 | <% end %> 8 | 9 | <%= render template: "layouts/application_base" %> 10 | -------------------------------------------------------------------------------- /app/views/layouts/application_base.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | VueRailsFormBuilderDemo 5 | <%= csrf_meta_tags %> 6 | <%= stylesheet_link_tag "application", media: "all" %> 7 | 8 | 9 | 10 | <%= render "header" %> 11 | 12 | <%= content_for?(:body) ? yield(:body) : yield %> 13 | 14 | <%= render "footer" %> 15 | 16 | 17 | -------------------------------------------------------------------------------- /app/views/layouts/mailer.html.erb: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | 11 | <%= yield %> 12 | 13 | 14 | -------------------------------------------------------------------------------- /app/views/layouts/mailer.text.erb: -------------------------------------------------------------------------------- 1 | <%= yield %> 2 | -------------------------------------------------------------------------------- /bin/bundle: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) 3 | load Gem.bin_path('bundler', 'bundle') 4 | -------------------------------------------------------------------------------- /bin/rails: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | APP_PATH = File.expand_path('../config/application', __dir__) 3 | require_relative '../config/boot' 4 | require 'rails/commands' 5 | -------------------------------------------------------------------------------- /bin/rake: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require_relative '../config/boot' 3 | require 'rake' 4 | Rake.application.run 5 | -------------------------------------------------------------------------------- /bin/setup: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require 'pathname' 3 | require 'fileutils' 4 | include FileUtils 5 | 6 | # path to your application root. 7 | APP_ROOT = Pathname.new File.expand_path('../../', __FILE__) 8 | 9 | def system!(*args) 10 | system(*args) || abort("\n== Command #{args} failed ==") 11 | end 12 | 13 | chdir APP_ROOT do 14 | # This script is a starting point to setup your application. 15 | # Add necessary setup steps to this file. 16 | 17 | puts '== Installing dependencies ==' 18 | system! 'gem install bundler --conservative' 19 | system('bundle check') || system!('bundle install') 20 | 21 | # Install JavaScript dependencies if using Yarn 22 | # system('bin/yarn') 23 | 24 | 25 | # puts "\n== Copying sample files ==" 26 | # unless File.exist?('config/database.yml') 27 | # cp 'config/database.yml.sample', 'config/database.yml' 28 | # end 29 | 30 | puts "\n== Preparing database ==" 31 | system! 'bin/rails db:setup' 32 | 33 | puts "\n== Removing old logs and tempfiles ==" 34 | system! 'bin/rails log:clear tmp:clear' 35 | 36 | puts "\n== Restarting application server ==" 37 | system! 'bin/rails restart' 38 | end 39 | -------------------------------------------------------------------------------- /bin/update: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | require 'pathname' 3 | require 'fileutils' 4 | include FileUtils 5 | 6 | # path to your application root. 7 | APP_ROOT = Pathname.new File.expand_path('../../', __FILE__) 8 | 9 | def system!(*args) 10 | system(*args) || abort("\n== Command #{args} failed ==") 11 | end 12 | 13 | chdir APP_ROOT do 14 | # This script is a way to update your development environment automatically. 15 | # Add necessary update steps to this file. 16 | 17 | puts '== Installing dependencies ==' 18 | system! 'gem install bundler --conservative' 19 | system('bundle check') || system!('bundle install') 20 | 21 | puts "\n== Updating database ==" 22 | system! 'bin/rails db:migrate' 23 | 24 | puts "\n== Removing old logs and tempfiles ==" 25 | system! 'bin/rails log:clear tmp:clear' 26 | 27 | puts "\n== Restarting application server ==" 28 | system! 'bin/rails restart' 29 | end 30 | -------------------------------------------------------------------------------- /bin/webpack: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | $stdout.sync = true 3 | 4 | require "shellwords" 5 | 6 | ENV["RAILS_ENV"] ||= "development" 7 | RAILS_ENV = ENV["RAILS_ENV"] 8 | 9 | ENV["NODE_ENV"] ||= RAILS_ENV 10 | NODE_ENV = ENV["NODE_ENV"] 11 | 12 | APP_PATH = File.expand_path("../", __dir__) 13 | NODE_MODULES_PATH = File.join(APP_PATH, "node_modules") 14 | WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js") 15 | 16 | unless File.exist?(WEBPACK_CONFIG) 17 | puts "Webpack configuration not found." 18 | puts "Please run bundle exec rails webpacker:install to install webpacker" 19 | exit! 20 | end 21 | 22 | env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } 23 | cmd = [ "#{NODE_MODULES_PATH}/.bin/webpack", "--config", WEBPACK_CONFIG ] + ARGV 24 | 25 | Dir.chdir(APP_PATH) do 26 | exec env, *cmd 27 | end 28 | -------------------------------------------------------------------------------- /bin/webpack-dev-server: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | $stdout.sync = true 3 | 4 | require "shellwords" 5 | require "yaml" 6 | require "socket" 7 | 8 | ENV["RAILS_ENV"] ||= "development" 9 | RAILS_ENV = ENV["RAILS_ENV"] 10 | 11 | ENV["NODE_ENV"] ||= RAILS_ENV 12 | NODE_ENV = ENV["NODE_ENV"] 13 | 14 | APP_PATH = File.expand_path("../", __dir__) 15 | CONFIG_FILE = File.join(APP_PATH, "config/webpacker.yml") 16 | NODE_MODULES_PATH = File.join(APP_PATH, "node_modules") 17 | WEBPACK_CONFIG = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js") 18 | 19 | LISTEN_HOST_ADDR = NODE_ENV == 'development' ? 'localhost' : '0.0.0.0' 20 | 21 | def args(key) 22 | index = ARGV.index(key) 23 | index ? ARGV[index + 1] : nil 24 | end 25 | 26 | begin 27 | dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"] 28 | 29 | HOSTNAME = args('--host') || dev_server["host"] 30 | PORT = args('--port') || dev_server["port"] 31 | HTTPS = ARGV.include?('--https') || dev_server["https"] 32 | DEV_SERVER_ADDR = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}" 33 | 34 | rescue Errno::ENOENT, NoMethodError 35 | $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}." 36 | $stdout.puts "Please run bundle exec rails webpacker:install to install webpacker" 37 | exit! 38 | end 39 | 40 | begin 41 | server = TCPServer.new(LISTEN_HOST_ADDR, PORT) 42 | server.close 43 | 44 | rescue Errno::EADDRINUSE 45 | $stdout.puts "Another program is running on port #{PORT}. Set a new port in #{CONFIG_FILE} for dev_server" 46 | exit! 47 | end 48 | 49 | # Delete supplied host and port CLI arguments 50 | ["--host", "--port"].each do |arg| 51 | ARGV.delete(args(arg)) 52 | ARGV.delete(arg) 53 | end 54 | 55 | env = { "NODE_PATH" => NODE_MODULES_PATH.shellescape } 56 | 57 | cmd = [ 58 | "#{NODE_MODULES_PATH}/.bin/webpack-dev-server", "--progress", "--color", 59 | "--config", WEBPACK_CONFIG, 60 | "--host", LISTEN_HOST_ADDR, 61 | "--public", "#{HOSTNAME}:#{PORT}", 62 | "--port", PORT.to_s 63 | ] + ARGV 64 | 65 | Dir.chdir(APP_PATH) do 66 | exec env, *cmd 67 | end 68 | -------------------------------------------------------------------------------- /bin/yarn: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env ruby 2 | VENDOR_PATH = File.expand_path('..', __dir__) 3 | Dir.chdir(VENDOR_PATH) do 4 | begin 5 | exec "yarnpkg #{ARGV.join(" ")}" 6 | rescue Errno::ENOENT 7 | $stderr.puts "Yarn executable was not detected in the system." 8 | $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install" 9 | exit 1 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /config.ru: -------------------------------------------------------------------------------- 1 | # This file is used by Rack-based servers to start the application. 2 | 3 | require_relative 'config/environment' 4 | 5 | run Rails.application 6 | -------------------------------------------------------------------------------- /config/application.rb: -------------------------------------------------------------------------------- 1 | require_relative 'boot' 2 | 3 | require "rails" 4 | # Pick the frameworks you want: 5 | require "active_model/railtie" 6 | require "active_job/railtie" 7 | require "active_record/railtie" 8 | require "action_controller/railtie" 9 | require "action_mailer/railtie" 10 | require "action_view/railtie" 11 | # require "action_cable/engine" 12 | require "sprockets/railtie" 13 | # require "rails/test_unit/railtie" 14 | 15 | # Require the gems listed in Gemfile, including any gems 16 | # you've limited to :test, :development, or :production. 17 | Bundler.require(*Rails.groups) 18 | 19 | module VueFormForExample 20 | class Application < Rails::Application 21 | # Initialize configuration defaults for originally generated Rails version. 22 | config.load_defaults 5.1 23 | 24 | # Settings in config/environments/* take precedence over those specified here. 25 | # Application configuration should go into files in config/initializers 26 | # -- all .rb files in that directory are automatically loaded. 27 | 28 | # Don't generate system test files. 29 | config.generators.system_tests = nil 30 | end 31 | end 32 | -------------------------------------------------------------------------------- /config/boot.rb: -------------------------------------------------------------------------------- 1 | ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__) 2 | 3 | require 'bundler/setup' # Set up gems listed in the Gemfile. 4 | -------------------------------------------------------------------------------- /config/database.yml: -------------------------------------------------------------------------------- 1 | # SQLite version 3.x 2 | # gem install sqlite3 3 | # 4 | # Ensure the SQLite 3 gem is defined in your Gemfile 5 | # gem 'sqlite3' 6 | # 7 | default: &default 8 | adapter: sqlite3 9 | pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> 10 | timeout: 5000 11 | 12 | development: 13 | <<: *default 14 | database: db/development.sqlite3 15 | 16 | # Warning: The database defined as "test" will be erased and 17 | # re-generated from your development database when you run "rake". 18 | # Do not set this db to the same as development or production. 19 | test: 20 | <<: *default 21 | database: db/test.sqlite3 22 | 23 | production: 24 | <<: *default 25 | database: db/production.sqlite3 26 | -------------------------------------------------------------------------------- /config/environment.rb: -------------------------------------------------------------------------------- 1 | # Load the Rails application. 2 | require_relative 'application' 3 | 4 | # Initialize the Rails application. 5 | Rails.application.initialize! 6 | -------------------------------------------------------------------------------- /config/environments/development.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # In the development environment your application's code is reloaded on 5 | # every request. This slows down response time but is perfect for development 6 | # since you don't have to restart the web server when you make code changes. 7 | config.cache_classes = false 8 | 9 | # Do not eager load code on boot. 10 | config.eager_load = false 11 | 12 | # Show full error reports. 13 | config.consider_all_requests_local = true 14 | 15 | # Enable/disable caching. By default caching is disabled. 16 | if Rails.root.join('tmp/caching-dev.txt').exist? 17 | config.action_controller.perform_caching = true 18 | 19 | config.cache_store = :memory_store 20 | config.public_file_server.headers = { 21 | 'Cache-Control' => "public, max-age=#{2.days.seconds.to_i}" 22 | } 23 | else 24 | config.action_controller.perform_caching = false 25 | 26 | config.cache_store = :null_store 27 | end 28 | 29 | # Don't care if the mailer can't send. 30 | config.action_mailer.raise_delivery_errors = false 31 | 32 | config.action_mailer.perform_caching = false 33 | 34 | # Print deprecation notices to the Rails logger. 35 | config.active_support.deprecation = :log 36 | 37 | # Raise an error on page load if there are pending migrations. 38 | config.active_record.migration_error = :page_load 39 | 40 | # Debug mode disables concatenation and preprocessing of assets. 41 | # This option may cause significant delays in view rendering with a large 42 | # number of complex assets. 43 | config.assets.debug = true 44 | 45 | # Suppress logger output for asset requests. 46 | config.assets.quiet = true 47 | 48 | # Raises error for missing translations 49 | # config.action_view.raise_on_missing_translations = true 50 | 51 | # Use an evented file watcher to asynchronously detect changes in source code, 52 | # routes, locales, etc. This feature depends on the listen gem. 53 | config.file_watcher = ActiveSupport::EventedFileUpdateChecker 54 | end 55 | -------------------------------------------------------------------------------- /config/environments/production.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # Code is not reloaded between requests. 5 | config.cache_classes = true 6 | 7 | # Eager load code on boot. This eager loads most of Rails and 8 | # your application in memory, allowing both threaded web servers 9 | # and those relying on copy on write to perform better. 10 | # Rake tasks automatically ignore this option for performance. 11 | config.eager_load = true 12 | 13 | # Full error reports are disabled and caching is turned on. 14 | config.consider_all_requests_local = false 15 | config.action_controller.perform_caching = true 16 | 17 | # Attempt to read encrypted secrets from `config/secrets.yml.enc`. 18 | # Requires an encryption key in `ENV["RAILS_MASTER_KEY"]` or 19 | # `config/secrets.yml.key`. 20 | config.read_encrypted_secrets = true 21 | 22 | # Disable serving static files from the `/public` folder by default since 23 | # Apache or NGINX already handles this. 24 | config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? 25 | 26 | # Compress JavaScripts and CSS. 27 | config.assets.js_compressor = :uglifier 28 | # config.assets.css_compressor = :sass 29 | 30 | # Do not fallback to assets pipeline if a precompiled asset is missed. 31 | config.assets.compile = false 32 | 33 | # `config.assets.precompile` and `config.assets.version` have moved to config/initializers/assets.rb 34 | 35 | # Enable serving of images, stylesheets, and JavaScripts from an asset server. 36 | # config.action_controller.asset_host = 'http://assets.example.com' 37 | 38 | # Specifies the header that your server uses for sending files. 39 | # config.action_dispatch.x_sendfile_header = 'X-Sendfile' # for Apache 40 | # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for NGINX 41 | 42 | 43 | # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. 44 | # config.force_ssl = true 45 | 46 | # Use the lowest log level to ensure availability of diagnostic information 47 | # when problems arise. 48 | config.log_level = :debug 49 | 50 | # Prepend all log lines with the following tags. 51 | config.log_tags = [ :request_id ] 52 | 53 | # Use a different cache store in production. 54 | # config.cache_store = :mem_cache_store 55 | 56 | # Use a real queuing backend for Active Job (and separate queues per environment) 57 | # config.active_job.queue_adapter = :resque 58 | # config.active_job.queue_name_prefix = "vue_form_for_example_#{Rails.env}" 59 | config.action_mailer.perform_caching = false 60 | 61 | # Ignore bad email addresses and do not raise email delivery errors. 62 | # Set this to true and configure the email server for immediate delivery to raise delivery errors. 63 | # config.action_mailer.raise_delivery_errors = false 64 | 65 | # Enable locale fallbacks for I18n (makes lookups for any locale fall back to 66 | # the I18n.default_locale when a translation cannot be found). 67 | config.i18n.fallbacks = true 68 | 69 | # Send deprecation notices to registered listeners. 70 | config.active_support.deprecation = :notify 71 | 72 | # Use default logging formatter so that PID and timestamp are not suppressed. 73 | config.log_formatter = ::Logger::Formatter.new 74 | 75 | # Use a different logger for distributed setups. 76 | # require 'syslog/logger' 77 | # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new 'app-name') 78 | 79 | if ENV["RAILS_LOG_TO_STDOUT"].present? 80 | logger = ActiveSupport::Logger.new(STDOUT) 81 | logger.formatter = config.log_formatter 82 | config.logger = ActiveSupport::TaggedLogging.new(logger) 83 | end 84 | 85 | # Do not dump schema after migrations. 86 | config.active_record.dump_schema_after_migration = false 87 | end 88 | -------------------------------------------------------------------------------- /config/environments/test.rb: -------------------------------------------------------------------------------- 1 | Rails.application.configure do 2 | # Settings specified here will take precedence over those in config/application.rb. 3 | 4 | # The test environment is used exclusively to run your application's 5 | # test suite. You never need to work with it otherwise. Remember that 6 | # your test database is "scratch space" for the test suite and is wiped 7 | # and recreated between test runs. Don't rely on the data there! 8 | config.cache_classes = true 9 | 10 | # Do not eager load code on boot. This avoids loading your whole application 11 | # just for the purpose of running a single test. If you are using a tool that 12 | # preloads Rails for running tests, you may have to set it to true. 13 | config.eager_load = false 14 | 15 | # Configure public file server for tests with Cache-Control for performance. 16 | config.public_file_server.enabled = true 17 | config.public_file_server.headers = { 18 | 'Cache-Control' => "public, max-age=#{1.hour.seconds.to_i}" 19 | } 20 | 21 | # Show full error reports and disable caching. 22 | config.consider_all_requests_local = true 23 | config.action_controller.perform_caching = false 24 | 25 | # Raise exceptions instead of rendering exception templates. 26 | config.action_dispatch.show_exceptions = false 27 | 28 | # Disable request forgery protection in test environment. 29 | config.action_controller.allow_forgery_protection = false 30 | config.action_mailer.perform_caching = false 31 | 32 | # Tell Action Mailer not to deliver emails to the real world. 33 | # The :test delivery method accumulates sent emails in the 34 | # ActionMailer::Base.deliveries array. 35 | config.action_mailer.delivery_method = :test 36 | 37 | # Print deprecation notices to the stderr. 38 | config.active_support.deprecation = :stderr 39 | 40 | # Raises error for missing translations 41 | # config.action_view.raise_on_missing_translations = true 42 | end 43 | -------------------------------------------------------------------------------- /config/initializers/application_controller_renderer.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # ActiveSupport::Reloader.to_prepare do 4 | # ApplicationController.renderer.defaults.merge!( 5 | # http_host: 'example.org', 6 | # https: false 7 | # ) 8 | # end 9 | -------------------------------------------------------------------------------- /config/initializers/assets.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Version of your assets, change this if you want to expire all your assets. 4 | Rails.application.config.assets.version = '1.0' 5 | 6 | # Add additional assets to the asset load path. 7 | # Rails.application.config.assets.paths << Emoji.images_path 8 | # Add Yarn node_modules folder to the asset load path. 9 | Rails.application.config.assets.paths << Rails.root.join('node_modules') 10 | 11 | # Precompile additional assets. 12 | # application.js, application.css, and all non-JS/CSS in the app/assets 13 | # folder are already added. 14 | # Rails.application.config.assets.precompile += %w( admin.js admin.css ) 15 | -------------------------------------------------------------------------------- /config/initializers/backtrace_silencers.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # You can add backtrace silencers for libraries that you're using but don't wish to see in your backtraces. 4 | # Rails.backtrace_cleaner.add_silencer { |line| line =~ /my_noisy_library/ } 5 | 6 | # You can also remove all the silencers if you're trying to debug a problem that might stem from framework code. 7 | # Rails.backtrace_cleaner.remove_silencers! 8 | -------------------------------------------------------------------------------- /config/initializers/cookies_serializer.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Specify a serializer for the signed and encrypted cookie jars. 4 | # Valid options are :json, :marshal, and :hybrid. 5 | Rails.application.config.action_dispatch.cookies_serializer = :json 6 | -------------------------------------------------------------------------------- /config/initializers/filter_parameter_logging.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Configure sensitive parameters which will be filtered from the log file. 4 | Rails.application.config.filter_parameters += [:password] 5 | -------------------------------------------------------------------------------- /config/initializers/inflections.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new inflection rules using the following format. Inflections 4 | # are locale specific, and you may define rules for as many different 5 | # locales as you wish. All of these examples are active by default: 6 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 7 | # inflect.plural /^(ox)$/i, '\1en' 8 | # inflect.singular /^(ox)en/i, '\1' 9 | # inflect.irregular 'person', 'people' 10 | # inflect.uncountable %w( fish sheep ) 11 | # end 12 | 13 | # These inflection rules are supported but not enabled by default: 14 | # ActiveSupport::Inflector.inflections(:en) do |inflect| 15 | # inflect.acronym 'RESTful' 16 | # end 17 | -------------------------------------------------------------------------------- /config/initializers/mime_types.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Add new mime types for use in respond_to blocks: 4 | # Mime::Type.register "text/richtext", :rtf 5 | -------------------------------------------------------------------------------- /config/initializers/wrap_parameters.rb: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # This file contains settings for ActionController::ParamsWrapper which 4 | # is enabled by default. 5 | 6 | # Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array. 7 | ActiveSupport.on_load(:action_controller) do 8 | wrap_parameters format: [:json] 9 | end 10 | 11 | # To enable root element in JSON for ActiveRecord objects. 12 | # ActiveSupport.on_load(:active_record) do 13 | # self.include_root_in_json = true 14 | # end 15 | -------------------------------------------------------------------------------- /config/locales/en.yml: -------------------------------------------------------------------------------- 1 | # Files in the config/locales directory are used for internationalization 2 | # and are automatically loaded by Rails. If you want to use locales other 3 | # than English, add the necessary files in this directory. 4 | # 5 | # To use the locales, use `I18n.t`: 6 | # 7 | # I18n.t 'hello' 8 | # 9 | # In views, this is aliased to just `t`: 10 | # 11 | # <%= t('hello') %> 12 | # 13 | # To use a different locale, set it with `I18n.locale`: 14 | # 15 | # I18n.locale = :es 16 | # 17 | # This would use the information in config/locales/es.yml. 18 | # 19 | # The following keys must be escaped otherwise they will not be retrieved by 20 | # the default I18n backend: 21 | # 22 | # true, false, on, off, yes, no 23 | # 24 | # Instead, surround them with single quotes. 25 | # 26 | # en: 27 | # 'true': 'foo' 28 | # 29 | # To learn more, please read the Rails Internationalization guide 30 | # available at http://guides.rubyonrails.org/i18n.html. 31 | 32 | en: 33 | hello: "Hello world" 34 | -------------------------------------------------------------------------------- /config/puma.rb: -------------------------------------------------------------------------------- 1 | # Puma can serve each request in a thread from an internal thread pool. 2 | # The `threads` method setting takes two numbers: a minimum and maximum. 3 | # Any libraries that use thread pools should be configured to match 4 | # the maximum value specified for Puma. Default is set to 5 threads for minimum 5 | # and maximum; this matches the default thread size of Active Record. 6 | # 7 | threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 } 8 | threads threads_count, threads_count 9 | 10 | # Specifies the `port` that Puma will listen on to receive requests; default is 3000. 11 | # 12 | port ENV.fetch("PORT") { 3000 } 13 | 14 | # Specifies the `environment` that Puma will run in. 15 | # 16 | environment ENV.fetch("RAILS_ENV") { "development" } 17 | 18 | # Specifies the number of `workers` to boot in clustered mode. 19 | # Workers are forked webserver processes. If using threads and workers together 20 | # the concurrency of the application would be max `threads` * `workers`. 21 | # Workers do not work on JRuby or Windows (both of which do not support 22 | # processes). 23 | # 24 | # workers ENV.fetch("WEB_CONCURRENCY") { 2 } 25 | 26 | # Use the `preload_app!` method when specifying a `workers` number. 27 | # This directive tells Puma to first boot the application and load code 28 | # before forking the application. This takes advantage of Copy On Write 29 | # process behavior so workers use less memory. If you use this option 30 | # you need to make sure to reconnect any threads in the `on_worker_boot` 31 | # block. 32 | # 33 | # preload_app! 34 | 35 | # If you are preloading your application and using Active Record, it's 36 | # recommended that you close any connections to the database before workers 37 | # are forked to prevent connection leakage. 38 | # 39 | # before_fork do 40 | # ActiveRecord::Base.connection_pool.disconnect! if defined?(ActiveRecord) 41 | # end 42 | 43 | # The code in the `on_worker_boot` will be called if you are using 44 | # clustered mode by specifying a number of `workers`. After each worker 45 | # process is booted, this block will be run. If you are using the `preload_app!` 46 | # option, you will want to use this block to reconnect to any threads 47 | # or connections that may have been created at application boot, as Ruby 48 | # cannot share connections between processes. 49 | # 50 | # on_worker_boot do 51 | # ActiveRecord::Base.establish_connection if defined?(ActiveRecord) 52 | # end 53 | # 54 | 55 | # Allow puma to be restarted by `rails restart` command. 56 | plugin :tmp_restart 57 | -------------------------------------------------------------------------------- /config/routes.rb: -------------------------------------------------------------------------------- 1 | Rails.application.routes.draw do 2 | root 'home#index' 3 | 4 | get 'static' => 'example#static', as: :static 5 | get 'spa' => 'example#spa', as: :spa 6 | 7 | resources :customers, except: [ :show, :destroy ] 8 | namespace :api do 9 | resources :customers, except: [ :show ] 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /config/secrets.yml: -------------------------------------------------------------------------------- 1 | # Be sure to restart your server when you modify this file. 2 | 3 | # Your secret key is used for verifying the integrity of signed cookies. 4 | # If you change this key, all old signed cookies will become invalid! 5 | 6 | # Make sure the secret is at least 30 characters and all random, 7 | # no regular words or you'll be exposed to dictionary attacks. 8 | # You can use `rails secret` to generate a secure secret key. 9 | 10 | # Make sure the secrets in this file are kept private 11 | # if you're sharing your code publicly. 12 | 13 | # Shared secrets are available across all environments. 14 | 15 | # shared: 16 | # api_key: a1B2c3D4e5F6 17 | 18 | # Environmental secrets are only available for that specific environment. 19 | 20 | development: 21 | secret_key_base: 3b8ce989ddf203e1f96f648e6b3697b0e18f3da87a29e780b88a0beb1aa1af87a06fba664a55ea97a666fc81c853c9d5f5b2c079a87dbc174cf463e78f569aa2 22 | 23 | test: 24 | secret_key_base: 212dda982bf49109ffbb6fe1508c71a118ff6c7865bb7b739c800c8f7a1c160800114fe77e8f7922de431708b9c5ea3660a30b11174dc2373df9c00827d050fc 25 | 26 | # Do not keep production secrets in the unencrypted secrets file. 27 | # Instead, either read values from the environment. 28 | # Or, use `bin/rails secrets:setup` to configure encrypted secrets 29 | # and move the `production:` environment over there. 30 | 31 | production: 32 | secret_key_base: <%= ENV["SECRET_KEY_BASE"] %> 33 | -------------------------------------------------------------------------------- /config/spring.rb: -------------------------------------------------------------------------------- 1 | %w( 2 | .ruby-version 3 | .rbenv-vars 4 | tmp/restart.txt 5 | tmp/caching-dev.txt 6 | ).each { |path| Spring.watch(path) } 7 | -------------------------------------------------------------------------------- /config/webpack/configuration.js: -------------------------------------------------------------------------------- 1 | // Common configuration for webpacker loaded from config/webpacker.yml 2 | 3 | const { join, resolve } = require('path') 4 | const { env } = require('process') 5 | const { safeLoad } = require('js-yaml') 6 | const { readFileSync } = require('fs') 7 | 8 | const configPath = resolve('config', 'webpacker.yml') 9 | const loadersDir = join(__dirname, 'loaders') 10 | const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV] 11 | 12 | function removeOuterSlashes(string) { 13 | return string.replace(/^\/*/, '').replace(/\/*$/, '') 14 | } 15 | 16 | function formatPublicPath(host = '', path = '') { 17 | let formattedHost = removeOuterSlashes(host) 18 | if (formattedHost && !/^http/i.test(formattedHost)) { 19 | formattedHost = `//${formattedHost}` 20 | } 21 | const formattedPath = removeOuterSlashes(path) 22 | return `${formattedHost}/${formattedPath}/` 23 | } 24 | 25 | const output = { 26 | path: resolve('public', settings.public_output_path), 27 | publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path) 28 | } 29 | 30 | module.exports = { 31 | settings, 32 | env, 33 | loadersDir, 34 | output 35 | } 36 | -------------------------------------------------------------------------------- /config/webpack/development.js: -------------------------------------------------------------------------------- 1 | const environment = require('./environment') 2 | 3 | module.exports = environment.toWebpackConfig() 4 | -------------------------------------------------------------------------------- /config/webpack/environment.js: -------------------------------------------------------------------------------- 1 | const { environment } = require('@rails/webpacker') 2 | 3 | module.exports = environment 4 | -------------------------------------------------------------------------------- /config/webpack/loaders/assets.js: -------------------------------------------------------------------------------- 1 | const { env, publicPath } = require('../configuration.js') 2 | 3 | module.exports = { 4 | test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i, 5 | use: [{ 6 | loader: 'file-loader', 7 | options: { 8 | publicPath, 9 | name: env.NODE_ENV === 'production' ? '[name]-[hash].[ext]' : '[name].[ext]' 10 | } 11 | }] 12 | } 13 | -------------------------------------------------------------------------------- /config/webpack/loaders/babel.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.js(\.erb)?$/, 3 | exclude: /node_modules/, 4 | loader: 'babel-loader' 5 | } 6 | -------------------------------------------------------------------------------- /config/webpack/loaders/coffee.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.coffee(\.erb)?$/, 3 | loader: 'coffee-loader' 4 | } 5 | -------------------------------------------------------------------------------- /config/webpack/loaders/erb.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /\.erb$/, 3 | enforce: 'pre', 4 | exclude: /node_modules/, 5 | loader: 'rails-erb-loader', 6 | options: { 7 | runner: 'bin/rails runner' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /config/webpack/loaders/sass.js: -------------------------------------------------------------------------------- 1 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 2 | const { env } = require('../configuration.js') 3 | 4 | module.exports = { 5 | test: /\.(scss|sass|css)$/i, 6 | use: ExtractTextPlugin.extract({ 7 | fallback: 'style-loader', 8 | use: [ 9 | { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } }, 10 | { loader: 'postcss-loader', options: { sourceMap: true } }, 11 | 'resolve-url-loader', 12 | { loader: 'sass-loader', options: { sourceMap: true } } 13 | ] 14 | }) 15 | } 16 | -------------------------------------------------------------------------------- /config/webpack/loaders/vue.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | test: /.vue$/, 3 | loader: 'vue-loader', 4 | options: { 5 | loaders: { 6 | js: 'babel-loader', 7 | file: 'file-loader', 8 | scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader', 9 | sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /config/webpack/production.js: -------------------------------------------------------------------------------- 1 | const environment = require('./environment') 2 | 3 | module.exports = environment.toWebpackConfig() 4 | -------------------------------------------------------------------------------- /config/webpack/shared.js: -------------------------------------------------------------------------------- 1 | // Note: You must restart bin/webpack-dev-server for changes to take effect 2 | 3 | /* eslint global-require: 0 */ 4 | /* eslint import/no-dynamic-require: 0 */ 5 | 6 | const webpack = require('webpack') 7 | const { basename, dirname, join, relative, resolve } = require('path') 8 | const { sync } = require('glob') 9 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | const ManifestPlugin = require('webpack-manifest-plugin') 11 | const extname = require('path-complete-extname') 12 | const { env, settings, output, loadersDir } = require('./configuration.js') 13 | 14 | const extensionGlob = `**/*{${settings.extensions.join(',')}}*` 15 | const entryPath = join(settings.source_path, settings.source_entry_path) 16 | const packPaths = sync(join(entryPath, extensionGlob)) 17 | 18 | module.exports = { 19 | entry: packPaths.reduce( 20 | (map, entry) => { 21 | const localMap = map 22 | const namespace = relative(join(entryPath), dirname(entry)) 23 | localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry) 24 | return localMap 25 | }, {} 26 | ), 27 | 28 | output: { 29 | filename: '[name].js', 30 | path: output.path, 31 | publicPath: output.publicPath 32 | }, 33 | 34 | module: { 35 | rules: sync(join(loadersDir, '*.js')).map(loader => require(loader)) 36 | }, 37 | 38 | plugins: [ 39 | new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))), 40 | new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'), 41 | new ManifestPlugin({ 42 | publicPath: output.publicPath, 43 | writeToFileEmit: true 44 | }) 45 | ], 46 | 47 | resolve: { 48 | extensions: settings.extensions, 49 | modules: [ 50 | resolve(settings.source_path), 51 | 'node_modules' 52 | ] 53 | }, 54 | 55 | resolveLoader: { 56 | modules: ['node_modules'] 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /config/webpack/test.js: -------------------------------------------------------------------------------- 1 | const environment = require('./environment') 2 | 3 | module.exports = environment.toWebpackConfig() 4 | -------------------------------------------------------------------------------- /config/webpacker.yml: -------------------------------------------------------------------------------- 1 | # Note: You must restart bin/webpack-dev-server for changes to take effect 2 | 3 | default: &default 4 | source_path: app/javascript 5 | source_entry_path: packs 6 | public_output_path: packs 7 | cache_path: tmp/cache/webpacker 8 | 9 | # Additional paths webpack should lookup modules 10 | # ['app/assets', 'engine/foo/app/assets'] 11 | resolved_paths: [] 12 | 13 | # Reload manifest.json on all requests so we reload latest compiled packs 14 | cache_manifest: false 15 | 16 | extensions: 17 | - .coffee 18 | - .erb 19 | - .js 20 | - .jsx 21 | - .ts 22 | - .vue 23 | - .sass 24 | - .scss 25 | - .css 26 | - .png 27 | - .svg 28 | - .gif 29 | - .jpeg 30 | - .jpg 31 | 32 | development: 33 | <<: *default 34 | compile: true 35 | 36 | dev_server: 37 | host: localhost 38 | port: 3035 39 | hmr: false 40 | https: false 41 | 42 | test: 43 | <<: *default 44 | compile: true 45 | 46 | # Compile test packs to a separate directory 47 | public_output_path: packs-test 48 | 49 | production: 50 | <<: *default 51 | 52 | # Production demands on precompilation of packs prior to booting for performance. 53 | compile: false 54 | 55 | # Cache manifest.json for performance 56 | cache_manifest: true 57 | -------------------------------------------------------------------------------- /db/migrate/20170511073027_create_customers.rb: -------------------------------------------------------------------------------- 1 | class CreateCustomers < ActiveRecord::Migration[5.1] 2 | def change 3 | create_table :customers do |t| 4 | t.string :name, null: false 5 | t.string :plan, default: "A" 6 | t.string :gender 7 | t.text :remarks 8 | t.boolean :confirmed, null: false, default: false 9 | t.boolean :approved, null: false, default: false 10 | 11 | t.timestamps 12 | end 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /db/migrate/20171111044841_create_phones.rb: -------------------------------------------------------------------------------- 1 | class CreatePhones < ActiveRecord::Migration[5.1] 2 | def change 3 | create_table :phones do |t| 4 | t.references :customer, null: false 5 | t.string :number, null: false 6 | t.boolean :primary, null: false, default: false 7 | 8 | t.timestamps 9 | end 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /db/migrate/20180214234417_alter_customers1.rb: -------------------------------------------------------------------------------- 1 | class AlterCustomers1 < ActiveRecord::Migration[5.1] 2 | def change 3 | add_column :customers, :avatar, :binary 4 | end 5 | end 6 | -------------------------------------------------------------------------------- /db/schema.rb: -------------------------------------------------------------------------------- 1 | # This file is auto-generated from the current state of the database. Instead 2 | # of editing this file, please use the migrations feature of Active Record to 3 | # incrementally modify your database, and then regenerate this schema definition. 4 | # 5 | # Note that this schema.rb definition is the authoritative source for your 6 | # database schema. If you need to create the application database on another 7 | # system, you should be using db:schema:load, not running all the migrations 8 | # from scratch. The latter is a flawed and unsustainable approach (the more migrations 9 | # you'll amass, the slower it'll run and the greater likelihood for issues). 10 | # 11 | # It's strongly recommended that you check this file into your version control system. 12 | 13 | ActiveRecord::Schema.define(version: 20180214234417) do 14 | 15 | create_table "customers", force: :cascade do |t| 16 | t.string "name", null: false 17 | t.string "plan", default: "A" 18 | t.string "gender" 19 | t.text "remarks" 20 | t.boolean "confirmed", default: false, null: false 21 | t.boolean "approved", default: false, null: false 22 | t.datetime "created_at", null: false 23 | t.datetime "updated_at", null: false 24 | t.binary "avatar" 25 | end 26 | 27 | create_table "phones", force: :cascade do |t| 28 | t.integer "customer_id", null: false 29 | t.string "number", null: false 30 | t.boolean "primary", default: false, null: false 31 | t.datetime "created_at", null: false 32 | t.datetime "updated_at", null: false 33 | t.index ["customer_id"], name: "index_phones_on_customer_id" 34 | end 35 | 36 | end 37 | -------------------------------------------------------------------------------- /db/seeds.rb: -------------------------------------------------------------------------------- 1 | # This file should contain all the record creation needed to seed the database with its default values. 2 | # The data can then be loaded with the rails db:seed command (or created alongside the database with db:setup). 3 | # 4 | # Examples: 5 | # 6 | # movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }]) 7 | # Character.create(name: 'Luke', movie: movies.first) 8 | -------------------------------------------------------------------------------- /lib/assets/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/lib/assets/.keep -------------------------------------------------------------------------------- /lib/tasks/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/lib/tasks/.keep -------------------------------------------------------------------------------- /log/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/log/.keep -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue_form_for_example", 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "yarn": { 6 | "version": "1.1.0", 7 | "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.1.0.tgz", 8 | "integrity": "sha1-8tqTQEkCNrbFbeMFscIaihnEM8M=" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue_form_for_example", 3 | "private": true, 4 | "dependencies": { 5 | "@rails/webpacker": "^3.0.0", 6 | "autoprefixer": "^7.1.1", 7 | "axios": "^0.16.1", 8 | "babel-core": "^6.24.1", 9 | "babel-loader": "7.x", 10 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 11 | "babel-plugin-transform-class-properties": "^6.24.1", 12 | "babel-polyfill": "^6.23.0", 13 | "babel-preset-env": "^1.5.1", 14 | "caniuse-lite": "^1.0.30000758", 15 | "coffee-loader": "^0.7.3", 16 | "coffee-script": "^1.12.6", 17 | "compression-webpack-plugin": "^0.4.0", 18 | "css-loader": "^0.28.3", 19 | "extract-text-webpack-plugin": "^2.1.2", 20 | "file-loader": "^0.11.1", 21 | "glob": "^7.1.2", 22 | "js-yaml": "^3.8.4", 23 | "node-sass": "^4.6.0", 24 | "path-complete-extname": "^0.1.0", 25 | "postcss-loader": "^2.0.5", 26 | "postcss-smart-import": "^0.7.2", 27 | "precss": "^1.4.0", 28 | "rails-erb-loader": "^5.0.1", 29 | "resolve-url-loader": "^2.0.2", 30 | "sass-loader": "^6.0.5", 31 | "style-loader": "^0.18.1", 32 | "vue": "^2.3.3", 33 | "vue-data-scooper": "^0.7.1", 34 | "vue-loader": "^12.0.3", 35 | "vue-remote-template": "^0.9.0", 36 | "vue-template-compiler": "^2.3.3", 37 | "webpack": "^3.8.1", 38 | "webpack-manifest-plugin": "^1.1.0", 39 | "webpack-merge": "^4.1.0", 40 | "yarn": "^1.1.0" 41 | }, 42 | "devDependencies": { 43 | "webpack-dev-server": "^2.7.1" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /public/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The page you were looking for doesn't exist (404) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

The page you were looking for doesn't exist.

62 |

You may have mistyped the address or the page may have moved.

63 |
64 |

If you are the application owner check the logs for more information.

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /public/422.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The change you wanted was rejected (422) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

The change you wanted was rejected.

62 |

Maybe you tried to change something you didn't have access to.

63 |
64 |

If you are the application owner check the logs for more information.

65 |
66 | 67 | 68 | -------------------------------------------------------------------------------- /public/500.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | We're sorry, but something went wrong (500) 5 | 6 | 55 | 56 | 57 | 58 | 59 |
60 |
61 |

We're sorry, but something went wrong.

62 |
63 |

If you are the application owner check the logs for more information.

64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /public/apple-touch-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/public/apple-touch-icon-precomposed.png -------------------------------------------------------------------------------- /public/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/public/apple-touch-icon.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/public/favicon.ico -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | -------------------------------------------------------------------------------- /vendor/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kuroda/vue-rails-form-builder-demo/92b0a12c87649c7e1e34bdfa69f9247c8d554328/vendor/.keep --------------------------------------------------------------------------------