[Vuejs]-VueJS – Composition API – How to properly import and read a local JSON file

by

0👍

you can call result of iteration with room.id not rooms.id, this might just be a typo in your template code.

0👍

I’ve worked it out – I could only access the array by assigning the constant to roomData.rooms (as opposed to just roomData). So working code looks like:

<script>
import { ref } from 'vue'
import roomData from '../../data/db.json'

export default {
    components: {},

    setup(){
        const rooms = ref(roomData.rooms)

        console.log(rooms.value)

        return { rooms }
    }

}
</script>

0👍

to import your json you can do this with SFC in vuejs3

  <script setup>
    import roomData from '../../data/db.json'
    
    console.log(roomData)
    </script>

Leave a comment