Why Use JSON with Vue.js?

Static pages are fixed, but modern sites need dynamic behavior. JSON lets components render from data. You can pull JSON from APIs and transform it into live, interactive Vue components.

Vue.js directives like v-for, v-bind, and v-html make it straightforward to import, iterate through, and render JSON-driven content.

Understanding Vue.js Directives

Directives are Vue.js attributes added to elements. They control rendering and bind data:

Creating a Simple Component

Let's start with a basic component that accepts JSON props and can be reused across the app.

Example Vue Component

<template>
  <div v-bind:style="{ width: size, height: size, backgroundColor: color }">
    <div v-html="text"></div>
  </div>
</template>

<script>
export default {
  props: {
    text: String,
    size: String,
    color: String
  }
}
</script>

<style scoped>
div {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
</style>

Importing and Using JSON Data

To use JSON in Vue.js, import it and expose it via the component's data.

Creating a JSON File

First, create a JSON file with your data. Store it in a json folder within your src directory.

// data.json
[
  {
    "text": "This is a square",
    "size": "200px",
    "color": "#000000"
  },
  {
    "text": "Another square",
    "size": "150px",
    "color": "#FF5733"
  },
  {
    "text": "Third square",
    "size": "100px",
    "color": "#33FF57"
  }
]

Importing JSON in Vue

<template>
  <div>
    <square 
      v-for="item in myJson" 
      v-bind:key="item.id"
      v-bind:text="item.text"
      v-bind:size="item.size"
      v-bind:color="item.color"
    />
  </div>
</template>

<script>
import json from './json/data.json'
import Square from './components/Square.vue'

export default {
  name: 'App',
  components: {
    Square
  },
  data() {
    return {
      myJson: json
    }
  }
}
</script>

How Dynamic Rendering Works

The key to dynamic rendering is the v-for directive combined with component props:

• v-for: Iterates through the JSON array
• v-bind:key: Provides a unique identifier for each rendered component
• v-bind:text, size, color: Passes JSON properties as component props

Binding Styles Dynamically

Vue's v-bind:style directive allows you to apply styles dynamically based on JSON data:

<template>
  <div v-bind:style="{ 
    width: size, 
    height: size, 
    backgroundColor: color,
    border: '2px solid ' + color,
    borderRadius: '5px'
  }">
    {{ text }}
  </div>
</template>

Real-World Use Cases

This approach works well for many scenarios:

• Product listings: Display items from a JSON catalog
• Dashboard widgets: Create interactive dashboard components
• Card layouts: Build card grids from JSON data
• Form generation: Create dynamic forms based on JSON schemas
• Content management: Display content from CMS APIs

Working with Server Responses

In production, JSON often comes from APIs:

<script>
export default {
  data() {
    return {
      myJson: []
    }
  },
  async mounted() {
    // Fetch JSON from an API
    const response = await fetch('https://api.example.com/data')
    const data = await response.json()
    this.myJson = data
  }
}
</script>

Best Practices

Conclusion

Using JSON with Vue.js to build dynamic web pages is a powerful approach for modern web development. By combining JSON data with Vue directives like v-for, v-bind, and v-html, you can create flexible, data-driven interfaces.

This pattern scales from simple static sites to complex apps where components map to API responses. It keeps rendering logic manageable, components reusable, and content easy to update.