vue-automated-i18n

📚 Introduction

This repository automates Vue SFC locales in the i18n custom block, which processes importing locales from JSON, exporting locales to JSON, adding new fields, or adding new locale options.

⚒️ Used Technologies

• @vue/compiler-sfc
• Yargs
• Prettier

Getting Started

For using the project follow the steps below

Installation

You can clone the project with the following URL.

git clone https://github.com/trombonist76/vue-automated-i18n.git

yarn

Script Usages

A. Adding New Locale

Script: yarn add-locale

Example: yarn add-locale --localeKey az --extendKey tr

Shorthand yarn add-locale -l az -e tr

npx npx -p vue-automated-i18n add-locale add-locale -l az -e tr -d src/components

| Builder Opts. | Alias | Default | Required | Example | Description | | -------------- | -------- | ----------------- | --------- | -------------- | ------------------------------------------------------------------------------------ | | localeKey | -l | none | true | tr | New locale option to be added to the component. | | extendKey | -e | none | false | en | The locale whose translations will be transferred to new locale. | | dir | -d | src/components | false | - | The components directory or path that will be added to new locale. |

B. Adding New Field to Component

NOTE: You can add nested fields with using (.) dot. Ex: this.is.nested { this: { is: { nested: givenValue }}}

Script: yarn add-field

Example: `yarn add-field --component Button --fieldName submit --fieldValue OK -d src/components``

Nested - Example: yarn add-field --component Header --fieldName title.header --fieldValue "Header Title"

Shorthand yarn add-field -c Button -f submit -v OK

npx npx -p vue-automated-i18n add-field add-field -f submit -v OK -d src/components

| Builder Opts. | Alias | Default | Required | Example | Description | | -------------- | -------- | ----------------- | --------- | -------------- | ------------------------------------------------------------------------------------ | | component | -c | none | true | Button | The component name, without the '.vue', to which a new field will be added. | | fieldName | -f | none | true | newField | The field name to be added to component as a object key. | | fieldValue | -v | none | true | hi, im value | The field value of the new field to be added to component as a object value. | | dir | -d | src/components | false | src/components/Modal | The component directory that will be added to new field. |

C. Adding New Field to All Components

NOTE: You can add nested fields with using (.) dot. Ex: this.is.nested { this: { is: { nested: givenValue }}}

Script: yarn add-field-all

Example: yarn add-field-all --fieldName submit --fieldValue OK --dir src/components

Nested - Example: yarn add-field-all --fieldName title.header --fieldValue "Header Title" --dir src/components

Shorthand yarn add-field-all -f submit -v OK -d src/components

npx npx -p vue-automated-i18n add-field-all add-field-all -f submit -v OK -d src/components

| Builder Opts. | Alias | Default | Required | Example | Description | | -------------- | -------- | ----------------- | --------- | -------------- | ------------------------------------------------------------------------------------ | | fieldName | -f | none | true | newField | The field name to be added to component as a object key. | | fieldValue | -v | none | true | hi, im value | The field value of the new field to be added to component as a object value. | | dir | -d | src/components | false | src/views | The components directory or path that will be added to new field. |

D. Importing locales from JSON

NOTE: The JSON file must be like this:

{
	"src/components/Button": {
		"en": {
			"submit": "OK"
		},
		"tr": {
			"submit": "tamam"
		},
	},
	"src/components/Header": {
		"en": {
			"title": "Header Title"
		},
		"tr": {
			"title": "Header Başlığı"
		},
	}
	// and other files
}

Script: yarn import-locales

Example: yarn import-locales --importFilePath src/imports/locales.json --dir src/components

Shorthand yarn import-locales -p src/imports/locales.json -d src/components

npx npx -p vue-automated-i18n import-locales import-locales -p src/imports/locales.json -d src/components

| Builder Opts. | Alias | Default | Required | Example | Description | | -------------- | -------- | ----------------- | --------- | ------------------------- | ------------------------------------------------------------------------------------ | | importFilePath | -p | none | true | import/locales.json | The path of JSON file to be imported its translations to components. | | dir | -d | src/components | false | src/views | The components directory or path that will be added to locales from JSON. |

E. Exporting locales from JSON

Script: yarn export-locales

Example: yarn export-locales --exportFilePath src/exports/locales.json --dir src/components

Shorthand yarn export-locales -p src/exports/locales.json -d src/components

npx npx -p vue-automated-i18n export-locales export-locales -p src/exports/locales.json -d src/components

| Builder Opts. | Alias | Default | Required | Example | Description | | -------------- | -------- | ----------------- | --------- | ---------------------- | ------------------------------------------------------------------------------------ | | exportFilePath | -p | translations.json | false | export/locales.json | The path of JSON file to be exported components translations. | | dir | -d | src/components | false | src/views | The components directory or path that will be added to locales from JSON. | | component | -c | none | false | Header | The specific component name, without the '.vue', to which its translations will be exported. | | nested | -n | true | false | boolean ex: false | Search components in nested folder structure. |