Use JSON to dynamically build web pages with Vue.js

https://pixabay.com/en/code-coding-programming-css-2620118/

Welcome to Part 2 of my Vue.js tutorial where we will take a closer look at reusable components and dynamic web page building.

Take a quick look at Part 1 to learn:

• How to quickly get up and running with the Vue.js development environment
• What a Vue component is
• How to build Vue components
• Use properties to dynamically size components

While designing our new site htmlallthethings.com (coming soon) I went through a natural progression with Vue.js and this guide will be based on that.

Lets make our components more interesting

To start lets add a little bit of customization to the square component we made in Part 1.

In our square.vue file lets add a couple of directives*

*A directive is what we call the Vue.js attributes that we add to the elements we create. For example v-on, v-bind, v-if. Those are all directives that tell Vue.js to look at what is there and do the correct action with it.

square.vue

We are adding two new directives to our square

• v-html — pass in text or html code as a property, we’ll use this to display text in our square [ Reference]
• v-bind:style — bind a property or a variable to a component or html attribute, in this case a CSS Style [Reference]

Notice that we then have to add our two new variables that we are using in our directives to the props: {..} section in the <script> .. </script> section.

To finish off we just need to adjust the <style scoped> … </style>(CSS) slightly to make the text we are passing in a little more readable. I won’t get into this as it’s not in the scope of this guide, but if you have any questions feel free to leave a response!

How do we create these components dynamically?

So what happens if you can’t just manually create each component like this:

<square text="This is a square" size="large" color="#000"/>

As nice as it is in some circumstances to be able to just create a whole static web page and have it not change based on data or user input, in today’s web we know that isn’t the norm. Instead we can expect to create content based on server responses mostly in the form of JSON.

Instead of building out a whole back end to show how to do this we will just create a JSON file, with the response we would want to receive. This is a great way to quickly get a front end up and running while you are still working on the back end.

For our purposes here is the JSON:

data.json

Nice and simple but with it we can use really interesting functions of Vue.js to not only import but then iterate through this JSON and create our squares from it.

First we need to create the data.json file, make a folder in your src directory called json and put the file there. Then to import the file, in the
<script> ... </script> section of the app.vue file we want to put this line:

import json from './json/data.json'

Then we want to tell Vue.js that we want to use this json variable in our <template> or reactive html code. To accomplish this we need to add a new section in the <script> part of our code (the Vue instance) called the data(){ ...} section. This tells Vue.js that we want to add these variables to our reactivity system (the html code that is created by the Vue.js instance) .

So lets take a look at the code:

app.vue

If you take a look at the <script> tag we can see the new data property with a return. We need this return because we are using a custom component structure and we need to tell our instance that there are variables it needs to keep on eye on. When these variables change they will cause a re render to occur on the element they are bound too.

In our case we just need to store the json we imported into a template accessible variable myJson .

Once we do this we can start using myJson to build out our template. if you look at the <template> section of the code we can see how this is done. In our custom <square> component we again use a Vue.js directive v-for which allows us to iterate through all the elements in myJson .

As we iterate through we use the previously defined props and the v-bind directive to create each square:

• v-bind:key is a must when iterating through custom components. The key allows us to reference that specific element if we need to in the future [Reference]
• v-bind with text, size and color is just using the JSON we created to pass the attributes into our square components

Once you run this code you should see something like this:

It might seem like what we’ve done is just create some squares on a blank white page but if you take the skills you have learned you should be able to build out a simple page using either one or multiple JSON files. Which will prepare you for receiving server responses and using them in your Vue.js projects.

So lets summarize what we learned:

• New Vue.js directives, v-bind, v-for, v-html
• Creating a simple JSON structure
• Being able to import and use a JSON file in native Vue.js code
• Iterating through JSON in our template to create custom components dynamically

You can checkout the complete code base at this GitHub repo.

As htmlallthethings.com gets built, more of these guides will come out. Alongside these guides I am planning on doing a video tutorial series where we will be building out a hexagonal grid of widgets that you can use as your own personal dashboard. So make sure to check back in to this article as I’ll post the links for it here and also our social media’s (check them out below).

Connect With Us

Twitter | Facebook | Instagram | YouTube | Patreon | Podcast