How to read static JSON file using async fetch in Nuxtjs

Nuxtjs is a framework which simplifying the development of the Vue project.

Using async fetch property we can read data from JSON file placed inside the static folder. There are other methods for fetching data like asyncData.


The fetch can be placed on any component while the asyncData can be used only with page component directly, that is only with in the route.

Inside our script please add the fetch after the component name as follows

return {
   dataHolder= []
async fetch() {    
    const url='./hashTags.json';
    this.dataHolder= await fetch(url).then(res =>

fetch can be configure for either client or server using the fetchOnServer property

The following Nuxtjs posts may help you

Published by


A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.