Keeping up with web development frameworks feels like a full-time job. Instead of reading every release note, let us look at the specific features that actually save you time in your daily coding.

  • Using Laravel's new once function to prevent duplicate code execution
  • Building cleaner Vue.js components with script setup syntax
  • Handling styling faster with Tailwind CSS dynamic utility values

Prevent Duplicate Code with Laravel's once() Helper

Laravel added a helpful global function called once(). This function ensures that a piece of code inside a closure runs only once per request, even if you call it multiple times. This is great for preventing duplicate database queries or redundant logic.

Here is how you used to handle shared state or conditional execution:

// Before
class UserStats {
    protected static $loaded = false;
    
    public function get() {
        if (!self::$loaded) {
            self::$loaded = true;
            // Expensive query here
        }
    }
}

And here is the much simpler version using the new helper:

// After
public function get() {
    return once(function () {
        // Expensive query here
        return DB::table('stats')->get();
    });
}

The key takeaway is that you no longer need to write manual static property checks just to cache a result for a single HTTP request.

Vue.js development Photo by James Harrison on Unsplash

Cleaner Component Logic in Vue.js

Vue.js uses single-file components where your HTML, JavaScript, and CSS live in one file. The modern <script setup> syntax removes a lot of boilerplate code like the traditional export default object. You just write your logic at the top level, and it automatically becomes available to your template.

Here is the old way of writing a basic counter component:

// Before
<script>
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const increment = () => count.value++;
        return { count, increment };
    }
}
</script>

And here is the modern way using <script setup>:

// After
<script setup>
import { ref } from 'vue';
const count = ref(0);
const increment = () => count.value++;
</script>

The key takeaway is that you write about half as much JavaScript, and you can stop manually returning every variable and function to the template.

Common mistakes to watch out for

When using Laravel's once() function, remember that it only caches data for the duration of a single HTTP request. Do not use it as a replacement for long-term application caching like Redis or database cache tables. For Vue.js <script setup>, remember that top-level imports are automatically exposed to your template, so be careful not to accidentally name local variables after imported components.

Open your current project today and try refactoring just one repetitive component or backend helper using these modern patterns.