Windows 11 Hindi Typing

### Step 1: Add Hindi Keyboard
1. **Open Settings**: Press `Windows + I` to open the Settings app.
2. **Go to Time & Language**: In the Settings window, select **Time & Language**.
3. **Click on Language & Region**: In the left panel, click on **Language & Region**.
4. **Add Hindi Language**: Under the **Preferred Languages** section, click on the **Add a language** button.
– Search for "Hindi" in the list.
– Select **Hindi** and click **Next**.
– Install the language pack if prompted (you can skip optional language features like the text-to-speech or handwriting pack).
5. **Add Hindi Keyboard**: After installing the language, it will automatically include a default Hindi keyboard.

### Step 2: Switch Keyboard Layout
1. **Switch Input Method**: To switch between English and Hindi, press `Windows + Spacebar` to toggle between the installed languages.
2. Alternatively, you can click on the language bar in the taskbar (bottom right corner near the system clock) and select **Hindi**.

### Step 3: Start Typing in Hindi
Once you have switched to the Hindi keyboard, you can start typing in Hindi in any app (e.g., Word, Notepad, or your web browser). The layout will follow the **Devanagari Inscript** keyboard by default.

If you need a phonetic Hindi keyboard (where you type in English, but the output is Hindi), you can download additional keyboard layouts like **Google Input Tools** or search for a suitable phonetic keyboard online.

### Step 1: Install `vue-i18n`
First, you'll need to install the `vue-i18n` package if it's not already installed in your project.

npm install vue-i18n

### Step 2: Set Up `vue-i18n`
Once `vue-i18n` is installed, you can set up the localization in your Vue app.

#### 1. Create a new folder for locale messages:
In your `src` directory, create a folder named `locales` (or any name of your choice) and inside that folder, create the Spanish locale file (`es-ES.js` or `es.js`).

`src/locales/es.js`:

export default {
  welcomeMessage: 'Bienvenido a nuestra aplicación',
  hello: 'Hola',
  aboutUs: 'Sobre nosotros',
  contact: 'Contacto',
  // Add more translations here
};

#### 2. Configure `vue-i18n` in the Vue application
Now, create an `i18n` instance in the main `app.js` or `main.js` file, and add the Spanish locale.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createI18n } from 'vue-i18n'; // Import vue-i18n

import es from './locales/es'; // Import Spanish locale

// Define the messages (locales)
const messages = {
  'es-ES': es,  // Spanish (Spain) locale
};

// Create the i18n instance with locale options
const i18n = createI18n({
  locale: 'es-ES',  // Set the default locale to Spanish
  fallbackLocale: 'es-ES',  // Fallback locale if translations are missing
  messages,  // The translation messages
});

// Create the Vue app and attach i18n
const app = createApp(App);
app.use(i18n);
app.mount('#app');

### Step 3: Using Locale in Components
In any Vue component, you can now access the translations using the `$t` method.

<template>
  <div>
    <h1>{{ $t('welcomeMessage') }}</h1>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('aboutUs') }}</p>
    <p>{{ $t('contact') }}</p>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
};
</script>

### Step 4: Switching Locales (Optional)
If you want to support multiple languages and switch between them, you can set the `locale` dynamically.

<template>
  <div>
    <select v-model="selectedLocale" @change="changeLocale">
      <option value="es-ES">Español</option>
      <option value="en-US">English</option>
    </select>
    <h1>{{ $t('welcomeMessage') }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedLocale: 'es-ES',
    };
  },
  methods: {
    changeLocale() {
      this.$i18n.locale = this.selectedLocale;
    },
  },
};
</script>

In this example, the language will switch based on the user's selection.

### Step 5: Add Other Locales (Optional)
If you want to add additional languages like English, create a new locale file for it, say `en.js`, and add the corresponding translations. Update the `messages` object with the new locale.

import en from './locales/en'; // English locale
import es from './locales/es'; // Spanish locale

const messages = {
  'en-US': en,  // English locale
  'es-ES': es,  // Spanish locale
};

### Conclusion:
Now you have successfully set up the Spanish locale in your Vue.js app using `vue-i18n`. You can add more translations and switch between different languages as needed.