dasmikko/i18n-editor

A super simple editor for vue-18n by kazupon

i18n Editor

A super simple editor for vue-18n by kazupon

It is hosted on github pages

Styling is a bit broken, but functionally works.

I'm working on a complete revamped version of this, that ditches my format, and goes back to having seperate files

What is this?

The goal of the tool is to simplify editing the language files, and not having to hassle with multiple files.

Normally you would have multiple JSON files for each language, like da.json, en.json and so on.

This can be quite tedious to maintain, especially when you have a lot of entries, or even add a whole new language.

Here is an example of my format for language files:

{
  "common": {
    "logoff": {
      "da": "Log af",
      "en": "Logout"
    },
    "saveCurrentView": {
      "da": "Gem nuværende view",
      "en": "Save current view"
    },
    "search": {
      "da": "Søg",
      "en": "Search"
    }
  }
}

In my version, each key contains all the languages, making it easier to edit.

I've made a Gist where I show how to use it in your own Vue.js project.

Don't worry, it's very easy to use my format.

How to use

First time use

git clone [email protected]:dasmikko/i18n-editor.git
cd i18n-editor
npm install
npm run build
npm run serve

After use

npm run serve

How to update

Simply do a git pull and run:

npm install
npm run build

Then you can run the npm run serve as usual

i18n-editor's Issues

when renaming object key

If you want to renaming object key but you cancel and want to open again it will be empty and may cause some issues.

I fixed it in (RenameDialog.vue) by editting these lines.

starting line 54

  watch(
      dialogVisible,
      (val) => {
        if (!val) inputValue.value = props.currentPath[props.currentPath.length - 1]
      }
  )

TypeError: window.showOpenFilePicker is not a function

TypeError: window.showOpenFilePicker is not a function

Error appears on current build (even on https://i18n-editor.netlify.app/ ) on Firefox 94.0 Linux

Support for embedding i18n-editor in other Vue apps

Hi, this project looks awesome!

Was wondering if it's currently possible—or a goal of the project—to be able to embed this entire editor within another Vue app? i.e. npm install @dasmikko/i18n-editor?

I would be interested in a Figma Plugin context, using this editor as a Vue component and passing translation files to it and then saving the resulting translation data back into a Figma frame essentially. If the component usage is already possible, is there documentation on the props and setup methods for people who want to use this as a library component?