Load data from JSON file in assets with NUXT.js Load data from JSON file in assets with NUXT.js json json

Load data from JSON file in assets with NUXT.js


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.jsonSee 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 aboutUsing 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.