Add json formatter

src/components/Sidebar.vue

@@ -41,6 +41,9 @@ export default {
         'str_to_php_array': 'Str to PHP array',
         'php_array_to_json': 'PHP array to Json',
       },
+      'JSON': {
+        'json_formatter': 'JSON formatter',
+      },
       'SQL': {
         'sql_formatter': 'SQL formatter',
         'sql_split_in': 'SQL split IN',

src/router/index.js

@@ -61,6 +61,15 @@ const router = createRouter({
 			component: () => import('../views/UrlEncodeDecode.vue'),
 		},
 
+		/**
+		 * JSON manipulation
+		 */
+		{
+			path: '/json_formatter',
+			name: 'json_formatter',
+			component: () => import('../views/JSONFormatter.vue'),
+		},
+
 		/**
 		 * SQL manipulation
 		 */

src/views/JSONFormatter.vue

@@ -0,0 +1,50 @@
+<template>
+  <h2 class="tool-title">JSON formatter</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <textarea id="result" v-model="toolResult"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        data: '',
+        minifyJson: '',
+      },
+      toolResult: '',
+    };
+  },
+  mounted() {
+    this.result();
+  },
+  methods: {
+    result() {
+      if (!this.toolData.data.length) {
+        return '';
+      }
+
+      try {
+        this.toolResult = JSON.stringify(JSON.parse(this.toolData.data), null, 4);
+      } catch (e) {
+        this.toolResult = 'invalid syntax';
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>