Frontend Localization documentation appears incorrect or incomplete

[pstephan1187]

I appreciate all the good work on Laravel Nova and I enjoy working with it. It helps us immensely at work. I am, however, running into a frustration. I am attempting to use multiple languages for an app and I am following the instructions located here: https://nova.laravel.com/docs/customization/localization.html#frontend. But I have a couple of issues:

1. The documentation is unclear on where/how to use the following code snippet:

   Nova::serving(function () {
       Nova::translations($pathToFile);
   });
   

   Where in the service provider should it go? The boot method? and what file should I use? I attempted the following but it doesn't appear to work. Am I supposed to call that translations method for every php translation file? And am I supposed to do if for all language files or just the language currently being requested?
2. Neither import { Localization } from 'laravel-nova' nor import { useLocalization } from 'laravel-nova' work. That package doesn't export either of those. Here is the error I am getting: Uncaught (in promise) TypeError: useLocalization is not a function

I am attempting this in my normal app frontend, not in a nova tool or custom field, if that makes a difference.
Thank you!

Ah! One more thing... The link found here is also broken/old:

[crynobone]

I am attempting this in my normal app frontend, not in a nova tool or custom field, if that makes a difference.
Thank you!

All above code are only available on Nova requests and will be missing on your normal app frontend.

[ekpono]

I have facing almost the same issue

When I import this according to the documentation

<script>
import { Localization } from 'laravel-nova'

export default {
    mixins: [Localization],

    name: "OriginalStep",
}
</script>

<style scoped>

</style>

I keep getting the below error. Any help

ERROR in ../../vendor/laravel/nova/resources/js/mixins/HandlesFieldAttachments.js 11:0-49
Module not found: Error: Can't resolve 'form-backend-validation' in 'system-name/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/HandlesFormRequest.js 1:0-49
Module not found: Error: Can't resolve 'form-backend-validation' in 'system-name/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/HandlesValidationErrors.js 1:0-49
Module not found: Error: Can't resolve 'form-backend-validation' in 'system-name/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/PreventsFormAbandonment.js 7:0-48
Module not found: Error: Can't resolve 'vuex' in '/system-name/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/PreventsFormAbandonment.js 8:0-45
Module not found: Error: Can't resolve '@inertiajs/inertia' in '/system-namevendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/PreventsModalAbandonment.js 7:0-48
Module not found: Error: Can't resolve 'vuex' in 'system-namevendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/packages.js 17:0-49
Module not found: Error: Can't resolve 'form-backend-validation' in 'system-name/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../node_modules/axios/lib/helpers/toFormData.js 128:73-79
Module not found: Error: Can't resolve 'buffer' in '/system-name/node_modules/axios/lib/helpers'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }

ERROR in ../../node_modules/axios/lib/helpers/toFormData.js
Cannot read properties of undefined (reading 'module')

webpack compiled with 9 errors

[marcobax]

For those who come across this discussion and want to use it in a nova-component tool, here's how to correctly use this functionality:

1. Create a (resource) tool
2. Open up nova-components/<your-tool>/src/ToolServiceProvider.php
3. Create the directory nova-components/<your-tool>/resources/lang
4. Create a file en.json into the new directory
5. Add below code

Nova::translations(__DIR__.'/../resources/lang/en.json');
or when using multiple locales
Nova::translations(__DIR__.'/../resources/lang/' . app()->getLocale() . '.json');

Now add a translation key and value into the en.json file.

{
    "My translation key": "My value"
}

Open up your Tool.vue file in the resources/js/components directory and use the __() helper as such:

<template>
  <div>
    {{ __('My translation key') }}
  </div>
</template>