0

i can't find a tutorial how to use package vuei18n-po in vue main.ts.

Yts documentation is small, and not well descriped.

enter image description here

https://www.npmjs.com/package/vuei18n-po.

I have never use something like this inside app initiation in vue, so it is realy hard.

it is my code:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "jquery";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import vuei18nPo from "vuei18n-po";

const app = createApp(App);
await vuei18nPo({
  po: ["django.po", "../../backend/locale/pl/LC_MESSAGES/django.po"],
  messagesFile: "generated/allInOne.json",
  messagesDir: "generated",
});

app.use(router);

app.mount("#app");

In my code i did not use plug it in option, because i wanted to generate it first.

EDIT I found this error on localhost

Module "fs" has been externalized for browser compatibility. Cannot access "fs.realpath" in client code.

I dont understand what this mean too.

kissu
  • 40,416
  • 14
  • 65
  • 133
Keso
  • 71
  • 9

1 Answers1

0

I don't think that this package is meant to be used for client side code regarding the error especially because po is a GUI-based solution.

The vuei18n-po is meant to transform some files locally with some JS backend like a Node.js app (this is the Usage part in package's README).

Then for the 2nd part (Plug it in), you could use the generated files with an i18n setup for VueJS with the regular Vue2 package for i18n: https://kazupon.github.io/vue-i18n/
Or the one for Vue3: https://vue-i18n.intlify.dev/

If it's not clear enough, feel free to read articles on how to setup i18n with Vue.

This is then a 2 step problem. I recommend that you start with a simple example of 2 small JSON files in Vue, then that you try to convert your .po files with the vuei18n-po package.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • This is a point. I want to generate a json file, and then use in vue i18n package. But i can't understand how to do it. In my opinion it works, something like that, when i start a server it will automaticaly check and generate a file ( if some changes appear). So if you know how to do it outside of main.ts, something like script sh, i would be greatful. – Keso Oct 27 '22 at 12:49
  • @Keso run it in a Node env `node my-script.sh`. Can de done at any `package.json` moment just before another script. – kissu Oct 27 '22 at 13:11
  • but how, what should i write to sh script, or maybe you know another solution to convert django po to json. Additionaly, you write about plug it in part, where this part ( like you said) is not important now, i want to generate it first, then next things. – Keso Nov 02 '22 at 08:58
  • The `plug it in` part [is here](https://github.com/avast/vuei18n-po#plug-it-in). Oh sorry, you don't need any `sh`, rather `js` so `node my-script.js` of course since it's a node JS script and not a shell-based one. Start by the NodeJS part, then you'll move into the next section of installing it for `vue-i18n` @Keso – kissu Nov 02 '22 at 14:03