Vue I18n Starter screenshot

Vue I18n Starter

Updated: 3 Sep 2021
94 Stars

A Vue.js starter project for i18n websites

Overview:

The vue-i18n-starter is a starter project for Vue.js that is specifically designed for i18n (internationalization) websites. It provides a solid foundation for creating multi-language websites with Vue.js.

Features:

  • Default language, supported languages, and fallback language setup: The project allows for easy configuration of the default language, supported languages, and fallback language. This allows for seamless language switching and handling of unsupported languages.
  • Route middleware for language redirection: The router setup includes a beforeEnter guard that calls the Trans.routeMiddleware. This ensures that the user is redirected to a valid language route if the current one is not supported. This prevents users from accessing unsupported language versions of the website, providing a better user experience.

Installation:

To install the vue-i18n-starter project, follow these steps:

  1. Clone the repository:
git clone <repository-url>
  1. Navigate to the project directory:
cd vue-i18n-starter
  1. Install the dependencies:
npm install
  1. Configure the languages and other settings:

    • Open the constants/trans.js file in the project.
    • Inside this file, you can set up the default language, supported languages, and fallback language according to your requirements.
  2. Set up the route middleware:

    • Open the router/index.js file in the project.
    • Locate the beforeEnter guard and ensure that it calls the Trans.routeMiddleware function. This will enable the language redirection for unsupported routes.
  3. Build and run the project:

npm run serve

Summary:

The vue-i18n-starter project is a highly useful starter project for creating multi-language websites with Vue.js. Its features include easy setup of default language and supported languages, as well as a built-in route middleware for language redirection. By following the installation guide, developers can quickly set up and start building their own i18n websites with Vue.js.