https://github.com/kuroda/vue-rails-form-builder-demo

An example of Rails app using vue-form-for gem
https://github.com/kuroda/vue-rails-form-builder-demo

rails vuejs webpack

Last synced: 8 days ago
JSON representation

An example of Rails app using vue-form-for gem

• Host: GitHub
• URL: https://github.com/kuroda/vue-rails-form-builder-demo
• Owner: kuroda
• Created: 2017-05-10T04:25:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-19T05:43:43.000Z (almost 2 years ago)
• Last Synced: 2024-04-14T21:53:41.481Z (9 months ago)
• Topics: rails, vuejs, webpack
• Language: Ruby
• Size: 562 KB
• Stars: 13
• Watchers: 2
• Forks: 1
• Open Issues: 28
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vue-rails-form-builder-demo

This is a Rails demo application using these libraries:

* [vue-rails-form-builder](https://github.com/kuroda/vue-rails-form-builder) -

  A custom Rails form builder for Vue.js

* [vue-data-scooper](https://github.com/kuroda/vue-data-scooper) -

  A Vue.js plugin to initialize the Vue instance data from form elements

* [vue-remote-template](https://github.com/kuroda/vue-remote-template) -

  A Vue.js mixin to fetch template via Ajax

This application illustrates how we can combine the _traditional_ form builder

with Vue.js components.

Look at carefully these files:

* `Gemfile`

* `package.json`

* `app/views/customers/edit.html.erb`

* `app/views/customers/new.html.erb`

* `app/views/customers/_fields.html.erb`

* `app/javascript/packs/customers/fields.js`

Especially, note that we use `vue_form_for` helper in stead of `form_for`:

```erb

<%= vue_form_for @customer, html: { id: "customer-form" } do |f| %>

  <%= render "fields", f: f %>

  


    <%= f.submit "Update" %>

  

<% end %>

```


Also observe how we _use_ the `vue-data-scooper` plugin:

```javascript

import Vue from 'vue/dist/vue.esm'

import VueDataScooper from "vue-data-scooper"

Vue.use(VueDataScooper)

document.addEventListener("DOMContentLoaded", () => {

  new Vue({

    el: "#customer-form"

  })

})

```

## Installation

```bash

git clone https://github.com/kuroda/vue-rails-form-builder-demo.git

cd vue-rails-form-builder-demo

bundle

yarn

bin/rake db:setup

```

## Running in development mode

In one terminal:

```bash

bin/webpack-dev-server

```

In another terminal:

```bash

rails s

```