From 22d5730cc7a5c19e431a12af72091c61c524e8c0 Mon Sep 17 00:00:00 2001
From: Kenneth Rasmussen <kentora@kentora.dk>
Date: Thu, 14 Jan 2021 22:45:59 +0100
Subject: [PATCH] Translations + danish

---
 .vscode/settings.json                         |   7 +-
 frontend/package-lock.json                    |  48 +++++++
 frontend/package.json                         |   6 +-
 frontend/src/components/AddRecipe.vue         |   9 +-
 frontend/src/components/Admin/Admin.vue       |  13 +-
 frontend/src/components/Admin/Backup.vue      |  23 ++--
 frontend/src/components/Admin/Migration.vue   |  13 +-
 frontend/src/components/Admin/SFTP.vue        |   2 +-
 frontend/src/components/Admin/Theme.vue       |  30 +++--
 .../components/Admin/ThemeUI/ColorPicker.vue  |   6 +-
 .../src/components/Admin/ThemeUI/NewTheme.vue |   6 +-
 frontend/src/components/Admin/Users.vue       |   2 +-
 frontend/src/components/Admin/Webhooks.vue    |  16 +--
 .../components/Admin/Webhooks/TimePicker.vue  |   6 +-
 frontend/src/components/MealPlan/EditPlan.vue |   4 +-
 .../src/components/MealPlan/MealPlanner.vue   |   6 +-
 .../src/components/MealPlan/MealSelect.vue    |  12 +-
 frontend/src/components/MealPlan/NewMeal.vue  |  10 +-
 frontend/src/components/MealPlan/ThisWeek.vue |   2 +-
 frontend/src/components/Page404.vue           |   4 +-
 .../src/components/RecipeEditor/BulkAdd.vue   |   9 +-
 .../components/RecipeEditor/DetailsView.vue   |  10 +-
 .../components/RecipeEditor/EditRecipe.vue    |  24 ++--
 .../components/RecipeEditor/ViewRecipe.vue    |  14 +--
 frontend/src/components/UI/Login.vue          |  12 +-
 frontend/src/components/UI/Menu.vue           |  46 ++++---
 frontend/src/components/UI/RecipeCard.vue     |   2 +-
 frontend/src/components/UI/Search.vue         |   6 +-
 frontend/src/components/UI/SnackBar.vue       |   2 +-
 frontend/src/i18n.js                          |  23 ++++
 frontend/src/locales/da.json                  | 119 ++++++++++++++++++
 frontend/src/locales/en.json                  | 119 ++++++++++++++++++
 frontend/src/main.js                          |   4 +-
 frontend/vue.config.js                        |  10 +-
 34 files changed, 469 insertions(+), 156 deletions(-)
 create mode 100644 frontend/src/i18n.js
 create mode 100644 frontend/src/locales/da.json
 create mode 100644 frontend/src/locales/en.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 94282cdd5..518734931 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,5 +12,10 @@
   "python.testing.promptToConfigure": false,
   "cSpell.enableFiletypes": [
     "!python"
-  ]
+  ],
+  "i18n-ally.localesPaths": "frontend/src/locales",
+  "i18n-ally.enabledFrameworks": [
+    "vue"
+  ],
+  "i18n-ally.keystyle": "nested"
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b18d4febd..4443f1f47 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1089,6 +1089,16 @@
         "postcss": "^7.0.0"
       }
     },
+    "@intlify/vue-i18n-loader": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-loader/-/vue-i18n-loader-1.0.0.tgz",
+      "integrity": "sha512-y7LlpKEQ01u7Yq14l4VNlbFYEHMmSEH1QXXASOMWspj9ZcIdCebhhvHCHqk5Oy5Epw3PtoxyRJNpb6Wle5udgA==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.13.1",
+        "json5": "^2.1.1"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",
@@ -11028,6 +11038,39 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1603223959931&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-cli-plugin-i18n": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz",
+      "integrity": "sha512-sLo6YzudaWgn5dOMvrKixE5bb/onYGxcxm+0YexqoOx0QtR+7hZ/P5WPFBMM9v/2i1ec2YYe2PvKTBel7KE+tA==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.0",
+        "deepmerge": "^4.2.0",
+        "dotenv": "^8.2.0",
+        "flat": "^5.0.0",
+        "rimraf": "^3.0.0",
+        "vue": "^2.6.11",
+        "vue-i18n": "^8.17.0",
+        "vue-i18n-extract": "1.0.2"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
     "vue-cli-plugin-vuetify": {
       "version": "2.0.8",
       "resolved": "https://registry.npmjs.org/vue-cli-plugin-vuetify/-/vue-cli-plugin-vuetify-2.0.8.tgz",
@@ -11107,6 +11150,11 @@
       "resolved": "https://registry.npmjs.org/vue-html-to-paper/-/vue-html-to-paper-1.3.1.tgz",
       "integrity": "sha512-5IdAPUgStfpVHfcG6nXD0FbUB1onWpvwVD+OZ00jJpy3qaRPkaGD7fFIvYgBB9YPkr0VK065LayEvmGmkkfhaQ=="
     },
+    "vue-i18n": {
+      "version": "8.22.3",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.3.tgz",
+      "integrity": "sha512-Vhyx7sZEmmW/aZLkzSlXei08Rv3hTondx4J9wbOjnThocTIK1QiXV6QRdT4BTnhT24JixDSf6kGkxqCXSaJ3Jw=="
+    },
     "vue-loader": {
       "version": "15.9.5",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.5.tgz?cache=0&sync_timestamp=1605670886675&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9e33391e2..d9c1bbf82 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
     "axios": "^0.21.0",
@@ -15,11 +16,13 @@
     "vue": "^2.6.11",
     "vue-cookies": "^1.7.4",
     "vue-html-to-paper": "^1.3.1",
+    "vue-i18n": "^8.22.3",
     "vue-router": "^3.4.9",
     "vuetify": "^2.3.21",
     "vuex": "^3.6.0"
   },
   "devDependencies": {
+    "@intlify/vue-i18n-loader": "^1.0.0",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
@@ -28,6 +31,7 @@
     "eslint-plugin-vue": "^6.2.2",
     "sass": "^1.30.0",
     "sass-loader": "^8.0.0",
+    "vue-cli-plugin-i18n": "~1.0.1",
     "vue-cli-plugin-vuetify": "^2.0.8",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.3.0"
diff --git a/frontend/src/components/AddRecipe.vue b/frontend/src/components/AddRecipe.vue
index da53c0e0a..892cf6a58 100644
--- a/frontend/src/components/AddRecipe.vue
+++ b/frontend/src/components/AddRecipe.vue
@@ -2,16 +2,15 @@
   <div class="text-center">
     <v-dialog v-model="addRecipe" width="650" @click:outside="reset">
       <v-card :loading="processing">
-        <v-card-title class="headline"> From URL </v-card-title>
+        <v-card-title class="headline">{{ $t('new-recipe.from-url') }} </v-card-title>
 
         <v-card-text>
           <v-form>
-            <v-text-field v-model="recipeURL" label="Recipe URL"></v-text-field>
+            <v-text-field v-model="recipeURL" :label="$t('new-recipe.recipe-url')"></v-text-field>
           </v-form>
 
           <v-alert v-if="error" color="red" outlined type="success">
-            Looks like there was an error parsing the URL. Check the log and
-            debug/last_recipe.json to see what went wrong.
+            {{ $t('new-recipe.error-message') }}
           </v-alert>
         </v-card-text>
 
@@ -19,7 +18,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="primary" text @click="createRecipe"> Submit </v-btn>
+          <v-btn color="primary" text @click="createRecipe"> {{ $t('general.submit') }} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/frontend/src/components/Admin/Admin.vue b/frontend/src/components/Admin/Admin.vue
index ed6948c14..dc314c046 100644
--- a/frontend/src/components/Admin/Admin.vue
+++ b/frontend/src/components/Admin/Admin.vue
@@ -1,26 +1,23 @@
 <template>
   <v-container>
-    <v-alert v-if="newVersion" color="green" type="success" outlined>
-      A New Version of Mealie is Avaiable,
-      <a href="https://github.com/hay-kot/mealie" class="green--text">
-        Visit the Repo
-      </a>
+    <v-alert v-if="newVersion" color="green" type="success" outlined v-html="$t('settings.new-version-available', { aContents: 'href=\'https://github.com/hay-kot/mealie\' class=\'green--text\''})">
+      
     </v-alert>
     <Theme />
     <Backup />
     <Webhooks />
     <Migration />
     <p class="text-center my-2">
-      Version: {{ version }} | Latest: {{ latestVersion }} ·
+      {{$t('settings.version-latest', {current: version, latest: latestVersion})}} ·
       <a href="https://hay-kot.github.io/mealie/" target="_blank">
-        Explore the Docs
+        {{$t('settings.explore-the-docs')}}
       </a>
       ·
       <a
         href="https://hay-kot.github.io/mealie/2.1%20-%20Contributions/"
         target="_blank"
       >
-        Contribute
+        {{$t('settings.contribute')}}
       </a>
     </p>
   </v-container>
diff --git a/frontend/src/components/Admin/Backup.vue b/frontend/src/components/Admin/Backup.vue
index e986a4385..2cbb86f0c 100644
--- a/frontend/src/components/Admin/Backup.vue
+++ b/frontend/src/components/Admin/Backup.vue
@@ -1,34 +1,29 @@
 <template>
   <v-card :loading="backupLoading" class="mt-3" min-height="410px">
     <v-card-title class="secondary white--text">
-      Backup and Exports
+      {{$t('settings.backup-and-exports')}}
     </v-card-title>
 
     <v-card-text>
       <p>
-        Backups are exported in standard JSON format along with all the images
-        stored on the file system. In your backup folder you'll find a .zip file
-        that contains all of the recipe JSON and images from the database.
-        Additionally, if you selected a markdown file, those will also be stored
-        in the .zip file. To import a backup, it must be located in your backups
-        folder. Automated backups are done each day at 3:00 AM.
+        {{$t('settings.backup-info')}}
       </p>
 
       <v-row dense align="center">
         <v-col dense cols="12" sm="12" md="4">
-          <v-text-field v-model="backupTag" label="Backup Tag"></v-text-field>
+          <v-text-field v-model="backupTag" :label="$t('settings.backup-tag')"></v-text-field>
         </v-col>
         <v-col cols="12" sm="12" md="3">
           <v-combobox
             auto-select-first
-            label="Markdown Template"
+            :label="$t('settings.markdown-template')"
             :items="availableTemplates"
             v-model="selectedTemplate"
           ></v-combobox>
         </v-col>
         <v-col dense cols="12" sm="12" md="2">
           <v-btn block color="accent" @click="createBackup" width="165">
-            Backup Recipes
+            {{$t('settings.backup-recipes')}}
           </v-btn>
         </v-col>
       </v-row>
@@ -38,22 +33,22 @@
           <v-form ref="form">
             <v-combobox
               auto-select-first
-              label="Select a Backup for Import"
+              :label="$t('settings.select-a-backup-for-import')"
               :items="availableBackups"
               v-model="selectedBackup"
-              :rules="[(v) => !!v || 'Backup Selection is Required']"
+              :rules="[(v) => !!v || $t('settings.backup-selection-is-required')]"
               required
             ></v-combobox>
           </v-form>
         </v-col>
         <v-col dense cols="12" sm="12" md="3" lg="2">
           <v-btn block color="accent" @click="importBackup">
-            Import Backup
+            {{$t('settings.import-backup')}}
           </v-btn>
         </v-col>
         <v-col dense cols="12" sm="12" md="2" lg="2">
           <v-btn block color="error" @click="deleteBackup">
-            Delete Backup
+            {{$t('settings.delete-backup')}}
           </v-btn>
         </v-col>
       </v-row>
diff --git a/frontend/src/components/Admin/Migration.vue b/frontend/src/components/Admin/Migration.vue
index f792abcce..a21091268 100644
--- a/frontend/src/components/Admin/Migration.vue
+++ b/frontend/src/components/Admin/Migration.vue
@@ -1,26 +1,25 @@
 <template>
   <v-card :loading="loading">
     <v-card-title class="secondary white--text mt-1">
-      Recipe Migration
+      {{$t('migration.recipe-migration')}}
     </v-card-title>
     <v-card-text>
       <p>
-        Currently Chowdown via public Repo URL is the only supported type of
-        migration
+        {{$t('migration.currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration')}}
       </p>
       <v-form>
         <v-row dense align="center">
           <v-col cols="12" md="5" sm="5">
-            <v-text-field v-model="repo" label="Chowdown Repo URL">
+            <v-text-field v-model="repo" :label="$t('migration.chowdown-repo-url')">
             </v-text-field>
           </v-col>
           <v-col cols="12" md="4" sm="5">
-            <v-btn text color="info" @click="importRepo"> Migrate </v-btn>
+            <v-btn text color="info" @click="importRepo"> {{$t('migration.migrate')}} </v-btn>
           </v-col>
         </v-row>
       </v-form>
       <v-alert v-if="failedRecipes[1]" outlined dense type="error">
-        <h4>Failed Recipes</h4>
+        <h4>{{$t('migration.failed-recipes')}}</h4>
         <v-list dense>
           <v-list-item v-for="fail in this.failedRecipes" :key="fail">
             {{ fail }}
@@ -28,7 +27,7 @@
         </v-list>
       </v-alert>
       <v-alert v-if="failedImages[1]" outlined dense type="error">
-        <h4>Failed Images</h4>
+        <h4>{{$t('migration.failed-images')}}</h4>
         <v-list dense>
           <v-list-item v-for="fail in this.failedImages" :key="fail">
             {{ fail }}
diff --git a/frontend/src/components/Admin/SFTP.vue b/frontend/src/components/Admin/SFTP.vue
index bc90342e1..bcc23a30a 100644
--- a/frontend/src/components/Admin/SFTP.vue
+++ b/frontend/src/components/Admin/SFTP.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <v-card-title class="card-title mt-1"> SFTP Settings </v-card-title>
+    <v-card-title class="card-title mt-1"> {{$t('settings.sftp-settings')}} </v-card-title>
   </v-card>
 </template>
 
diff --git a/frontend/src/components/Admin/Theme.vue b/frontend/src/components/Admin/Theme.vue
index 392f58a9a..80c57c33c 100644
--- a/frontend/src/components/Admin/Theme.vue
+++ b/frontend/src/components/Admin/Theme.vue
@@ -1,18 +1,16 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text"> Theme Settings </v-card-title>
+    <v-card-title class="secondary white--text"> {{$t('settings.theme.theme-settings')}} </v-card-title>
     <v-card-text>
       <p>
-        Select a theme from the dropdown or create a new theme. Note that the
-        default theme will be served to all users who have not set a theme
-        preference.
+        {{$t('settings.theme.select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference')}}
       </p>
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
           <v-switch
             v-model="darkMode"
             inset
-            label="Dark Mode"
+            :label="$t('settings.theme.dark-mode')"
             class="my-n3"
             @change="toggleDarkMode"
           ></v-switch>
@@ -20,14 +18,14 @@
         <v-col cols="12" md="4" sm="3">
           <v-form ref="form" lazy-validation>
             <v-select
-              label="Saved Color Schemes"
+              :label="$t('settings.theme.saved-color-schemes')"
               :items="availableThemes"
               item-text="name"
               item-value="colors"
               return-object
               v-model="selectedScheme"
               @change="themeSelected"
-              :rules="[(v) => !!v || 'Theme is required']"
+              :rules="[(v) => !!v || $t('settings.theme.theme-is-required')]"
               required
             >
             </v-select>
@@ -37,33 +35,33 @@
           <NewTheme @new-theme="appendTheme" />
         </v-col>
         <v-col cols="12" sm="1">
-          <v-btn text color="error" @click="deleteSelected"> Delete </v-btn>
+          <v-btn text color="error" @click="deleteSelected"> {{$t('general.delete')}} </v-btn>
         </v-col>
       </v-row>
       <v-row dense align-content="center" v-if="activeTheme">
         <v-col>
-          <ColorPicker button-text="Primary" v-model="activeTheme.primary" />
+          <ColorPicker :button-text="$t('settings.theme.primary')" v-model="activeTheme.primary" />
         </v-col>
         <v-col>
           <ColorPicker
-            button-text="Secondary"
+            :button-text="$t('settings.theme.secondary')"
             v-model="activeTheme.secondary"
           />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Accent" v-model="activeTheme.accent" />
+          <ColorPicker :button-text="$t('settings.theme.accent')" v-model="activeTheme.accent" />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Success" v-model="activeTheme.success" />
+          <ColorPicker :button-text="$t('settings.theme.success')" v-model="activeTheme.success" />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Info" v-model="activeTheme.info" />
+          <ColorPicker :button-text="$t('settings.theme.info')" v-model="activeTheme.info" />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Warning" v-model="activeTheme.warning" />
+          <ColorPicker :button-text="$t('settings.theme.warning')" v-model="activeTheme.warning" />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Error" v-model="activeTheme.error" />
+          <ColorPicker :button-text="$t('settings.theme.error')" v-model="activeTheme.error" />
         </v-col>
       </v-row>
     </v-card-text>
@@ -73,7 +71,7 @@
         <v-col> </v-col>
         <v-col></v-col>
         <v-col align="end">
-          <v-btn text color="success" @click="saveThemes"> Save Theme </v-btn>
+          <v-btn text color="success" @click="saveThemes"> {{$t('settings.theme.save-theme')}} </v-btn>
         </v-col>
       </v-row>
     </v-card-actions>
diff --git a/frontend/src/components/Admin/ThemeUI/ColorPicker.vue b/frontend/src/components/Admin/ThemeUI/ColorPicker.vue
index 8c55774c4..6da100082 100644
--- a/frontend/src/components/Admin/ThemeUI/ColorPicker.vue
+++ b/frontend/src/components/Admin/ThemeUI/ColorPicker.vue
@@ -5,7 +5,7 @@
     </v-btn>
     <v-dialog v-model="dialog" width="400">
       <v-card>
-        <v-card-title> {{ buttonText }} Color </v-card-title>
+        <v-card-title> {{ buttonText }} {{$t('settings.color')}} </v-card-title>
         <v-card-text>
           <v-text-field v-model="color"> </v-text-field>
           <v-row>
@@ -26,8 +26,8 @@
           </v-row>
         </v-card-text>
         <v-card-actions>
-          <v-btn text @click="toggleSwatches"> Swatches </v-btn>
-          <v-btn text @click="dialog = false"> Select </v-btn>
+          <v-btn text @click="toggleSwatches"> {{$t('settings.swatches')}} </v-btn>
+          <v-btn text @click="dialog = false"> {{$t('general.select')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/frontend/src/components/Admin/ThemeUI/NewTheme.vue b/frontend/src/components/Admin/ThemeUI/NewTheme.vue
index 93dba2599..cd331a63c 100644
--- a/frontend/src/components/Admin/ThemeUI/NewTheme.vue
+++ b/frontend/src/components/Admin/ThemeUI/NewTheme.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <v-btn text color="success" @click="dialog = true"> New </v-btn>
+    <v-btn text color="success" @click="dialog = true"> {{$t('general.new')}} </v-btn>
     <v-dialog v-model="dialog" width="400">
       <v-card>
-        <v-card-title> Add a New Theme </v-card-title>
+        <v-card-title> {{$t('settings.add-a-new-theme')}} </v-card-title>
         <v-card-text>
           <v-text-field label="Theme Name" v-model="themeName"></v-text-field>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="success" text @click="Select"> Create </v-btn>
+          <v-btn color="success" text @click="Select"> {{$t('general.create')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/frontend/src/components/Admin/Users.vue b/frontend/src/components/Admin/Users.vue
index f8d0653fe..e9f534214 100644
--- a/frontend/src/components/Admin/Users.vue
+++ b/frontend/src/components/Admin/Users.vue
@@ -1,6 +1,6 @@
 <template>
   <v-card>
-    <v-card-title class="card-title mt-1"> User Settings </v-card-title>
+    <v-card-title class="card-title mt-1"> {{$t('settings.user-settings')}} </v-card-title>
   </v-card>
 </template>
 
diff --git a/frontend/src/components/Admin/Webhooks.vue b/frontend/src/components/Admin/Webhooks.vue
index 5f433e6a8..3ff117ae7 100644
--- a/frontend/src/components/Admin/Webhooks.vue
+++ b/frontend/src/components/Admin/Webhooks.vue
@@ -1,21 +1,17 @@
 <template>
   <v-card>
     <v-card-title class="secondary white--text mt-1">
-      Meal Planner Webhooks
+      {{$t('settings.webhooks.meal-planner-webhooks')}}
     </v-card-title>
     <v-card-text>
-      <p>
-        The URLs listed below will recieve webhooks containing the recipe data
-        for the meal plan on it's scheduled day. Currently Webhooks will execute
-        at <strong>{{ time }}</strong>
-      </p>
+      <p v-html="$t('settings.webhooks.the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at', {time: time})"></p>
 
       <v-row dense align="center">
         <v-col cols="12" md="2" sm="5">
           <v-switch
             v-model="enabled"
             inset
-            label="Enabled"
+            :label="$t('general.enabled')"
             class="my-n3"
           ></v-switch>
         </v-col>
@@ -23,7 +19,7 @@
           <TimePicker @save-time="saveTime" />
         </v-col>
         <v-col cols="12" md="4" sm="5">
-          <v-btn text color="info" @click="testWebhooks"> Test Webhooks </v-btn>
+          <v-btn text color="info" @click="testWebhooks"> {{$t('settings.webhooks.test-webhooks')}} </v-btn>
         </v-col>
       </v-row>
 
@@ -36,7 +32,7 @@
         <v-col>
           <v-text-field
             v-model="webhooks[index]"
-            label="Webhook URL"
+            :label="$t('settings.webhooks.webhook-url')"
           ></v-text-field>
         </v-col>
       </v-row>
@@ -51,7 +47,7 @@
         <v-col> </v-col>
         <v-col align="end">
           <v-btn text color="success" @click="saveWebhooks">
-            Save Webhooks
+            {{$t('settings.webhooks.save-webhooks')}}
           </v-btn>
         </v-col>
       </v-row>
diff --git a/frontend/src/components/Admin/Webhooks/TimePicker.vue b/frontend/src/components/Admin/Webhooks/TimePicker.vue
index 1390fb8b3..eda11de4a 100644
--- a/frontend/src/components/Admin/Webhooks/TimePicker.vue
+++ b/frontend/src/components/Admin/Webhooks/TimePicker.vue
@@ -9,7 +9,7 @@
     <template v-slot:activator="{ on, attrs }">
       <v-text-field
         v-model="time"
-        label="Set New Time"
+        :label="$t('settings.set-new-time')"
         prepend-icon="mdi-clock-time-four-outline"
         readonly
         v-bind="attrs"
@@ -18,8 +18,8 @@
     </template>
     <v-time-picker v-if="modal2" v-model="time" full-width>
       <v-spacer></v-spacer>
-      <v-btn text color="primary" @click="modal2 = false"> Cancel </v-btn>
-      <v-btn text color="primary" @click="saveTime"> OK </v-btn>
+      <v-btn text color="primary" @click="modal2 = false"> {{$t('general.cancel')}} </v-btn>
+      <v-btn text color="primary" @click="saveTime"> {{$t('general.ok')}} </v-btn>
     </v-time-picker>
   </v-dialog>
 </template>
diff --git a/frontend/src/components/MealPlan/EditPlan.vue b/frontend/src/components/MealPlan/EditPlan.vue
index 61cb58f7e..8fd043146 100644
--- a/frontend/src/components/MealPlan/EditPlan.vue
+++ b/frontend/src/components/MealPlan/EditPlan.vue
@@ -1,13 +1,13 @@
 <template>
   <v-card>
-    <v-card-title class="secondary white--text"> Edit Meal Plan </v-card-title>
+    <v-card-title class="secondary white--text"> {{$t('meal-plan.edit-meal-plan')}} </v-card-title>
     <v-card-text> </v-card-text>
 
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">
         <v-card-actions>
-          <v-btn color="success" text @click="update"> Update </v-btn>
+          <v-btn color="success" text @click="update"> {{$t('general.update')}} </v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-row>
diff --git a/frontend/src/components/MealPlan/MealPlanner.vue b/frontend/src/components/MealPlan/MealPlanner.vue
index 5a3ff07ff..6126864c3 100644
--- a/frontend/src/components/MealPlan/MealPlanner.vue
+++ b/frontend/src/components/MealPlan/MealPlanner.vue
@@ -8,7 +8,7 @@
     <NewMeal v-else @created="requestMeals" />
 
     <v-card class="my-1">
-      <v-card-title class="secondary white--text"> Meal Plans </v-card-title>
+      <v-card-title class="secondary white--text"> {{$t('meal-plan.meal-plans')}} </v-card-title>
 
       <v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
         <v-timeline-item
@@ -49,7 +49,7 @@
                   text
                   @click="editPlan(mealplan.uid)"
                 >
-                  Edit
+                  {{$t('general.edit')}}
                 </v-btn>
                 <v-btn
                   color="error lighten-2"
@@ -57,7 +57,7 @@
                   text
                   @click="deletePlan(mealplan.uid)"
                 >
-                  Delete
+                  {{$t('general.delete')}}
                 </v-btn>
               </v-row>
             </v-card-text>
diff --git a/frontend/src/components/MealPlan/MealSelect.vue b/frontend/src/components/MealPlan/MealSelect.vue
index d1ba90302..53beb0b96 100644
--- a/frontend/src/components/MealPlan/MealSelect.vue
+++ b/frontend/src/components/MealPlan/MealSelect.vue
@@ -2,7 +2,7 @@
   <v-row justify="center">
     <v-dialog v-model="dialog" persistent max-width="800">
       <v-card>
-        <v-card-title class="headline"> Choose a Recipe </v-card-title>
+        <v-card-title class="headline"> {{$t('meal-plan.choose-a-recipe')}} </v-card-title>
         <v-card-text>
           <v-autocomplete
             :items="availableRecipes"
@@ -13,14 +13,12 @@
             hide-details
             hide-selected
             item-text="slug"
-            label="Search for a Recipe"
+            :label="$t('search.search-for-a-recipe')"
             single-line
           >
             <template v-slot:no-data>
               <v-list-item>
-                <v-list-item-title>
-                  Search for your Favorite
-                  <strong>Recipe</strong>
+                <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
                 </v-list-item-title>
               </v-list-item>
             </template>
@@ -44,8 +42,8 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="secondary" text @click="dialog = false"> Close </v-btn>
-          <v-btn color="secondary" text @click="dialog = false"> Select </v-btn>
+          <v-btn color="secondary" text @click="dialog = false"> {{$t('general.close')}} </v-btn>
+          <v-btn color="secondary" text @click="dialog = false"> {{$t('general.select')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/frontend/src/components/MealPlan/NewMeal.vue b/frontend/src/components/MealPlan/NewMeal.vue
index fe9f574e5..cf741697f 100644
--- a/frontend/src/components/MealPlan/NewMeal.vue
+++ b/frontend/src/components/MealPlan/NewMeal.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title class="secondary white--text">
-      Create a New Meal Plan
+      {{$t('meal-plan.create-a-new-meal-plan')}}
     </v-card-title>
     <v-card-text>
       <v-row dense>
@@ -18,7 +18,7 @@
             <template v-slot:activator="{ on, attrs }">
               <v-text-field
                 v-model="startComputedDateFormatted"
-                label="Start Date"
+                :label="$t('meal-plan.start-date')"
                 persistent-hint
                 prepend-icon="mdi-calendar"
                 readonly
@@ -46,7 +46,7 @@
             <template v-slot:activator="{ on, attrs }">
               <v-text-field
                 v-model="endComputedDateFormatted"
-                label="End Date"
+                :label="$t('meal-plan.end-date')"
                 persistent-hint
                 prepend-icon="mdi-calendar"
                 readonly
@@ -70,9 +70,9 @@
     <v-row align="center" justify="end">
       <v-card-actions>
         <v-btn color="success" @click="random" v-if="meals[1]" text>
-          Random
+          {{$t('general.random')}}
         </v-btn>
-        <v-btn color="success" @click="save" text> Save </v-btn>
+        <v-btn color="success" @click="save" text> {{$t('general.save')}} </v-btn>
 
         <v-spacer></v-spacer>
         <v-btn icon @click="show = !show"> </v-btn>
diff --git a/frontend/src/components/MealPlan/ThisWeek.vue b/frontend/src/components/MealPlan/ThisWeek.vue
index 75da6b7dd..0107d5618 100644
--- a/frontend/src/components/MealPlan/ThisWeek.vue
+++ b/frontend/src/components/MealPlan/ThisWeek.vue
@@ -21,7 +21,7 @@
                     text
                     @click="$router.push(`/recipe/${meal.slug}`)"
                   >
-                    View Recipe
+                    {{$t('recipe.view-recipe')}}
                   </v-btn>
                 </v-card-actions>
               </v-card>
diff --git a/frontend/src/components/Page404.vue b/frontend/src/components/Page404.vue
index 9f0ea5689..f36fdc917 100644
--- a/frontend/src/components/Page404.vue
+++ b/frontend/src/components/Page404.vue
@@ -5,9 +5,9 @@
       <v-col>
         <v-card height="">
           <v-card-text>
-            <h1>404 No Page Found</h1>
+            <h1>{{$t('404.page-not-found')}}</h1>
           </v-card-text>
-          <v-btn text block @click="$router.push('/')"> Take me Home </v-btn>
+          <v-btn text block @click="$router.push('/')"> {{$t('404.take-me-home')}} </v-btn>
         </v-card>
       </v-col>
       <v-col cols="2"></v-col>
diff --git a/frontend/src/components/RecipeEditor/BulkAdd.vue b/frontend/src/components/RecipeEditor/BulkAdd.vue
index 602604ffa..72439417f 100644
--- a/frontend/src/components/RecipeEditor/BulkAdd.vue
+++ b/frontend/src/components/RecipeEditor/BulkAdd.vue
@@ -10,17 +10,16 @@
           v-on="on"
           @click="inputText = ''"
         >
-          Bulk Add
+          {{$t('new-recipe.bulk-add')}}
         </v-btn>
       </template>
 
       <v-card>
-        <v-card-title class="headline"> Bulk Add </v-card-title>
+        <v-card-title class="headline"> {{$t('new-recipe.bulk-add')}} </v-card-title>
 
         <v-card-text>
           <p>
-            Paste in your recipe data. Each line will be treated as an item in a
-            list
+            {{$t('new-recipe.paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list')}}
           </p>
           <v-textarea v-model="inputText"> </v-textarea>
         </v-card-text>
@@ -29,7 +28,7 @@
 
         <v-card-actions>
           <v-spacer></v-spacer>
-          <v-btn color="success" text @click="save"> Save </v-btn>
+          <v-btn color="success" text @click="save"> {{$t('general.save')}} </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
diff --git a/frontend/src/components/RecipeEditor/DetailsView.vue b/frontend/src/components/RecipeEditor/DetailsView.vue
index 123d9dced..31ac37b5f 100644
--- a/frontend/src/components/RecipeEditor/DetailsView.vue
+++ b/frontend/src/components/RecipeEditor/DetailsView.vue
@@ -2,7 +2,7 @@
   <v-card-text>
     <v-row>
       <v-col cols="4">
-        <h2 class="mb-4">Ingredients</h2>
+        <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
         <div v-for="ingredient in ingredients" :key="ingredient">
           <v-row align="center">
             <v-checkbox hide-details class="shrink mr-2 mt-0"></v-checkbox>
@@ -20,7 +20,7 @@
           <v-icon>mdi-plus</v-icon>
         </v-btn>
 
-        <h2 class="mt-6">Categories</h2>
+        <h2 class="mt-6">{{$t('recipe.categories')}}</h2>
         <v-combobox
           dense
           multiple
@@ -36,7 +36,7 @@
           </template>
         </v-combobox>
 
-        <h2 class="mt-4">Tags</h2>
+        <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
         <v-combobox dense multiple chips deletable-chips :value="tags">
           <template v-slot:selection="data">
             <v-chip :selected="data.selected" close color="primary" dark>
@@ -49,7 +49,7 @@
       <v-divider :vertical="true"></v-divider>
 
       <v-col>
-        <h2 class="mb-4">Instructions</h2>
+        <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
         <div v-for="(step, index) in instructions" :key="step.text">
           <v-hover v-slot="{ hover }">
             <v-card
@@ -57,7 +57,7 @@
               :class="[{ 'on-hover': hover }]"
               :elevation="hover ? 12 : 2"
             >
-              <v-card-title>Step: {{ index + 1 }}</v-card-title>
+              <v-card-title>{{$t('recipe.step-index', { step: index + 1})}}</v-card-title>
               <v-card-text>
                 <v-textarea dense :value="step.text"></v-textarea>
               </v-card-text>
diff --git a/frontend/src/components/RecipeEditor/EditRecipe.vue b/frontend/src/components/RecipeEditor/EditRecipe.vue
index 83c7a00bf..52a47a1c9 100644
--- a/frontend/src/components/RecipeEditor/EditRecipe.vue
+++ b/frontend/src/components/RecipeEditor/EditRecipe.vue
@@ -6,21 +6,21 @@
         <v-col>
           <v-file-input
             v-model="fileObject"
-            label="Image File"
+            :label="$t('general.image-file')"
             truncate-length="30"
             @change="uploadImage"
           ></v-file-input>
         </v-col>
         <v-col cols="3"></v-col>
       </v-row>
-      <v-text-field class="my-3" label="Recipe Name" v-model="value.name">
+      <v-text-field class="my-3" :label="$t('recipe.recipe-name')" v-model="value.name">
       </v-text-field>
-      <v-textarea height="100" label="Description" v-model="value.description">
+      <v-textarea height="100" :label="$t('recipe.description')" v-model="value.description">
       </v-textarea>
       <div class="my-2"></div>
       <v-row dense disabled>
         <v-col sm="5">
-          <v-text-field label="Servings" v-model="value.recipeYield">
+          <v-text-field :label="$t('recipe.servings')" v-model="value.recipeYield">
           </v-text-field>
         </v-col>
         <v-col></v-col>
@@ -34,7 +34,7 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">Ingredients</h2>
+          <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
           <div
             v-for="(ingredient, index) in value.recipeIngredient"
             :key="generateKey('ingredient', index)"
@@ -51,7 +51,7 @@
                 <v-icon color="error">mdi-delete</v-icon>
               </v-btn>
               <v-text-field
-                label="Ingredient"
+                :label="$t('recipe.ingredient')"
                 v-model="value.recipeIngredient[index]"
               ></v-text-field>
             </v-row>
@@ -61,7 +61,7 @@
           </v-btn>
           <BulkAdd @bulk-data="appendIngredients" />
 
-          <h2 class="mt-6">Categories</h2>
+          <h2 class="mt-6">{{$t('recipe.categories')}}</h2>
           <v-combobox
             dense
             multiple
@@ -83,7 +83,7 @@
             </template>
           </v-combobox>
 
-          <h2 class="mt-4">Tags</h2>
+          <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
           <v-combobox dense multiple chips deletable-chips v-model="value.tags">
             <template v-slot:selection="data">
               <v-chip
@@ -98,7 +98,7 @@
             </template>
           </v-combobox>
 
-          <h2 class="my-4">Notes</h2>
+          <h2 class="my-4">{{$t('recipe.notes')}}</h2>
           <v-card
             class="mt-1"
             v-for="(note, index) in value.notes"
@@ -122,7 +122,7 @@
                 ></v-text-field>
               </v-row>
 
-              <v-textarea label="Note" v-model="value.notes[index]['text']">
+              <v-textarea :label="$t('recipe.note')" v-model="value.notes[index]['text']">
               </v-textarea>
             </v-card-text>
           </v-card>
@@ -134,7 +134,7 @@
         <v-divider class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <h2 class="mb-4">Instructions</h2>
+          <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
           <div v-for="(step, index) in value.recipeInstructions" :key="index">
             <v-hover v-slot="{ hover }">
               <v-card
@@ -152,7 +152,7 @@
                     @click="removeStep(index)"
                   >
                     <v-icon color="error">mdi-delete</v-icon> </v-btn
-                  >Step: {{ index + 1 }}</v-card-title
+                  >{{ $t('recipe.step-index', {step: index + 1}) }}</v-card-title
                 >
                 <v-card-text>
                   <v-textarea
diff --git a/frontend/src/components/RecipeEditor/ViewRecipe.vue b/frontend/src/components/RecipeEditor/ViewRecipe.vue
index 5d525fa84..23e969927 100644
--- a/frontend/src/components/RecipeEditor/ViewRecipe.vue
+++ b/frontend/src/components/RecipeEditor/ViewRecipe.vue
@@ -32,7 +32,7 @@
       </v-row>
       <v-row>
         <v-col cols="12" sm="12" md="4" lg="4">
-          <h2 class="mb-4">Ingredients</h2>
+          <h2 class="mb-4">{{$t('recipe.ingredients')}}</h2>
           <div
             v-for="(ingredient, index) in ingredients"
             :key="generateKey('ingredient', index)"
@@ -47,7 +47,7 @@
           </div>
 
           <div v-if="categories[0]">
-            <h2 class="mt-4">Categories</h2>
+            <h2 class="mt-4">{{$t('recipe.categories')}}</h2>
             <v-chip
               class="ma-1"
               color="primary"
@@ -60,7 +60,7 @@
           </div>
 
           <div v-if="tags[0]">
-            <h2 class="mt-4">Tags</h2>
+            <h2 class="mt-4">{{$t('recipe.tags')}}</h2>
             <v-chip
               class="ma-1"
               color="primary"
@@ -72,7 +72,7 @@
             </v-chip>
           </div>
 
-          <h2 v-if="notes[0]" class="my-4">Notes</h2>
+          <h2 v-if="notes[0]" class="my-4">{{$t('recipe.notes')}}</h2>
           <v-card
             class="mt-1"
             v-for="(note, index) in notes"
@@ -87,7 +87,7 @@
         <v-divider class="my-divider" :vertical="true"></v-divider>
 
         <v-col cols="12" sm="12" md="8" lg="8">
-          <h2 class="mb-4">Instructions</h2>
+          <h2 class="mb-4">{{$t('recipe.instructions')}}</h2>
           <v-hover
             v-for="(step, index) in instructions"
             :key="generateKey('step', index)"
@@ -99,7 +99,7 @@
               :elevation="hover ? 12 : 2"
               @click="toggleDisabled(index)"
             >
-              <v-card-title>Step: {{ index + 1 }}</v-card-title>
+              <v-card-title>{{ $t('recipe.step-index', {step: index + 1}) }}</v-card-title>
               <v-card-text>{{ step.text }}</v-card-text>
             </v-card>
           </v-hover>
@@ -121,7 +121,7 @@
           target="_blank"
           class="rounded-sm mr-4"
         >
-          Original Recipe
+          {{$t('recipe.original-recipe')}}
         </v-btn>
       </v-row>
     </v-card-text>
diff --git a/frontend/src/components/UI/Login.vue b/frontend/src/components/UI/Login.vue
index feb09aa64..00d19b66a 100644
--- a/frontend/src/components/UI/Login.vue
+++ b/frontend/src/components/UI/Login.vue
@@ -13,20 +13,20 @@
                 v-model="user.name"
                 light="light"
                 prepend-icon="person"
-                label="Name"
+                :label="$t('general.name')"
               ></v-text-field>
               <v-text-field
                 v-model="user.email"
                 light="light"
                 prepend-icon="mdi-email"
-                label="Email"
+                :label="$t('login.email')"
                 type="email"
               ></v-text-field>
               <v-text-field
                 v-model="user.password"
                 light="light"
                 prepend-icon="mdi-lock"
-                label="Password"
+                :label="$t('login.password')"
                 type="password"
               ></v-text-field>
               <v-checkbox
@@ -34,7 +34,7 @@
                 v-if="options.isLoggingIn"
                 v-model="options.shouldStayLoggedIn"
                 light="light"
-                label="Stay logged in?"
+                :label="$t('login.stay-logged-in')"
                 hide-details="hide-details"
               ></v-checkbox>
               <v-btn
@@ -44,14 +44,14 @@
                 color="primary"
                 block="block"
                 type="submit"
-                >Sign in</v-btn
+                >{{$t('login.sign-in')}}</v-btn
               >
               <v-btn
                 v-else
                 block="block"
                 type="submit"
                 @click.prevent="options.isLoggingIn = true"
-                >Sign up</v-btn
+                >{{$t('login.sign-up')}}</v-btn
               >
             </v-form>
           </v-card-text>
diff --git a/frontend/src/components/UI/Menu.vue b/frontend/src/components/UI/Menu.vue
index a03af67b1..75cb33e4a 100644
--- a/frontend/src/components/UI/Menu.vue
+++ b/frontend/src/components/UI/Menu.vue
@@ -32,26 +32,32 @@
 
 <script>
 export default {
-  data: () => ({
-    items: [
-      {
-        icon: "mdi-calendar-week",
-        title: "Dinner This Week",
-        nav: "/meal-plan/this-week",
-      },
-      {
-        icon: "mdi-calendar-today",
-        title: "Dinner Today",
-        nav: "/meal-plan/today",
-      },
-      {
-        icon: "mdi-calendar-multiselect",
-        title: "Planner",
-        nav: "/meal-plan/planner",
-      },
-      { icon: "mdi-cog", title: "Settings", nav: "/settings/site" },
-    ],
-  }),
+  data: function () {
+    return {
+      items: [
+        {
+          icon: "mdi-calendar-week",
+          title: this.$i18n.t("meal-plan.dinner-this-week"),
+          nav: "/meal-plan/this-week",
+        },
+        {
+          icon: "mdi-calendar-today",
+          title: this.$i18n.t("meal-plan.dinner-today"),
+          nav: "/meal-plan/today",
+        },
+        {
+          icon: "mdi-calendar-multiselect",
+          title: this.$i18n.t("meal-plan.planner"),
+          nav: "/meal-plan/planner",
+        },
+        {
+          icon: "mdi-cog",
+          title: this.$i18n.t("general.settings"),
+          nav: "/settings/site",
+        },
+      ],
+    };
+  },
   methods: {
     navRouter(route) {
       this.$router.push(route);
diff --git a/frontend/src/components/UI/RecipeCard.vue b/frontend/src/components/UI/RecipeCard.vue
index b30b13760..aeba916e9 100644
--- a/frontend/src/components/UI/RecipeCard.vue
+++ b/frontend/src/components/UI/RecipeCard.vue
@@ -26,7 +26,7 @@
             <v-tooltip top color="secondary" max-width="400" open-delay="50">
               <template v-slot:activator="{ on, attrs }">
                 <v-btn color="secondary" v-on="on" v-bind="attrs" text
-                  >Description</v-btn
+                  >{{$t('recipe.description')}}</v-btn
                 >
               </template>
               <span>{{ description }}</span>
diff --git a/frontend/src/components/UI/Search.vue b/frontend/src/components/UI/Search.vue
index b35de2508..ed2cd218b 100644
--- a/frontend/src/components/UI/Search.vue
+++ b/frontend/src/components/UI/Search.vue
@@ -9,15 +9,13 @@
     hide-details
     hide-selected
     item-text="slug"
-    label="Search for a Recipe"
+    :label="$t('search.search-for-a-recipe')"
     single-line
     @keyup.enter.native="moreInfo(selected)"
   >
     <template v-slot:no-data>
       <v-list-item>
-        <v-list-item-title>
-          Search for your Favorite
-          <strong>Recipe</strong>
+        <v-list-item-title :v-html="$t('search.search-for-your-favorite-recipe')">
         </v-list-item-title>
       </v-list-item>
     </template>
diff --git a/frontend/src/components/UI/SnackBar.vue b/frontend/src/components/UI/SnackBar.vue
index fa073179c..4ba38d20e 100644
--- a/frontend/src/components/UI/SnackBar.vue
+++ b/frontend/src/components/UI/SnackBar.vue
@@ -5,7 +5,7 @@
 
       <template v-slot:action="{ attrs }">
         <v-btn color="white" text v-bind="attrs" @click="close(false)">
-          Close
+          {{$t('general.close')}}
         </v-btn>
       </template>
     </v-snackbar>
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
new file mode 100644
index 000000000..2b285c50a
--- /dev/null
+++ b/frontend/src/i18n.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+  messages: loadLocaleMessages()
+})
diff --git a/frontend/src/locales/da.json b/frontend/src/locales/da.json
new file mode 100644
index 000000000..d07af5f44
--- /dev/null
+++ b/frontend/src/locales/da.json
@@ -0,0 +1,119 @@
+{
+  "404": {
+    "page-not-found": "404 side blev ikke fundet",
+    "take-me-home": "Tag mig hjem"
+  },
+  "new-recipe": {
+    "from-url": "Fra URL",
+    "recipe-url": "URL på opskrift",
+    "error-message": "Der opstod en fejl under indlæsning af opskriften. Tjek loggen og debug/last_recipe.json for at fejlsøge problemet.",
+    "bulk-add": "Bulk Tilføj",
+    "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Indsæt dine opskriftsdata. \nHver linje behandles som et element på en liste"
+  },
+  "general": {
+    "submit": "Indsend",
+    "name": "Navn",
+    "settings": "Indstillinger",
+    "cancel": "Annuller",
+    "close": "Luk",
+    "create": "Opret",
+    "delete": "Slet",
+    "edit": "Rediger",
+    "enabled": "Aktiveret",
+    "image-file": "Billedfil",
+    "new": "Ny",
+    "ok": "Ok",
+    "random": "Tilfældig",
+    "save": "Gem",
+    "select": "Vælg",
+    "update": "Opdater"
+  },
+  "login": {
+    "email": "E-mail",
+    "password": "Adgangskode",
+    "sign-in": "Log ind",
+    "sign-up": "Opret bruger",
+    "stay-logged-in": "Forbliv logget ind"
+  },
+  "meal-plan": {
+    "dinner-this-week": "Madplan denne uge",
+    "dinner-today": "Madplan i dag",
+    "planner": "Planlægger",
+    "choose-a-recipe": "Vælg en opskrift",
+    "create-a-new-meal-plan": "Opret en ny måltidsplan",
+    "edit-meal-plan": "Rediger måltidsplan",
+    "end-date": "Slutdato",
+    "meal-plans": "Måltidsplaner",
+    "start-date": "Start dato"
+  },
+  "recipe": {
+    "description": "Beskrivelse",
+    "categories": "Kategorier",
+    "ingredient": "Ingrediens",
+    "ingredients": "Ingredienser",
+    "instructions": "Instruktioner",
+    "note": "Bemærk",
+    "notes": "Bemærkninger",
+    "original-recipe": "Original opskrift",
+    "recipe-name": "Opskriftens navn",
+    "servings": "Portioner",
+    "step-index": "Trin: {step}",
+    "tags": "Mærker",
+    "view-recipe": "Se opskrift"
+  },
+  "search": {
+    "search-for-a-recipe": "Søg efter en opskrift",
+    "search-for-your-favorite-recipe": "Søg efter din foretrukne <strong>opskrift</strong>"
+  },
+  "migration": {
+    "chowdown-repo-url": "Chowdown Repo URL",
+    "currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration": "I øjeblikket er Chowdown via offentlig Repo URL den eneste understøttede migreringstype",
+    "failed-images": "Mislykkede billeder",
+    "failed-recipes": "Mislykkede opskrifter",
+    "migrate": "Migrere",
+    "recipe-migration": "Opskrift Migration"
+  },
+  "settings": {
+    "add-a-new-theme": "Tilføj et nyt tema",
+    "backup-and-exports": "Backup og eksport",
+    "backup-info": "Sikkerhedskopier eksporteres i standard JSON-format sammen med alle de billeder, der er gemt på filsystemet. \nI din sikkerhedskopimappe finder du en .zip-fil, der indeholder alle opskrifterne JSON og billeder fra databasen. \nDerudover, hvis du valgte en markdown-fil, gemmes disse også i .zip-filen. \nFor at importere en sikkerhedskopi skal den være placeret i din sikkerhedskopimappe. \nAutomatiske sikkerhedskopier udføres hver dag kl. 3:00.",
+    "backup-recipes": "Backupopskrifter",
+    "backup-selection-is-required": "Valg af sikkerhedskopi er påkrævet",
+    "backup-tag": "Backup-tag",
+    "color": "Farve",
+    "contribute": "Bidrage",
+    "delete-backup": "Slet sikkerhedskopi",
+    "explore-the-docs": "Udforsk Docs",
+    "import-backup": "Importer sikkerhedskopi",
+    "markdown-template": "Markdown-skabelon",
+    "new-version-available": "En ny version af Mealie er tilgængelig. <a {aContents}> Besøg repoen </a>",
+    "select-a-backup-for-import": "Vælg en sikkerhedskopi til import",
+    "set-new-time": "Indstil ny tid",
+    "sftp-settings": "SFTP-indstillinger",
+    "swatches": "Prøver",
+    "user-settings": "Brugerindstillinger",
+    "version-latest": "Version: {current} | Seneste: {latest}",
+    "theme": {
+      "accent": "Accent",
+      "dark-mode": "Mørk tilstand",
+      "error": "Fejl",
+      "info": "Info",
+      "primary": "Primær",
+      "save-theme": "Gem tema",
+      "saved-color-schemes": "Gemte farveskemaer",
+      "secondary": "Sekundær",
+      "select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference": "Vælg et tema i rullemenuen, eller opret et nyt tema. \nBemærk, at standardtemaet serveres til alle brugere, der ikke har angivet en temapræference.",
+      "success": "Succes",
+      "theme-is-required": "Tema er påkrævet",
+      "theme-settings": "Temaindstillinger",
+      "warning": "Advarsel"
+    },
+    "webhooks": {
+      "meal-planner-webhooks": "Måltidsplanlægning Webhooks",
+      "save-webhooks": "Gem Webhooks",
+      "test-webhooks": "Test Webhooks",
+      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "Webadresserne, der er anført nedenfor, modtager webhooks, der indeholder opskriftsdataene for måltidsplanen på den planlagte dag. \nWebhooks udføres i øjeblikket på <strong> {time} </strong>",
+      "webhook-url": "Webhook URL"
+    }
+  }
+}
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
new file mode 100644
index 000000000..598565eb5
--- /dev/null
+++ b/frontend/src/locales/en.json
@@ -0,0 +1,119 @@
+{
+  "404": {
+    "page-not-found": "404 Page Not Found",
+    "take-me-home": "Take me Home"
+  },
+  "new-recipe": {
+    "from-url": "From URL TEST",
+    "recipe-url": "Recipe URL",
+    "error-message": "Looks like there was an error parsing the URL. Check the log and debug/last_recipe.json to see what went wrong.",
+    "bulk-add": "Bulk Add",
+    "paste-in-your-recipe-data-each-line-will-be-treated-as-an-item-in-a-list": "Paste in your recipe data. Each line will be treated as an item in a list"
+  },
+  "general": {
+    "submit": "Submit",
+    "name": "Name",
+    "settings": "Settings",
+    "close": "Close",
+    "save": "Save",
+    "image-file": "Image File",
+    "update": "Update",
+    "edit": "Edit",
+    "delete": "Delete",
+    "select": "Select",
+    "random": "Random",
+    "new": "New",
+    "create": "Create",
+    "cancel": "Cancel",
+    "ok": "OK",
+    "enabled": "Enabled"
+  },
+  "login": {
+    "stay-logged-in": "Stay logged in?",
+    "email": "Email",
+    "password": "Password",
+    "sign-in": "Sign in",
+    "sign-up": "Sign up"
+  },
+  "meal-plan": {
+    "dinner-this-week": "Dinner This Week",
+    "dinner-today": "Dinner Today",
+    "planner": "Planner",
+    "edit-meal-plan": "Edit Meal Plan",
+    "meal-plans": "Meal Plans",
+    "choose-a-recipe": "Choose a Recipe",
+    "create-a-new-meal-plan": "Create a New Meal Plan",
+    "start-date": "Start Date",
+    "end-date": "End Date"
+  },
+  "recipe": {
+    "description": "Description",
+    "ingredients": "Ingredients",
+    "categories": "Categories",
+    "tags": "Tags",
+    "instructions": "Instructions",
+    "step-index": "Step: {step}",
+    "recipe-name": "Recipe Name",
+    "servings": "Servings",
+    "ingredient": "Ingredient",
+    "notes": "Notes",
+    "note": "Note",
+    "original-recipe": "Original Recipe",
+    "view-recipe": "View Recipe"
+  },
+  "search": {
+    "search-for-a-recipe": "Search for a Recipe",
+    "search-for-your-favorite-recipe": "Search for your Favorite <strong>Recipe</strong>"
+  },
+  "settings": {
+    "color": "Color",
+    "swatches": "Swatches",
+    "add-a-new-theme": "Add a New Theme",
+    "set-new-time": "Set New Time",
+    "version-latest": "Version: { current } | Latest: { latest }",
+    "explore-the-docs": "Explore the Docs",
+    "contribute": "Contribute",
+    "backup-and-exports": "Backup and Exports",
+    "backup-info": "Backups are exported in standard JSON format along with all the images stored on the file system. In your backup folder you'll find a .zip file that contains all of the recipe JSON and images from the database. Additionally, if you selected a markdown file, those will also be stored in the .zip file. To import a backup, it must be located in your backups folder. Automated backups are done each day at 3:00 AM.",
+    "backup-tag": "Backup Tag",
+    "markdown-template": "Markdown Template",
+    "backup-recipes": "Backup Recipes",
+    "select-a-backup-for-import": "Select a Backup for Import",
+    "backup-selection-is-required": "Backup Selection is Required",
+    "import-backup": "Import Backup",
+    "delete-backup": "Delete Backup",
+    "sftp-settings": "SFTP Settings",
+    "theme": {
+      "theme-settings": "Theme Settings",
+      "select-a-theme-from-the-dropdown-or-create-a-new-theme-note-that-the-default-theme-will-be-served-to-all-users-who-have-not-set-a-theme-preference": "Select a theme from the dropdown or create a new theme. Note that the default theme will be served to all users who have not set a theme preference.",
+      "dark-mode": "Dark Mode",
+      "saved-color-schemes": "Saved Color Schemes",
+      "theme-is-required": "Theme is required",
+      "primary": "Primary",
+      "secondary": "Secondary",
+      "accent": "Accent",
+      "success": "Success",
+      "info": "Info",
+      "warning": "Warning",
+      "error": "Error",
+      "save-theme": "Save Theme"
+    },
+    "user-settings": "User Settings",
+    "webhooks": {
+      "meal-planner-webhooks": "Meal Planner Webhooks",
+      "the-urls-listed-below-will-recieve-webhooks-containing-the-recipe-data-for-the-meal-plan-on-its-scheduled-day-currently-webhooks-will-execute-at": "The URLs listed below will recieve webhooks containing the recipe data for the meal plan on it's scheduled day. Currently Webhooks will execute at <strong>{ time }</strong>",
+      "test-webhooks": "Test Webhooks",
+      "webhook-url": "Webhook URL",
+      "save-webhooks": "Save Webhooks"
+    },
+    "new-version-available": "A New Version of Mealie is Avaiable, <a {aContents}> Visit the Repo </a>"
+  },
+  "migration": {
+    "recipe-migration": "Recipe Migration",
+    "currently-chowdown-via-public-repo-url-is-the-only-supported-type-of-migration": "Currently Chowdown via public Repo URL is the only supported type of migration",
+    "chowdown-repo-url": "Chowdown Repo URL",
+    "migrate": "Migrate",
+    "failed-recipes": "Failed Recipes",
+    "failed-images": "Failed Images"
+  }
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 3e9f4f4b0..b6dbf68a3 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -5,6 +5,7 @@ import store from "./store/store";
 import VueRouter from "vue-router";
 import { routes } from "./routes";
 import VueCookies from "vue-cookies";
+import i18n from './i18n'
 
 Vue.config.productionTip = false;
 Vue.use(VueRouter);
@@ -19,7 +20,8 @@ new Vue({
   vuetify,
   store,
   router,
-  render: (h) => h(App),
+  i18n,
+  render: (h) => h(App)
 }).$mount("#app");
 
 // Truncate
diff --git a/frontend/vue.config.js b/frontend/vue.config.js
index d36c178fd..201f7fa6b 100644
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@@ -5,9 +5,17 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        target: process.env.VUE_APP_API_BASE_URL,
+        target: "http://mealie-api:9000 ",
         secure: false,
       },
     },
   },
+  pluginOptions: {
+    i18n: {
+      locale: 'en',
+      fallbackLocale: 'en',
+      localeDir: 'locales',
+      enableInSFC: true
+    }
+  }
 };