Loading local json using dynamic path in Vue3

Question

I am trying to do a simple single page website that has texts stored in a local json files. Let's say it is a website that lists famous cartoon cats and dogs each on separate view (page). The view template (views/testcard.vue) for both cats and dogs is the same, but texts for cats and dogs are stored in separate json files (assets/json/cats.json & assets/json/dogs.json).

I know how to import a json to the view, but that is a static path. But the QUESTION IS: How do I import the json to the view using path that is based on props/params so that in case of a cat it is cats.json and in case of a dog it is dogs.json?

The urls are in form of domain.com/cat/garfield I have succesfully made both the specie (cat / dog) and individual animal (Garfield, Pluto...) available in the view file by providing them via router (router/index.js) like shown below.

{
        path: "/cats/:currentAnimal",
        name: "Cats",
        component: () => import("../views/Testcard.vue"),
        props: {
            currentType: "cat",
            jsonLocation: "@/assets/json/cats.json",
        },
    },
    {
        path: "/dogs/:currentAnimal",
        name: "Dogs",
        component: () => import("../views/Testcard.vue"),
        props: {
            currentType: "dog",
            jsonLocation: "@/assets/json/dogs.json",
        },
    },

And views/Testcard.vue looks like this:

<template>
    <div class="card">
        <h1>{{ currentAnimal }} is a famous {{ currentType }}</h1>
    </div>
</template>

<script>
import { computed } from "vue";
import { useRoute } from "vue-router";
//the line below would work, but it is static path
//import json from '@/assets/json/cats.json';
export default {
    name: "Testcard",
    props: ["currentType", "jsonLocation"],
    setup() {
        const route = useRoute();
        const currentAnimal = computed(() => route.params.currentAnimal);
        return {
            currentAnimal,
        };
    },
};
</script>

I am using Vue3, but this might not be any different from Vue2. The website will not have any calls to outside sources so I would like to keep this as simple as possible.

Dan · Accepted Answer · 2021-02-07 16:22:27Z

3

Don't store the @ alias in the json, or Webpack will fail to locate the file. You can get rid of the whole path:

jsonLocation: "cats.json"

jsonLocation: "dogs.json"

When you use import dynamically it returns a promise which resolves to a module with the json in the default property:

setup(props) {
  import(`@/assets/json/${props.jsonLocation}`).then(module => {
    console.log(module.default);
  });
},

answered Feb 7, 2021 at 16:22

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleg Abrazhaev Over a year ago

for some reason, I keep getting this App.vue?847a:20 Error: Cannot find module '@/assets/config/env.local.json' error, with the same code and correct path

Collectives™ on Stack Overflow

Loading local json using dynamic path in Vue3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related