Load data from JSON file in assets with NUXT.js

You may want to use "require" instead of "import" if you planning to load data within the loop.

jsons = ["json_one","json_two"]
jsons_readed = []

// In the loop
file = require(`./assets/data/geo/${jsons[i]}`)
jsons_readed.push(file)

Then I think you can use jsons_readed to access objects.


If the regions.json file won't change, you can easily put it in the static folder. Then the url will be /data/geo/regions.json See this question on the nuxt issues page


You can import JSON files with import data from 'data.json' and use the data property straight in your component.


You can use Nuxt Content for that:

Empower your NuxtJS application with @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML, XML and CSV files through a MongoDB like API, acting as a Git-based Headless CMS.

The basics are as easy as the following line. That will load the regions.json file, parse it, and store its content in the content variable. See Nuxt Content's documentation for more information about it.

const content = await this.$content('regions').fetch()

Alternatively you can read our blog post about Using Nuxt Content with a JSON File. It describes how to extend existing pages with JSON content but also how to dynamically generate pages based on it.

Disclaimer: I work at FrontAid CMS.