feat(vue): add i18n starter

This example overrides $app/index.js and provides new route creation as well as
beforeEach handlers to enable locale prefix and domain routing.

Author: zanmato

pnpm-lock.yaml

@@ -0,0 +1 @@
+dist

starters/vue-i18n/.eslintignore

@@ -0,0 +1,31 @@
+{
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+   },
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard',
+  ],
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'comma-dangle': ['error', 'always-multiline'],
+    'react/prop-types': 'off',
+    'import/no-absolute-path': 'off',
+  },
+  settings: {
+    react: {
+      version: '18.0',
+    },
+  },
+}

starters/vue-i18n/.eslintrc

@@ -0,0 +1,3 @@
+<br>
+
+The official **[@fastify/vue](https://github.com/fastify/fastify-vite/tree/dev/packages/fastify-vue)** i18n starter template.

starters/vue-i18n/README.md

@@ -0,0 +1,58 @@
+@import 'tailwindcss'; 
+
+:root {
+  --color-base: #f1f1f1;
+  --color-highlight: #ff80ff;
+}
+html {
+  background: #222;
+}
+#root {
+  width:  800px;
+  margin:  0 auto;
+  padding: 2em;
+  box-shadow: 5px 5px 30px rgba(0,0,0,0.4);
+  border-radius: 10px;
+  background-color: rgba(255, 255, 255, 0.1);
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--color-base);
+  margin-top: 60px;
+  & a {
+    color: var(--color-highlight);
+    text-decoration: none;
+    font-weight: bold;
+    border-bottom: 1px solid var(--color-highlight);
+    &:hover {
+      color: #ffde00;
+    }
+    &:active {
+      color: #eecf00
+    }
+  }
+  & p {
+    font-size: 1.2em;
+  }
+  & ul {
+    & li {
+      &:not(:last-child) {
+        margin-bottom: 0.5em;
+      }
+      break-inside: avoid;
+      font-size: 1em;
+    }
+  }
+  & code {
+    color: #ffde00;
+    font-weight: bold;
+    font-family: 'Consolas', 'Andale Mono', monospace;
+    font-size: 0.9em;
+  }
+  & img {
+    width: 14em;
+  }
+  & button {
+    margin: 0 0.5em;
+  }
+}

starters/vue-i18n/client/assets/logo.svg

@@ -0,0 +1,25 @@
+import { useRoute, useRouter } from 'vue-router';
+
+export function useI18nUtils() {
+  const router = useRouter();
+  const routes = router.getRoutes();
+  const route = useRoute();
+
+  const localePath = (path) => {
+    if ('name' in path) {
+      const nameWithLocalePrefix = `${route.meta.locale}__${path.name}`;
+      for (const route of routes) {
+        if (route.name === nameWithLocalePrefix) {
+          path.name = nameWithLocalePrefix;
+          break;
+        }
+      }
+    }
+
+    return path;
+  };
+
+  return {
+    localePath,
+  };
+}

starters/vue-i18n/client/base.css

@@ -0,0 +1,17 @@
+// The default export function runs exactly once on
+// the server and once on the client during the
+// first render, that is, it's not executed again
+// in subsequent client-side navigation.
+export default async (ctx) => {
+  // Set default params here for fetch/axios or similar XHR library
+  ctx.state.locale = ctx.meta.locale
+}
+
+// State initializer, must be a function called state
+// as this is a special context.js export and has
+// special processing, e.g., serialization and hydration
+export function state() {
+  return {
+    locale: 'sv',
+  }
+}

starters/vue-i18n/client/composables/i18n.js

@@ -0,0 +1,5 @@
+export default {
+  locales: ['en', 'sv', 'da'], // The first locale is the default
+  localePrefix: true,
+  localeDomains: {},
+}

starters/vue-i18n/client/context.js

@@ -0,0 +1,26 @@
+import { createI18n } from 'vue-i18n'
+
+const i18nConfig = createI18n({
+  locale: 'en',
+  legacy: false,
+  fallbackLocale: 'en',
+  messages: {
+    sv: {
+      message: {
+        welcome: "Välkommen till {'@'}fastify/vue!",
+      },
+    },
+    en: {
+      message: {
+        welcome: "Welcome to {'@'}fastify/vue!",
+      },
+    },
+    da: {
+      message: {
+        welcome: "Velkommen til {'@'}fastify/vue!",
+      },
+    },
+  },
+})
+
+export const i18n = i18nConfig