# coding: utf-8
class UsersController < ApplicationController

  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      flash[:success] = "registing user data"
      redirect_to '/'
    else
      flash[:danger] = "invalid info"
      redirect_to '/signup'
    end
  end

  private
    def user_params
      params.require(:user).permit(:user_name, :email, :password, :password_confirmation)
    end

<h1>Add</h1>
</div>
<%= javascript_pack_tag 'new' %>
<div>

<template>
  <form accept-charset="UTF-8">
    <input type="text" v-model="username" placeholder="username">
    <input type="text" v-model="email" placeholder="email">
    <input type="password" v-model="password" placeholder="password">
    <input type="password" v-model="password_confirm" placeholder="password(confirm)">
    <button type="submit" v-on:click="sendForm">send</button>
  </form>
</template>

<script>
import axios from 'axios';

const token = document.getElementsByName("csrf-token")[0].getAttribute("content");
axios.defaults.headers.common["X-CSRF-Token"] = token;
axios.defaults.headers.common["Content-Type"] = "application/json";
axios.defaults.headers.common["charset"] = "utf-8";
axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";

export default {
  data: function() {
    return {
      username: "",
      email: "",
      password: "",
      password_confirm: ""
    }
  },
  methods: {
    sendForm: function(e){
      axios.post("/signup", {
        "user": {
          "user_name": this.username,
          "email": this.email,
          "password": this.password,
          "password_confirmation": this.password_confirm,
        }
      })
      .then(response => {
      })
      .catch(response => {
      });
    }
  }
}
</script>

import Vue from 'vue';
import New from '../new.vue';
import TurbolinksAdapter from 'vue-turbolinks';

Vue.use(TurbolinksAdapter);

document.addEventListener('turbolinks:load', () => {
    const el = document.body.appendChild(document.createElement('new'));
    const new_ = new Vue({
        el,
        render: h => h(New)
    });

    console.log('/new page');
});