How to use global helper functions in Laravel + Vue 3 (Composition API) + Inertia.js setup

We often use global helper functions. Get them ready in your Inertia.js + Vue 3 driven templates.

Creators of Vue 3’s Composition API discourage developers from using global variables. But I believe keeping your string helper functions always eligible won’t hurt.

Let’s start by creating a single helpers.js file to put a couple of handy string manipulation functions. (I store this file in the/resources/js/Common path for convenience.)

Now we need to modify the default /resources/app.js file (tailored to work with Laravel 9 + Inertia.js monolith) as seen below. Note that I import the helpers file in the line 7:

As you can see, the $helpers object is added to the app.config.globalProperties in line 24, and this already lets us use any helper method in templates without any further action.

For example, now you can use the “makeReadable” function such as:

<template>
<div>{{ $helpers.makeReadable(‘an_example’) }}</div>
<template>

However, due to the composition API's structural restrictions, we can’t access the app’s global properties in the script block. This is a bit frustrating, and it’s still possible to overcome it by using the getCurrentInstance method, but it’s discouraged in the Vue documentation.

So, what to do? This is the reason why we also included the provide part in the app.js.

We provide helpers to the app as documented in Vue 3 documentation to inject them into any script block whenever needed. This way we make it possible to use helper functions within the script block (in computed properties for example, for conditional usage) as well.

I use <script setup> structure since I find it more convenient, so here’s what I do to get it ready:

<script setup>
import { inject } from 'vue';
const helpers = inject('helpers');
const example = helpers.makeReadable(“an_example”) //“An Example”
</script>

If you do not use the <script setup> syntax, here’s what to do

import { inject } from 'vue';export default {
setup() {
const helpers = inject('helpers');
const example = helpers.makeReadable('an example');

return {
example;
}
}
}

I know that it seems a bit redundant both to use the globalProperties and the provide/inject methods at the same time, but I tried to find the most comfortable solution available.

I wish there would be a way to directly use the global $helpers variable in the script block, yet this is the easiest way I have discovered so far.

Let me know if you have a better way to implement global helper functions for the Laravel + Vue 3 + Inertia.js setup.

--

--

--

Developer, Amateur Musician | Technical co-founder of off2class.com | Founder of valizim.com | Ex contributor @PCnetDergisi

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top 5 Free Angular Bootstrap Resources

Introduction to Gatsby

Setup a Micro Frontend Architecture With Vue and single-spa

Person stacking colorful blocks on top of each other.

Vue gotchas

Huawei Lite Wearable Application Development using HUAWEI DevEco Studio (HarmonyOS)

The Ultimate Guide to JavaScript Naming Conventions

Javascript - Function expressions, statements and Immediately Invoked Function Expressions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Serdar Cevher

Serdar Cevher

Developer, Amateur Musician | Technical co-founder of off2class.com | Founder of valizim.com | Ex contributor @PCnetDergisi

More from Medium

Using Vue.js components in a blade template

How to make Laravel + Vue + Inertia.js use Google ReCaptcha without installing a package

Installing and Configuring Inertia.js with Vue3 on Laravel 9

Livewire — An Easy Way To Build Dynamic Web Applications (Part 2)