Forem: Raj

Scaling Vue.js for the Next Million: Lessons from 100k+ Concurrent User Environments

Raj — Wed, 01 Apr 2026 10:30:14 +0000

When you’re building a hobby project, Vue’s reactivity feels like magic. But when that project hits 100,000 concurrent users, that same magic can turn into a memory-leaking nightmare if your architecture isn't battle-hardened.

Having spent 9+ years building full-stack applications with Vue and Laravel, I’ve seen exactly where "standard" patterns break under pressure. Scaling isn't just about adding more servers; it’s about writing code that respects the user's CPU and memory.

Here is the blueprint for scaling Vue.js applications to handle enterprise-level traffic.

The Reactivity Tax: Using shallowRef In Vue 3, every reactive object is converted into a Proxy. For a small form, this is negligible. For a dashboard fetching 5,000 rows of data from a Laravel API, it’s a performance killer.

The Fix:
If you have data that only needs to be displayed and not edited property-by-property, use shallowRef().

JavaScript
// Instead of this (Deep Reactivity):

const largeData = ref(apiResponse);

// Do this (Surface Reactivity):

const largeData = shallowRef(apiResponse);

Why? This tells Vue not to observe every nested property. In a high-traffic app, this can reduce memory overhead by up to 40%.

DOM Management with Virtualization Rendering 1,000 list items is easy. Rendering 1,000 items with complex components, images, and event listeners for 100k users will lag the browser's main thread.

The Strategy: Stop rendering what the user can't see. By implementing Virtual Scrolling, you only render the 5–10 items currently in the viewport.

Tool of choice: vue-virtual-scroller or VueUse/useVirtualList.

The Result: Your DOM stays lean, regardless of whether your dataset has 10 or 10,000 entries.

Intelligent State Hydration (Pinia) At 100k users, your API is under heavy load. If every page refresh triggers a full state fetch, your Laravel backend will struggle.

The Strategy:

Persisted State: Use Pinia with a LocalStorage or IndexDB plugin to cache non-critical data.

Stale-While-Revalidate: Serve the cached state immediately while fetching fresh data in the background. This makes the app feel instant, even on slow connections.

Code Splitting: Beyond the Basics Most developers know about lazy loading routes. But for true scale, you must split components and heavy libraries.

If only 5% of your users use the "Export to PDF" feature, don't make 100% of your users download the jspdf library.

JavaScript

// Lazy-load a heavy component only when needed
const PdfGenerator = defineAsyncComponent(() =>
  import('./components/PdfGenerator.vue')
)

The Backend Synergy: Laravel & Octane You can't scale a Vue frontend if the API latency is high. For my high-traffic builds, I pair Vue with Laravel Octane.

By keeping the application in memory (using Swoole or RoadRunner), we eliminate the overhead of booting the framework on every request. This reduces API response times from 150ms to 20ms, allowing the Vue frontend to remain snappy and reactive.

Summary: Performance is a Feature
Scaling to 100k+ users isn't a single "hack." It's the sum of small, disciplined architectural choices:

Respect the Proxy: Use shallowRef.

Respect the DOM: Virtualize lists.

Respect the Bundle: Async everything.

Respect the Server: Optimize with Octane.

Need to scale your application?
I specialize in taking Vue.js and Laravel applications from "MVP" to "Enterprise Scale." If your app is slowing down or you're planning for massive growth, let’s connect.

Post-Publishing Tip: * Tags: #VueJS #WebPerformance #Laravel #Scaling #FullStack

Passing Data to Child Components Without Props in Vue

Raj — Thu, 10 Oct 2024 05:29:47 +0000

When building Vue applications, the most common way to pass data from a parent component to a child component is via props. However, there are situations where you want to pass data to deeply nested child components without having to pass it through every intermediate component using props. This is where Vue's provide and inject pattern comes in handy.

In this blog post, we’ll explore how you can pass data to child components using provide and inject, avoiding props entirely.

Why Avoid Props?

Props are great when data flows from parent to child directly. But as the component tree becomes more complex, passing props through multiple layers of components can become cumbersome. This pattern becomes problematic when:

You have deeply nested components.
Intermediate components don't need the data but must pass it along.
You want to reduce boilerplate and avoid prop-drilling.
Vue's provide and inject API offers a clean solution by letting you "provide" data in the parent and "inject" it directly into any descendant component without passing it down through props.

How provide and inject Work

provide

The provide option is used to make data available to all descendant components. The parent component "provides" data by defining it inside the provide option.

inject

The inject option allows child components to access the provided data. Any component that needs the data simply "injects" it without relying on the props system.

Here’s an example to demonstrate how provide and inject work together.

Example: Provide and Inject in Action
Let’s walk through an example where a parent component provides a value and a child component consumes it via inject.

Parent Component: Providing the Data In your parent component, use the provide option to pass data.

<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from the Parent Component!'
    };
  }
}
</script>

Here, we are using provide to share a message with the child components. Any descendant component can now access this message.

2. Child Component: Injecting the Data

In the child component, use inject to access the provided data.

<template>
  <div>
    <h2>Child Component</h2>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message']
}
</script>

In this child component, we use inject to access the message provided by the parent. Notice that there's no need to pass message as a prop. The child component directly accesses the provided data.

Benefits of Using provide and inject

Cleaner Code: You avoid prop-drilling, especially in deeply nested components.
Flexible Data Flow: You can pass data to components that may not be direct children.
Reduced Boilerplate: Fewer props means less code and reduced complexity.

However, it's important to note that provide and inject create an implicit dependency between components. If overused, this can make your component relationships harder to understand.

Reactive Provide/Inject

By default, provide does not react to changes in data. If you need the provided data to be reactive, you can wrap it in ref or reactive.

<template>
  <div>
    <h1>Reactive Parent</h1>
    <ChildComponent />
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from the Parent Component!');

    const updateMessage = () => {
      message.value = 'Updated Message!';
    };

    return {
      provide: {
        message
      },
      updateMessage
    };
  }
}
</script>

Now, when the button is clicked, the message will be updated in both the parent and the child components.

When to Use provide and inject?
Global Configurations: When you need to pass down configuration or service instances (e.g., localization, theme settings, or API clients).
Avoiding Prop-Drilling: When you have deeply nested components and don't want to pass props through each layer.
Shared State: When components need access to the same state but are not directly related in the component hierarchy.

Conclusion

Vue’s provide and inject pattern is a powerful tool for sharing data between components without the hassle of prop-drilling. While it’s not a replacement for props, it's especially useful for managing complex component trees where intermediate components don’t need the data. By leveraging provide and inject, you can keep your codebase clean and maintainable, while efficiently passing data throughout your app.

I hope this post helps you understand how to pass data between components without props using provide and inject. Happy coding!

Let’s Connect!

I’d love to hear from you! Whether you have questions, need help with your projects, or just want to share ideas, feel free to reach out. Let’s connect and collaborate on building amazing things together.

You can find me at https://www.rajendranagar.co.in/, or connect with me on LinkedIn and GitHub to stay updated with the latest tips and insights.

Looking for Vue JS Project

Raj — Mon, 25 Sep 2023 05:34:36 +0000

Are you looking for a reliable Laravel and VueJS developer? With years of experience in PHP and Laravel, I can provide top-quality web development services, from building a website from scratch to upgrading an existing Laravel-based application.

Here I created a new account let's discuss

Expertise
• Code refactoring
• Bug fixing
• REST APIs
• PHP Unit Testing
• VUEX (State Management)

I use the following technology
1. PHP
2. Laravel
3. MySQL
4. JavaScript / jQuery
5. Vue Js

I always Keep in my mind

1. 100% Client Satisfaction
2. Unlimited Revision to build a good relation
3. 100% Money-back Guarantee
4. Timely delivery of work

Found solution for UVC Quanta 0408:4033 camera PROBLEM Ubuntu 23

Raj — Sun, 28 May 2023 11:02:08 +0000

_Found solution for UVC Quanta 0408:4033 camera PROBLEM Ubuntu 23 for the users Who are buying laptop Acer Aspire A715-51G and installed Ubuntu _

Go to your home directory and follow steps

I finaly compile https:/ on ubuntu 23.04
Simply by:
git checkout HEAD~1 (first commit for 6.2 kernel, last for 6.3 kernel)
make
sudo rmmod uvcvideo
sudo insmod ./uvcvideo.ko

if you found error like this

The kernel was built by: x86_64-linux-gnu-gcc-12 (Ubuntu 12.2.0-17ubuntu1) 12.2.0
You are using: gcc-12 (Ubuntu 12.2.0-17ubuntu1) 12.2.0
CC [M] /home/raj/uvc/uvc_driver.o
/home/raj/uvc/uvc_driver.c:17:10: fatal error: linux/usb/uvc.h: No such file or directory
17 | #include <linux/usb/uvc.h>
 ^~~~~~~~~~~~~~~~~
compilation terminated.

Then follow below steps again

sudo apt-get install build-essential
git clone git clone  https://github.com/Kvalme/uvc.git
cd ./uvc/
git checkout 5ea688c
make
sudo rmmod uvcvideo
sudo insmod ./uvcvideo.ko

Now camera will work but if you reboot and again not working then run below command’s

sudo cp /lib/modules/$(uname -r)/kernel/drivers/media/usb/uvc/uvcvideo.ko{,.back}

sudo cp ~/uvc/uvcvideo.ko /lib/modules/$(uname -r)/kernel/drivers/media/usb/uvc/uvcvideo.ko

sudo reboot

Please share or comment if you like may this can help to buy external webcam for the ubuntu users who are using this webcam

How to change the timestamp column's format in Laravel?

Raj — Sat, 17 Dec 2022 06:51:20 +0000

If you want to compare the timestamp column value with today's date then first you need to change the format of the date-time value to the current date

*For example - *

find today's date data from the database table compare on the field created_at which is the timestamp column type.

$query->where(name, $name)->where(DB::raw("(DATE_FORMAT(date_time,'%Y-%m-%d'))"), 
Carbon::now()->format('Y-m-d'));

Use DATE_FORMAT in DB::raw to convert the timestamp field into today's date and get data accordingly from the database.

How to create Nice table Component in Vue Js

Raj — Sun, 11 Dec 2022 07:35:37 +0000

Create new component VueTableComponent.vue and insert following code below

<template>
  <div class="vue-nice-table table-responsive">
    <table :class="[stripe ? 'table stripped' : 'table']">
      <thead>
        <tr>
          <th
            v-for="(column,key) in table_columns"
            :key="key"
            @click="sortFunction(column,key)"
          >
            {{ column.labelTop!==undefined? String(column.labelTop) : '' }} <br>
            {{ String(column.label) }}
            <i
              v-if="column.sorting!==false"
              :class="['fa',sortArrow(key)]"
              aria-hidden="true"
            />
          </th>
        </tr>
      </thead>
      <tbody v-if="!table_rows.length">
        <tr>
          <td colspan="9">
            <slot name="emptystate" />
          </td>
        </tr>
      </tbody>
      <transition-group
        v-if="table_rows.length"
        name="fade"
        tag="tbody"
      >
        <tr
          v-for="(row,key) in table_rows"
          :key="key+1"
          :class="{'highlight-row': highlightId === row.id}"
        >
          <td
            v-for="(column,key2) in table_columns"
            :key="key2"
          >
            <slot
              :row="row"
              :column="column"
              name="table-row"
            >
              {{ row[column.field] }}
            </slot>
          </td>
        </tr>
      </transition-group>
      <tfoot v-if="Object.keys(footer_rows).length">
        <tr>
          <td
            v-for="(column,key2) in columns"
            :key="key2"
          >
            {{ footer_rows[column.field] }}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

Styling the table view

<style scoped>
.vue-nice-table .table td,
.table th {
  border-top-width: 0px;
  padding: 3px 5px !important;
  height: 40px;
  vertical-align: top !important;
}
.vue-nice-table .table td {
  border-bottom: 0;
}
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.vue-nice-table .table th {
  border-bottom: 1px solid;
  border-color: #5e5e5e !important;
  font-weight: 800;
  color: #5e5e5e;
    white-space: nowrap;
}
.vue-nice-table .table tfoot {
  border-top: 1px solid #000000;
}
.vue-nice-table .table tfoot td {
  font-weight: 800;
}
.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar:horizontal {
    height: 8px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}
.table-responsive::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}
.table-responsive table th{
    cursor: pointer;
}
.vue-nice-table .stripped tbody tr:nth-child(odd) {
   background-color: #eee !important;
}
.highlight-row {
    box-shadow: inset 0px 0px 10px 0px #f39c12;
}
</style>

Define props

props: {
        columns: { type: Array, default: () => [] },
        rows: { type: Array, default: () => [] },
        footer: { type: Object, default: () => {} },
        sortByApi: { type: Boolean, default: false},
        stripe: { type: Boolean, default: false},
        highlightId: { type: Number, default: 0},
    },

Define data properties

data() {
        return {
            sorted_rows: [],
            column_arrows_index:null,
            column_arrows_sort:'asc',
        };
    },

Computed properties

computed: {
        table_columns() {
            return this.columns.filter(node=>node.show!==false);
        },
        table_rows() {
            let rows = [];
            if (this.sortByApi) {
                rows = this.rows;
            } else {
                rows = this.sorted_rows.length === this.rows.length ? this.sorted_rows : this.rows;
            }
            return rows.length ? rows.map(node => {
                return this.formatRow(node, 'row');
            }) : [];
        },
        footer_rows() {
            var footer_rows = this.footer !== undefined ? [this.footer] : [];
            footer_rows = footer_rows.map(node => {
                return this.formatRow(node, 'footer');
            });
            return footer_rows.length ? footer_rows[0] : {};
        },
        column_arrows(){
            return this.columns.map((node,index)=>{
                return index===this.column_arrows_index ? this.column_arrows_sort : 'none';
            });
        }

Define some logic and calculations

watch: {
        rows(oldVal, newVal) {
            if (oldVal !== newVal && !this.sortByApi) {
                this.sortFunction(this.table_columns[0],0);
            }
        }
    },
    mounted(){
        if(this.rows.length && this.sorted_rows.length===0){
            this.sortFunction(this.table_columns[0],0);
        }
    },
    methods: {
        ucfirst(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        },
        sortFunction(column, index) {
            if(column.sorting===false){
                return false;
            }
            let type = column.type !== 'undefined' ? column.type : 'string';
            //toggle sorting
            if(this.column_arrows_index === index){
                this.column_arrows_sort = this.column_arrows_sort === 'desc' ? 'asc' :'desc';
            }else{
                this.column_arrows_index = index;
                this.column_arrows_sort = 'asc';
            }
            if (this.sortByApi) {
                this.$emit('sort', column.field, this.column_arrows_sort, type);
            }
            this.sorted_rows = this.rows.sort(this.compareValues(column.field, this.column_arrows_sort, type));
        },
        sortArrow(key)
        {
            if (this.column_arrows[key]==='asc')
            {
                return  'fa-caret-down';
            }
            else if (this.column_arrows[key]==='desc')
            {
                return  'fa-caret-up';
            }
            else
            {
                return  'fa-sort';
            }
        },
        compareValues(key, order = 'asc', type = 'string') {
            return function(a, b) {
                if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
                    // property doesn't exist on either object
                    return 0;
                }
                var varA;
                var varB;
                switch(type){
                case 'string':
                    varA = String(a[key]).toUpperCase();
                    varB = String(b[key]).toUpperCase();
                    break;
                case 'float':
                    varA = (Math.round(parseFloat(a[key])*100)/100);
                    varB = (Math.round(parseFloat(b[key])*100)/100);
                    break;
                default:
                    varA = a[key];
                    varB = b[key];
                }
                let comparison = 0;
                if (varA ===null || varA ==='' || varA==='-') {
                    comparison = 1;
                }
                else if (varB ===null || varB ==='' || varB==='-') {
                    comparison = -1;
                }else{
                    if (varA > varB) {
                        comparison = 1;
                    } else if (varA < varB) {
                        comparison = -1;
                    }
                }
                return order === 'desc' ? comparison * -1 : comparison;
            };
        },
        formatRow(row, type = 'row') {
            let new_row = {};
            this.columns.map(column => {
                //replace undefined value with empty string
                if (typeof(row[column.field]) === undefined) {
                    new_row[column.field] = '';
                    return false;
                }
                //check if footerFormat is available in case of footer
                if (type === 'footer') {
                    if (
                        column.footerFormat === undefined &&
            column.footerFormat !== false
                    ) {
                        new_row[column.field] = row[column.field];
                        return false;
                    }
                }
                //format row cell w.r.t column field type if given
                if (column.type === 'number') {
                    if(row[column.field]){
                        new_row[column.field] = parseInt(row[column.field], 10);
                    }else {
                        new_row[column.field] = '-';
                    }
                } else if (column.type === 'float' && row[column.field]) {
                    if (typeof column.decimalPoint !== 'undefined') {
                        new_row[column.field] = parseFloat(row[column.field]).toFixed(
                            column.decimalPoint
                        );
                    } else {
                        new_row[column.field] = parseFloat(row[column.field]).toFixed(2);
                    }
                } else if (column.type === 'date' && row[column.field]) {
                    // if (typeof column.dateFormat !== 'undefined') {
                    //  new_row[column.field] = this.$moment(row[column.field]).format(
                    //      column.dateFormat
                    //  );
                    // } else {
                    //  new_row[column.field] = this.$moment(row[column.field]).format(
                    //      'YYYY-MM-DD'
                    //  );
                    // }
                } else if (column.type === 'percentage') {
                    if(row[column.field]!==null){
                        new_row[column.field] = parseInt(row[column.field] * 100 ) + '%';
                    }else {
                        new_row[column.field] = '-';
                    }
                } else if (column.type === 'string') {
                    if (typeof column.stringFormat !== 'undefined') {
                        if (column.stringFormat === 'uppercase') {
                            new_row[column.field] = String(row[column.field]).toUpperCase();
                        } else if (column.stringFormat === 'ucfirst') {
                            new_row[column.field] = this.ucfirst(String(row[column.field]));
                        } else {
                            new_row[column.field] = String(row[column.field]).toLowerCase();
                        }
                    } else {
                        new_row[column.field] = String(row[column.field]);
                    }
                } else {
                    new_row[column.field] = row[column.field];
                }
            });
            return Object.assign(Object.assign({}, row), new_row);
        }
    }

Create new component and import table component and use as below

 <vue-table-component
    :columns="columns_array"
    :rows="rows_array"
    :footer="footer_object"
    :stripe="false"
 />

Use slot for linking the row

<vue-table-component
    :columns="columns"
    :rows="rows"
>
    <template
        slot="table-row"
        slot-scope="props"
    >
        <span v-if="props.column.field==='full_name'">
            <a
                :href="'/profile/'+props.row.user_id"
                class="text-underline"
            >{{ props.row['full_name'] }}</a>
        </span>
        <span v-else>
            <span
                v-if="props.row.average_score<5"
                class="text-warning"
            >{{ props.row[props.column.field] }}</span>
            <span v-else>{{ props.row[props.column.field] }}</span>
        </span>
    </template>
    <template slot="emptystate">
        No data present.
    </template>
</vue-table-component>

Sorting using API

<vue-table-component
    :columns="columns"
    :rows="rows"
    :sort-by-api="true"
    @sort="sortFunction('custom_argument',...arguments)"
>

</vue-table-component>

Call sort function
sortSessions(custom_argument,sortBy,sortType){ Call your api to sort }

How to remove trailing commas from the last element of an array using JavaScript?

Raj — Sun, 11 Dec 2022 07:00:46 +0000

To remove the comma from an array's last element, call the replace() method.

let array = ['value1', 'value2', 'value3', 'value4', 'value5,'];
    let last_index = array.length-1;
    let last_value = array[last_index].replace(',', '');
    array[last_index] = last_value;
   console.log(array);
   //Output
   ['value1', 'value2', 'value3', 'value4', 'value5']

Find the last element from an array using length. array.length-1;
Replace comma using replace method and filter new value array[last_index].replace(',', '');
Push new value at last element index array[last_index] = last_value;

Output will be
//Output ['value1', 'value2', 'value3', 'value4', 'value5']

How to use Vuelidate forEach helper to validate collections in Vue Js

Raj — Fri, 25 Nov 2022 05:43:11 +0000

Using the forEach helper from @vuelidate/validators , you can easily validate all properties inside a collection, without any extra components.

<template>
  <div
    v-for="(input, index) in state.collection"
    :key="index"
    :class="{
        error: v$.collection.$each.$response.$errors[index].name.length,
      }"
  >
    <input v-model="input.name" type="text" />
    <div
      v-for="error in v$.collection.$each.$response.$errors[index].name"
      :key="error"
    >
      {{ error.$message }}
    </div>
  </div>
</template>

<script>
// setup in a component
import { helpers, required } from '@vuelidate/validators'
import { useVuelidate } from '@vuelidate/core'
import { reactive } from 'vue'

export default {
  setup () {
    const rules = {
      collection: {
        $each: helpers.forEach({
          name: {
            required
          }
        })
      }
    }
    const state = reactive({
      collection: [
        { name: '' }, { name: 'bar' }
      ]
    })
    const v = useVuelidate(rules, state)
    return { v, state }
  }
}

</script>

The $response for the validator follows the schema below, so you can use it as you wish:

const result = {
  $data: [
    {
      propertyToValidate: {
        validator: boolean,
      }
    },
  ],
  $errors: [
    {
      propertyToValidate: [
        {
          $message: string, // the validator error
          $model: '', // the model that was validated
          $params: {}, // params, if validator has any
          $pending: false, // always false, no async support.
          $property: string, // the property to validate
          $response: boolean, // response
          $validator: string // validator name
        },
      ]
    },
    {
      name: []
    }
  ],
  $valid: boolean
}