Use vue-json-pretty

package.json

@@ -235,6 +235,7 @@
 		"vue-cropperjs": "3.0.0",
 		"vue-i18n": "8.8.2",
 		"vue-js-modal": "1.3.28",
+		"vue-json-pretty": "1.4.1",
 		"vue-loader": "15.7.0",
 		"vue-marquee-text-component": "1.1.1",
 		"vue-prism-component": "1.1.1",

src/client/app/admin/views/logs.vue

@@ -20,7 +20,10 @@
 
 			<div class="nqjzuvev">
 				<code v-for="log in logs" :key="log._id" :class="log.level">
-					<mk-time :time="log.createdAt"/> [{{ log.domain.join('.') }}] {{ log.message }}
+					<details>
+						<summary><mk-time :time="log.createdAt"/> [{{ log.domain.join('.') }}] {{ log.message }}</summary>
+						<vue-json-pretty v-if="log.data" :data="log.data"></vue-json-pretty>
+					</details>
 				</code>
 			</div>
 		</section>
@@ -32,10 +35,15 @@
 import Vue from 'vue';
 import i18n from '../../i18n';
 import { faStream } from '@fortawesome/free-solid-svg-icons';
+import VueJsonPretty from 'vue-json-pretty';
 
 export default Vue.extend({
 	i18n: i18n('admin/views/logs.vue'),
 
+	components: {
+		VueJsonPretty
+	},
+
 	data() {
 		return {
 			logs: [],