🐛 Fix malformed YAML in export menu (#482)

src/components/Configuration/ConfigContainer.vue

@@ -65,7 +65,6 @@
 
 <script>
 
-import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
 import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import StoreKeys from '@/utils/StoreMutations';
@@ -88,7 +87,6 @@ export default {
   name: 'ConfigContainer',
   data() {
     return {
-      jsonParser: JsonToYaml,
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
       appVersion: process.env.VUE_APP_VERSION,
       latestVersion: '',
@@ -101,9 +99,6 @@ export default {
     sections: function getSections() {
       return this.config.sections;
     },
-    yaml() {
-      return this.jsonParser(this.config);
-    },
   },
   components: {
     JsonEditor,

src/views/DownloadConfig.vue

@@ -1,9 +1,9 @@
 <template>
-  <pre><code>{{ jsonParser(config) }}</code></pre>
+  <pre><code>{{ yamlConfig }}</code></pre>
 </template>
 
 <script>
-import JsonToYaml from '@/utils/JsonToYaml';
+import JsYaml from 'js-yaml';
 
 export default {
   name: 'DownloadConfig',
@@ -11,11 +11,9 @@ export default {
     config() {
       return this.$store.state.config;
     },
+    yamlConfig() {
+      return JsYaml.dump(this.config);
     },
-  data() {
-    return {
-      jsonParser: JsonToYaml,
-    };
   },
 };
 
@@ -23,8 +21,9 @@ export default {
 
 <style scoped lang="scss">
 pre {
-  background: var(--code-editor-background);
+  margin: 0;
-  color: var(--code-editor-color);
   padding: 1rem;
+  color: var(--code-editor-color);
+  background: var(--code-editor-background);
 }
 </style>