feat(vite-vue-app): enhance example app with TypeScript support, add vue-router integration, and improve localization handling

Author: aymericzip

docs/en/intlayer_with_vite+vue.md

@@ -413,7 +413,7 @@ useI18nHTMLAttributes();
 
 To use Intlayer in your Vue application, you need to register the plugin in your main file:
 
-```js fileName="src/main.js" codeFormat="javascript"
+```js fileName="src/main.ts"
 import { createApp } from "vue";
 import App from "./App.vue";
 import "./style.css";
@@ -547,104 +547,74 @@ npm install vue-router
 
 Then, create a router configuration that handles locale-based routing:
 
-```js fileName="src/router/index.js" codeFormat="javascript"
-import { createRouter, createWebHistory } from "vue-router";
-import { configuration, getPathWithoutLocale } from "intlayer";
-import HomeView from "../views/HomeView.vue";
-import AboutView from "../views/AboutView.vue";
+```js fileName="src/router/index.ts"
+import {
+  configuration,
+  getPathWithoutLocale,
+  localeMapper,
+  Locales,
+} from 'intlayer';
+import { createIntlayerClient } from 'vue-intlayer';
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from './views/home/HomeView.vue';
+import RootView from './views/root/Root.vue';
 
 // Get internationalization configuration
 const { internationalization, middleware } = configuration;
-const { locales, defaultLocale } = internationalization;
+const { defaultLocale } = internationalization;
 
-// Define your routes without locale prefixes
-const routes = [
+const routes = localeMapper((localizedData) => [
   {
-    path: "/",
-    name: "Home",
-    component: HomeView,
+    path: `/${localizedData.urlPrefix}/`,
+    name: `${localizedData.locale}-Root`,
+    component: RootView,
+    meta: {
+      locale: localizedData.locale,
+    },
   },
   {
-    path: "/about",
-    name: "About",
-    component: AboutView,
+    path: `/${localizedData.urlPrefix}/home`,
+    name: `${localizedData.locale}-Home`,
+    component: HomeView,
+    meta: {
+      locale: localizedData.locale,
+    },
   },
-];
-
-// Create a function to generate localized routes
-const generateLocalizedRoutes = () => {
-  let allRoutes = [];
-
-  // Add locale prefix to all routes except for default locale when prefixDefault is false
-  locales.forEach((locale) => {
-    // Skip default locale if prefixDefault is false
-    if (!middleware.prefixDefault && locale === defaultLocale) {
-      return;
-    }
-
-    const localizedRoutes = routes.map((route) => {
-      return {
-        ...route,
-        path: `/${locale}${route.path}`,
-        meta: {
-          ...route.meta,
-          locale,
-        },
-      };
-    });
-
-    allRoutes = [...allRoutes, ...localizedRoutes];
-  });
-
-  // If default locale is not prefixed, add routes without locale prefix
-  if (!middleware.prefixDefault) {
-    allRoutes = [
-      ...allRoutes,
-      ...routes.map((route) => ({
-        ...route,
-        meta: {
-          ...route.meta,
-          locale: defaultLocale,
-        },
-      })),
-    ];
-  }
-
-  return allRoutes;
-};
+]);
 
 // Create the router instance
-const router = createRouter({
+export const router = createRouter({
   history: createWebHistory(),
-  routes: generateLocalizedRoutes(),
+  routes: routes.flat(),
 });
 
 // Add navigation guard for locale handling
-router.beforeEach((to, from, next) => {
-  // Extract locale from the path or use default
-  const pathSegments = to.path.split("/").filter(Boolean);
-  const localeFromPath = pathSegments[0];
-
-  // Check if the path starts with a valid locale
-  if (locales.includes(localeFromPath)) {
-    // Valid locale in URL, proceed
-    next();
-  } else if (!middleware.prefixDefault) {
-    // No locale in URL, and we don't prefix default - assume default locale
+router.beforeEach((to, _from, next) => {
+  const client = createIntlayerClient();
+
+  const metaLocale = to.meta.locale as Locales | undefined;
+
+  if (metaLocale) {
+    // Reuse the locale defined in the route meta
+    client.setLocale(metaLocale);
     next();
   } else {
-    // No valid locale, redirect to the path with default locale
-    const pathWithoutLocale = getPathWithoutLocale(to.path);
-    next(`/${defaultLocale}${pathWithoutLocale}${to.search}`);
+    // Fallback: no locale in meta, possibly unmatched route
+    // Optional: handle 404 or redirect to default locale
+    client.setLocale(defaultLocale);
+
+    if (middleware.prefixDefault) {
+      next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
+    } else {
+      next(getPathWithoutLocale(to.path));
+    }
   }
 });
-
-export default router;
 ```
 
 Then, register the router in your main.js file:
 
-```js fileName="src/main.js" codeFormat="javascript"
+```js fileName="src/main.ts"
 import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
@@ -723,7 +693,7 @@ watch(
 
 When your application supports multiple languages, it's important to update the `<html>` tag's `lang` and `dir` attributes to match the current locale:
 
-```js fileName="src/composables/useI18nHTMLAttributes.js" codeFormat="javascript"
+```js fileName="src/composables/useI18nHTMLAttributes.ts"
 import { watch } from "vue";
 import { useLocale } from "vue-intlayer";
 import { getHTMLTextDir } from "intlayer";

examples/vite-vue-app/intlayer.config.ts

@@ -5,6 +5,7 @@ import { Locales, type IntlayerConfig } from 'intlayer';
 const config: IntlayerConfig = {
   internationalization: {
     locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
   },
   editor: {
     enabled: true,

examples/vite-vue-app/package.json

@@ -12,7 +12,8 @@
     "intlayer": "workspace:*",
     "vite-intlayer": "workspace:*",
     "vue": "^3.5.13",
-    "vue-intlayer": "workspace:*"
+    "vue-intlayer": "workspace:*",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@types/node": "^22.13.10",

examples/vite-vue-app/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

examples/vite-vue-app/src/App.vue

@@ -1,44 +1,10 @@
 <script setup>
-import { useIntlayer } from 'vue-intlayer';
-import HelloWorld from './components/HelloWorld.vue';
-import LocaleSwitcher from './components/LocaleSwitcher.vue';
 import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes';
-import { useLocale } from 'vue-intlayer';
-import { ref, watch } from 'vue';
-
-const { locale, availableLocales, setLocale } = useLocale();
-
-// Use the useIntlayer composable to access translations
-const content = useIntlayer('app');
 
 // Apply HTML language attributes based on current locale
 useI18nHTMLAttributes();
 </script>
 
 <template>
-  <div>
-    <LocaleSwitcher />
-    <a href="https://vite.dev" target="_blank">
-      <img src="/vite.svg" class="logo" :alt="content.viteLogo" />
-    </a>
-    <a href="https://vuejs.org/" target="_blank">
-      <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />
-    </a>
-  </div>
-  <HelloWorld :msg="content.title" />
+  <RouterView />
 </template>
-
-<style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>

examples/vite-vue-app/src/components/HelloWorld.vue renamed to examples/vite-vue-app/src/components/helloWorld/HelloWorld.vue

@@ -1,10 +1,14 @@
 import { createApp } from 'vue';
 import { installIntlayer } from 'vue-intlayer';
 import App from './App.vue';
+import { router } from './routes';
 import './style.css';
 
 const app = createApp(App);
 
+// Add the router to the app
+app.use(router);
+
 // Inject the provider at the top level
 installIntlayer(app); // provide the singleton instance
 

examples/vite-vue-app/src/components/helloWorld.content.ts renamed to examples/vite-vue-app/src/components/helloWorld/helloWorld.content.ts

@@ -0,0 +1,62 @@
+import {
+  configuration,
+  getPathWithoutLocale,
+  localeMapper,
+  Locales,
+} from 'intlayer';
+import { createIntlayerClient } from 'vue-intlayer';
+import { createRouter, createWebHistory } from 'vue-router';
+import HomeView from './views/home/HomeView.vue';
+import RootView from './views/root/Root.vue';
+
+// Get internationalization configuration
+const { internationalization, middleware } = configuration;
+const { defaultLocale } = internationalization;
+
+const routes = localeMapper((localizedData) => [
+  {
+    path: `${localizedData.urlPrefix}/`,
+    name: `${localizedData.locale}-Root`,
+    component: RootView,
+    meta: {
+      locale: localizedData.locale,
+    },
+  },
+  {
+    path: `${localizedData.urlPrefix}/home`,
+    name: `${localizedData.locale}-Home`,
+    component: HomeView,
+    meta: {
+      locale: localizedData.locale,
+    },
+  },
+]);
+
+// Create the router instance
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: routes.flat(),
+});
+
+// Add navigation guard for locale handling
+router.beforeEach((to, _from, next) => {
+  const client = createIntlayerClient();
+
+  const metaLocale = to.meta.locale as Locales | undefined;
+
+  if (metaLocale) {
+    // Reuse the locale defined in the route meta
+    client.setLocale(metaLocale);
+    next();
+  } else {
+    // Fallback: no locale in meta, possibly unmatched route
+    // Optional: handle 404 or redirect to default locale
+    client.setLocale(defaultLocale);
+
+    if (middleware.prefixDefault) {
+      next(`/${defaultLocale}${getPathWithoutLocale(to.path)}`);
+    } else {
+      next(getPathWithoutLocale(to.path));
+    }
+  }
+});