how to add global function like (route => helper function => Ziggy)

How can I add a global method (helper function) like route

  "@inertiajs/inertia": "^0.11.0",
  "@inertiajs/inertia-vue3": "^0.6.0",
    "vue": "^3.2.37",
    "vite": "^3.0.0",

<script setup>
    import { Inertia } from "@inertiajs/inertia";
    Inertia.get(route('home')); // like route It does not need any import or inject
</script>

I want to add (__t('key') function) I tried the following

translation.js plugin

import { usePage } from '@inertiajs/inertia-vue3'

export default {
    install: (app) => {
    
        app.config.globalProperties.__t = (key, replacements = {}) => {
            let translation = ""


            translation = usePage().props.value.translations[key] || key;

            Object.keys(replacements).forEach(r => {
                translation = translation.replace(`:${r}`, replacements[r]);
            });
            return translation;

        }
        const r = (key, replacements = {}) => {
            let translation = ""


            translation = usePage().props.value.translations[key] || key;

            Object.keys(replacements).forEach(r => {
                translation = translation.replace(`:${r}`, replacements[r]);
            });
            return translation;

        }
        app.mixin({
            methods: {
                __t: r,
                __: r,
            },
        });
        app.__t = r;
        // app.prototype.$__t = r;
        app.provide('translate', r)
        app.provide('__t', r)
    }
}

app.js

.....other code
.use(translationPlugin)
...... other code

It only works in template It doesn't work inside a script So I use inject to make it work I want it to work without using inject, how can I do that?

rodrigo.pedra

3 years ago

Best Answer

Level 56

If you are installing Ziggy and using the provided @routes blade directive, then the route function is ~~added to the window object~~ (wrong as of this writing).

EDIT: Actually it is declared as a global function, but declaring functions on the global scope in JavaScript actually adds it to the global object, which in a browser is the window object.

You can try this by opening your developer tools and calling route() from there.

In a browser the only way to have global function available everywhere is like this, adding it to the window object (or to globalThis, which in a browser translates to the window object).

You can do the same, although I don't recommend it to avoid crowding the global/window object, or to avoid risking having your global helper function overridden by another script that runs after yours and creates a global function named the same.

But if you really want, you just have to do something like this:

import { usePage } from '@inertiajs/inertia-vue3'

export default {
    install: (app) => {
        // assign both to app and to window    
        window.__t = app.config.globalProperties.__t = (key, replacements = {}) => {
            // ...

What I would recommend is either importing manually (I actually prefer this for better three-shaking when compiling), or as you already figured out, using provide/inject.

2 likes

Please or to participate in this conversation.