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 80,973+ developers who get early access to new tutorials, screencasts, articles, and more.

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.