Ask A Question


You’re not receiving notifications from this thread.

How I do use Rails.ajax in vueJs components using webpacker in rails 6

Hasan Ali asked in Rails

I have created the brand new application in rails 6 with webpacker and VueJS. I am trying to use the Rails.ajax to send ajax request request from Vue component to rails controller. I have included other js plugins these are working fine. But when I am trying to send ajax request with Rails.ajax it throws this error in chrom console. [Vue warn]: Error in v-on handler: “ReferenceError: Rails is not defined”

Here is my application.js Code:


import Vue from 'vue/dist/vue.esm'
import VueSweetalert2 from 'vue-sweetalert2';

import 'vue-loading-overlay/dist/vue-loading.css';
import 'sweetalert2/dist/sweetalert2.min.css';

import Plans from '../plans.vue'


document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#vue-container',
    components: { Plans }

I am rendering Vue Component in plans/index.html.erb Like @chris is doing rails Rails 5 trello clone with vue JS. Here is Vue component.

  <div class="container">
    <div class="row">
      <div class="plan_section">
        <div class="plan_heading_section">
          <h1>Plan / Pricing </h1>
          <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        <div class="bs-five-area bs-radius">
          <Loading :active.sync="isLoading"
          <div v-for='plan in plans' v-bind:key="" class="col-md-4 no-padding" v-bind:class="activePlanClass(plan, shop)">
            <div class="bs-five">
              <h3 class="text-uppercase">Plan</h3>
              <h1 class="bs-caption"><sup>$</sup>{{ plan.price }}</h1>
                <li><b>{{ planDescription(plan) }}</b></li>
              <button class="btn btn-success subscribe-plan btn-round m-top-40" @click="subscribePlan" :disabled="isDisabled(plan, shop)">{{ planButtonText(plan, shop) }}</button>


import Loading from 'vue-loading-overlay';

export default {
  name: 'Plans',
  props: ['plans', 'shop', 'url'],
  components: { Loading }, 
  data: function () {
    return {
      isLoading: false,
      color: '#3BB9FF',
  methods: {
    activePlanClass: function(plan, shop){
      return == shop.plan_id ? 'active-plan' : ''
    planDescription: function(plan){
      name = ''
      switch(plan.plan_type) {
        case 0:
          name = "One Fan Page"
        case 1:
          name = "Two Fan Pages"
        case 2:
          name = "Four Fan Pages"
        case 3:
          name = "Eight Fan Pages"
        case 4:
          name = "Unlimited"
      return name;
    planButtonText: function(plan, shop){
      return == shop.plan_id ? 'Subscribed Plan' : 'Subscribe'
    isDisabled: function(plan, shop){
      if ( == shop.plan_id || < parseInt(shop.plan_id)) { return true; }
      return false;
    subscribePlan: function(event){
      this.isLoading = true;
        url: this.url,
        type: 'get',
        dataType: 'json',
        success: function (data) {
          if (data.success) {
            if (data.message) { toastr.success(data.message) }
            window.location.href = data.url
          else {
        error: function(){
          toastr.error('Server Error, Please contact with support team.');

Error occurs in subscribePlan function where Rails.ajax is defined. Couldn;t find anything on google. I have posted question on stackoverflow as well but didn't get any help. I am unable to find what I am missing here. Anyone will be appricated thanks


I fix this by using:

import Rails from "@rails/ujs"

instead of


and then I added

import Rails from "@rails/ujs"

in every component where I use Rails


Good :-)

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,453+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.