Convert Json String To A Json Object In Nuxt js Application

5 min readNov 20, 2021

Hi folks, today will see how to create a nuxt js application from scratch. Today the simple web application will be to convert a json string to a json object. Intention of this article is to give you an idea on how to create a simple nuxt application.

First will select a better terminal for project setting up process. I recommend you to install cmder in your windows machine.
Then move to your project location using cmder and run npm init nuxt-app json-converter to create the nuxt application. I selected below configurations in the installation process.

Open the project using favorite IDE, mine it’s visual studio code. So I’ll go with it.
Run npm run dev command to open our initial site via browser as below.

Then will remove unnecessary files from the initial project and let’s create our application.
We can delete the left side navigation drawer by removing v-navigation-drawer component from default.vue file. (from line number 3 to 26 as in below image)

Above same file, if we delete v-app-bar component, it will remove the top bar.

If you change the value of rightDrawer model variable/local state variable(line number 55) to true you can see right side navigation drawer as well.

We don’t need it as well, so remove that state variable and the other v-navigation-drawer component (line 8 to 24) from DOM as well.

Then we are back to the previous view. We don’t want the v-footer component as well. Let’s remove it. And make sure to remove fixed model variable as well from the script. So now if you look the script in default.vue, none of them are used. Therefore clean the script tag including the code inside it.

Let’s move to index.vue page and remove unwanted parts. There we can remove the entire code inside template tag excluding the template tag. But please wait. As in below you can see two components called NuxtLogo and VuetifyLogo. (line 5 and line 6)

First will search NuxtLogo in our whole project and we can see only one usage. So it’s good to delete NuxtLogo.vue file from the project.

Let’s search for VuetifyLogo as well. There we can see 3 results in 2 files. For the class name in VuetifyLogo.vue file also they are using the same name. That’s the reason for it. So here also it’s good to delete VuetifyLogo.vue file from the project.

Now this is the time in index.vue file for removing the entire code inside template tag excluding the template tag.

You should see a black background like below.

Now let’s see how to change the background color to our usual white screen. For that we have to move into nuxt.config.js file and change the vuetify theme object’s dark value to false.(line 47)

Then you should be able to get this white screen.

Now this is the time for creating our json converter ui. Let’s create a new component called JsonConverter.vue. Inside the components folder you can see a file called Tutorial.vue. If you check for the usages you can realize that we can remove this unused file as well. So let’s do it.

Go to JsonConverter.vue file and add the template tag first. I need a ui with two columns. First column is to input the json string and second column is to output the converted json object. I supposed to use two text areas for that because content can be lengthy up to some extent. Add vue watch for listening to the state changes and update the output accordingly.

<template>
  <v-row>
    <v-col cols="6">
      <v-container class="input-text-area">
        <v-textarea label="Input Json String" v-model="input" :hint="hint" rows="20"></v-textarea>
      </v-container>
    </v-col>
    <v-col cols="6">
      <v-container class="output-text-area">
        <v-textarea label="Converted Json Object" v-model="output" readonly rows="20"></v-textarea>
      </v-container>
    </v-col>
  </v-row>
</template><script>
  export default {
    data() {
      return {
        hint: '"{\\"name\\":\\"John\\"}"', // "{\"name\":\"John\"}",
        input: "",
        output: "",
      };
    },
    watch: {
      input(val) {
        try {
          this.output = JSON.parse(val);
        } catch {
          this.output = "invalid json string";
        }
      },
    },
  };
</script><style scoped>
  .input-text-area {
    border: 4px solid blue;
  }
  .output-text-area {
    border: 4px solid red;
  }
</style>

In order to render the above ui add JsonConverter tag in index.vue file.

Shall we change the title bar now? Simply go to nuxt.config.js file and remove titleTemplate property in head object as we don’t need to show it. Then will remove the hypen from title value.

You can checkout my repo from https://github.com/SajithNew16/jsonConverter

Cheers !!!

Convert Json String To A Json Object In Nuxt js Application

Written by Sajith Chamara