Rendering local JSON data in vuepress

Question

I have a simple vuepress website, and I'm reading a .json file on the index.md using;

{{ require('./nba.json') }}

It works fine and looks like the image attached;

json on vuepress site

As you can see it doesn't look the best. In vuepress how can I specifically style what is being read from json, ie. change the font size, display the info in a neat way etc?

Answer 1

In Vuepress (and Vue + Webpack in general) imported json files are just JavaScript objects so you can use it with Vue to generate anything you want...

<div v-for="i in items">
    <h2>{{i.Home_neutral}} - {{i.Visitor_Neutral}}</h2>
    <p>{{ i.Date }}</p>
</div>

<script>
import data from './nba.json'
export default {
  data () {
      return {
          items: data
      }
  }
}
</script>

There are two ways how to use this code.

1. You can put it into docs/.vuepress/components directory as NbaMatches.vue - it becomes global component and can be used inside any md file as <NbaMatches /> (you will need to wrap the template part - everything above <script> - into <template></template>)
2. You can just copy/paste above code into any md file directly as is and it should work