https://github.com/uiwebkit/localize-vue-3x

Uni Localization example for Vue.js 3.x
https://github.com/uiwebkit/localize-vue-3x

custom-elements html localization localize translate translation uiwebkit uni-localization vue vue-cli vue3 vuejs web web-components widget

Last synced: about 1 month ago
JSON representation

Uni Localization example for Vue.js 3.x

• Host: GitHub
• URL: https://github.com/uiwebkit/localize-vue-3x
• Owner: uiwebkit
• License: mit
• Created: 2021-12-13T11:39:42.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-02-07T12:55:44.000Z (over 2 years ago)
• Last Synced: 2024-01-08T08:50:17.449Z (5 months ago)
• Topics: custom-elements, html, localization, localize, translate, translation, uiwebkit, uni-localization, vue, vue-cli, vue3, vuejs, web, web-components, widget
• Language: Vue
• Homepage: https://uiwebkit.com/wgt/loc/2
• Size: 476 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - localize-vue-3x - Uni Localization Vue 3 integration example. Customizable Language Menu widget built with Web Components. (Components & Libraries / Utilities)
• awesome-vue - localize-vue-3x - Uni Localization Vue 3 integration example. Customizable Language Menu widget built with Web Components. (Components & Libraries / Utilities)
• awesome-vue - localize-vue-3x - Uni Localization Vue 3 integration example. Customizable Language Menu widget built with Web Components. (Components & Libraries / Utilities)

README

        
# Uni Localization example for Vue.js 3.x

Check out demo [here](https://uiwebkit.github.io/localize-vue-3x/)

Check out our docs [here](https://uiwebkit.com/wgt/loc/2)

### Add to vue.config.js

```js

module.exports = {

    ...,

    chainWebpack: (config) => {

        config.module

            .rule("vue")

            .use("vue-loader")

            .tap((options) => ({

                ...options,

                compilerOptions: {

                    ...options.compilerOptions,

                    // treat any tag that starts with uni- as custom elements

                    isCustomElement: (tag) => tag.startsWith("uni-"),

                },

            }));

    },

    ...

};

```

### Add to index.html

```html

```

#### Place Uni Language Menu into the header of your web app. Specify the path to the language list JSON file (ex. lang-menu.json) or backend API endpoint

```html

```

#### Wrap your content with Uni Translate globally (for more convenience)

```html

```

#### or wrap your text content with Uni Translate locally (for better performance)

```html

localized content

```

#### localize partially

```html

text and (( partially localized ))

```

#### localize attributes

```html

  link

```

#### open and modify ./public/lang-menu.json and translation files into ./public/i18n/ folder