vue-automated-i18n

1.1.0 • Public • Published

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.

Add 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.

Add 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.

Add Field All

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.

Import Locales

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.

Export Locales

Package Sidebar

Install

npm i vue-automated-i18n

Weekly Downloads

3

Version

1.1.0

License

ISC

Unpacked Size

17.8 kB

Total Files

7

Last publish

Collaborators

  • trombonist76