chore: add vue ssr example app

.github/workflows/publish-examples-check.yml

@@ -21,6 +21,7 @@ jobs:
             'ngx',
             'react-i18next',
             'vue-i18next',
+            'vue-ssr',
           ]
     runs-on: ubuntu-latest
     steps:

.github/workflows/publish-examples.yml

@@ -22,6 +22,7 @@ jobs:
             'ngx',
             'react-i18next',
             'vue-i18next',
+            'vue-ssr',
           ]
     runs-on: ubuntu-latest
     steps:

.npmrc

@@ -1,6 +1,6 @@
 strict-peer-dependencies=false
 store-dir=.pnpm-store
-auto-install-peers = true
+auto-install-peers=true
 
 # jest completely not working without this
 shamefully-hoist=true

e2e/cypress/common/namespacesTest.ts

@@ -12,12 +12,13 @@ export const namespacesTest = (
   describe('translation methods test', () => {
     before(() => {
       cy.visit(url);
-      cy.intercept('GET', '*', (req) => {
-        req.on('response', (res) => {
-          res.delay = 500;
+      if (!options?.skipLoading) {
+        cy.intercept('GET', '*', (req) => {
+          req.on('response', (res) => {
+            res.delay = 500;
+          });
         });
-      });
-
+      }
       cy.contains('Load more', { timeout: 30_000 }).click();
       if (!options?.skipLoading) {
         cy.contains('Loading namespace...').should('exist');

e2e/cypress/common/translationMethodsTest.ts

@@ -19,10 +19,9 @@ export const translationMethodsTest = (
         // when translations are already in cache
         describe(`for language ${language} (run ${run})`, () => {
           before(() => {
+            cy.get('.tiles').should('be.visible');
+            cy.wait(500);
             cy.get('.lang-selector').select(language);
-            Object.values(texts).forEach((text) => {
-              getElement(text.text, text.testId).should('exist');
-            });
           });
 
           texts.forEach((text) => {

e2e/cypress/e2e/vue-ssr/dev.cy.ts

@@ -0,0 +1,44 @@
+import { exampleAppTest } from '../../common/exampleAppTest';
+import { translationMethodsTest } from '../../common/translationMethodsTest';
+import { exampleAppDevTest } from '../../common/exampleAppDevTest';
+import { namespacesTest } from '../../common/namespacesTest';
+
+context('Vue app in dev mode', () => {
+  const url = 'http://localhost:8123';
+  const translationMethods = url + '/translation-methods';
+  exampleAppTest(url);
+  translationMethodsTest(translationMethods, {
+    en: [
+      { text: 'This is default', count: 2 },
+      {
+        text: 'This is a key',
+        count: 5,
+      },
+      { text: 'This is key with params value value2', count: 3 },
+    ],
+    de: [
+      { text: 'This is default', count: 2 },
+      {
+        text: 'Dies ist ein Schlüssel',
+        count: 5,
+      },
+      {
+        text: 'Dies ist ein Schlüssel mit den Parametern Wert value2',
+        count: 3,
+      },
+    ],
+  });
+
+  namespacesTest(translationMethods, {
+    en: [
+      { text: 'This is a key in namespace', count: 2 },
+      { text: 'This is a key', count: 1 },
+    ],
+    cs: [
+      { text: 'Toto je klíč v namespace', count: 2 },
+      { text: 'Toto je klíč', count: 1 },
+    ],
+  });
+
+  exampleAppDevTest(url, { noLoading: true });
+});

e2e/cypress/e2e/vue-ssr/prod.cy.ts

@@ -0,0 +1,41 @@
+import { exampleAppTest } from '../../common/exampleAppTest';
+import { namespacesTest } from '../../common/namespacesTest';
+import { translationMethodsTest } from '../../common/translationMethodsTest';
+
+context('Vue app in prod mode', () => {
+  const url = 'http://localhost:8124';
+  const translationMethods = url + '/translation-methods';
+  exampleAppTest(url);
+  translationMethodsTest(translationMethods, {
+    en: [
+      { text: 'This is default', count: 2 },
+      {
+        text: 'This is a key',
+        count: 5,
+      },
+      { text: 'This is key with params value value2', count: 3 },
+    ],
+    de: [
+      { text: 'This is default', count: 2 },
+      {
+        text: 'Dies ist ein Schlüssel',
+        count: 5,
+      },
+      {
+        text: 'Dies ist ein Schlüssel mit den Parametern value value2',
+        count: 3,
+      },
+    ],
+  });
+
+  namespacesTest(translationMethods, {
+    en: [
+      { text: 'This is a key in namespace', count: 2 },
+      { text: 'This is a key', count: 1 },
+    ],
+    cs: [
+      { text: 'Toto je klíč v namespace', count: 2 },
+      { text: 'Toto je klíč', count: 1 },
+    ],
+  });
+});

scripts/e2eRunner/config.ts

@@ -35,11 +35,6 @@ export const config: Config = {
     },
     next: {
       commandLineServices: {
-        prod: {
-          command: 'npm run start -- -p 8107',
-          cwd: path.resolve(__dirname, '../../testapps/next/'),
-          waitForOutput: 'Ready in ',
-        },
         dev: {
           command: 'npm run dev -- -p 8106',
           cwd: path.resolve(__dirname, '../../testapps/next/'),
@@ -51,6 +46,11 @@ export const config: Config = {
               'examples-admin-imported-project-implicit',
           },
         },
+        prod: {
+          command: 'npm run start -- -p 8107',
+          cwd: path.resolve(__dirname, '../../testapps/next/'),
+          waitForOutput: 'Ready in ',
+        },
       },
     },
     'next-internal': {
@@ -149,11 +149,6 @@ export const config: Config = {
     },
     'next-app': {
       commandLineServices: {
-        prod: {
-          command: 'npm run start -- -p 8121',
-          cwd: path.resolve(__dirname, '../../testapps/next-app/'),
-          waitForOutput: 'Ready in ',
-        },
         dev: {
           command: 'npm run dev -- -p 8122',
           cwd: path.resolve(__dirname, '../../testapps/next-app/'),
@@ -165,6 +160,30 @@ export const config: Config = {
               'examples-admin-imported-project-implicit',
           },
         },
+        prod: {
+          command: 'npm run start -- -p 8121',
+          cwd: path.resolve(__dirname, '../../testapps/next-app/'),
+          waitForOutput: 'Ready in ',
+        },
+      },
+    },
+    'vue-ssr': {
+      commandLineServices: {
+        dev: {
+          command: 'npm run dev -- --port 8123',
+          cwd: path.resolve(__dirname, '../../testapps/vue-ssr/'),
+          environment: {
+            VITE_APP_TOLGEE_API_URL: 'http://localhost:8202',
+            VITE_APP_TOLGEE_API_KEY: 'examples-admin-imported-project-implicit',
+          },
+        },
+        prod: {
+          cwd: path.resolve(__dirname, '../../testapps/vue-ssr/'),
+          command: 'npm run start',
+          environment: {
+            PORT: '8124',
+          },
+        },
       },
     },
   },

testapps/vue-ssr/README.md

@@ -0,0 +1,31 @@
+# Example application of using vike-vue with Tolgee
+
+[<img src="https://raw.githubusercontent.com/tolgee/documentation/main/tolgee_logo_text.svg" alt="Tolgee" width="100" />](https://tolgee.io)
+
+This application is using vike. To learn more about Tolgee, visit [https://tolgee.io](https://tolgee.io).
+
+## To run the app in dev mode
+
+To install dependencies, run:
+
+    npm install
+
+To run the app in dev mode with in-context translating mode:
+
+1. Create a project on [Tolgee Cloud](https://app.tolgee.io) or use
+   self-hosted [Tolgee Server](https://github.com/tolgee/server).
+2. Generate an API-KEY
+3. Copy file `.env` to `.env.development.local`
+4. Set `VITE_APP_TOLGEE_API_KEY` to API key obtained in previous step
+5. Run `npm run dev`
+6. Have fun
+
+## To run the app in production mode
+
+To run app in production mode:
+
+    npm run start
+
+---
+
+This repository is automatically re-published from [Tolgee JS monorepo](https://github.com/tolgee/tolgee-js).

testapps/vue-ssr/components/Todos.vue

@@ -54,45 +54,50 @@
 </template>
 
 <script lang="tsx">
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
 import { T } from '@tolgee/vue';
 
 import Navbar from './Navbar.vue';
+import { onMounted } from 'vue';
 
 export default defineComponent({
   components: { T, Navbar },
   name: 'TodosComponent',
-  data() {
-    let items: string[] | undefined = undefined;
-    try {
-      items = JSON.parse(
-        localStorage.getItem('tolgee-example-app-items') || ''
-      );
-    } catch (e) {
-      console.error(
-        'Something went wrong while parsing stored items. Items are reset.'
-      );
-      if (typeof localStorage !== 'undefined') {
-        localStorage.removeItem('tolgee-example-app-items');
+  setup() {
+    const newItemValue = ref('');
+    let items = ref<string[]>([]);
+
+    onMounted(() => {
+      let result = [];
+      try {
+        result = JSON.parse(
+          localStorage.getItem('tolgee-example-app-items') || ''
+        );
+      } catch (e) {
+        console.error(
+          'Something went wrong while parsing stored items. Items are reset.'
+        );
+        if (typeof localStorage !== 'undefined') {
+          localStorage.removeItem('tolgee-example-app-items');
+        }
       }
-    }
-    return {
-      newItemValue: '',
-      items: items?.length
-        ? items
-        : ['Passport', 'Maps and directions', 'Travel guide'],
-    };
+      items.value = result.length
+        ? result
+        : ['Passport', 'Maps and directions', 'Travel guide'];
+    });
+
+    return { newItemValue, items };
   },
   methods: {
     onAdd() {
-      if (this.$data.newItemValue) {
-        this.$data.items.push(this.$data.newItemValue);
+      if (this.newItemValue) {
+        this.items.push(this.newItemValue);
         this.updateLocalStorage();
-        this.$data.newItemValue = '';
+        this.newItemValue = '';
       }
     },
     onDelete(index: number) {
-      this.$data.items = this.$data.items.filter((_, i) => i !== index);
+      this.items = this.items.filter((_, i) => i !== index);
       this.updateLocalStorage();
     },
     updateLocalStorage() {

testapps/vue-ssr/components/TranslationMethods.vue

@@ -113,18 +113,22 @@
       </div>
     </div>
 
-    <div v-if="!revealed" class="load-more-section">
+    <div v-if="!revealed && loaded" class="load-more-section">
       <button class="button" @click="revealed = true">Load more</button>
     </div>
-    <Namespaces v-else />
+    <Namespaces v-if="revealed" />
   </main>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { T } from '@tolgee/vue';
 import Navbar from './Navbar.vue';
 import Namespaces from './Namespaces.vue';
 
 const revealed = ref(false);
+const loaded = ref(false);
+onMounted(() => {
+  loaded.value = true;
+});
 </script>

testapps/vue-ssr/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "develop": "vite",
+    "build": "tsc --noEmit && vite build",
     "start": "node ./server"
   },
   "dependencies": {