Vue.js webpack : how to get the list of files in a directory?

Question

I am trying to get a list of all files in the 'assets/illustrations' directory of a SPA static app as a JSON object to be re-used in my Vuex store

the assets/illustrations dir structure is :

assets
  illustrations
    ill-1
       prop-1-1.jpg
       prop-1_2.jpg
    ill-2
       prop-2-1.jpg
       prop-2_2.jpg
    ill-3
       prop-3-1.jpg
       prop-3_2.jpg

my target is to have such object as a result :

  { illustrations: [ill-1: [prop-1-1.jpg, prop-1_2.jpg], ill-2: [prop-2-1.jpg, prop-2_2.jpg], ill-3: [prop-3-1.jpg, prop-3_2.jpg]] }

In my App.vue , I fire a method getIllustrations() when the app component is mounted

<script>
export default {
  name: 'app',
  data () {
    return {}
  },
  methods: {
    getIllustrations () {
      const path = require('path')
      const fs = require('fs')
      fs.readdir(path.join(__dirname, 'assets/illustrations'), (err, items) => {
        if (err) { console.log(err) }
        console.log(items)
      })
    }
  },
  mounted () {
    this.getIllustrations()
  }
}
</script>

but I get an error :

 Error in mounted hook: "TypeError: fs.readdir is not a function"

I also tried to run this function in the main.js file ( which is running on the server ..) same error..

WHere am I wrong ? thanks for feedback

Do you need this to dynamically read the directory at run time or can it be built statically? — Phil
– Phil, Commented Feb 19, 2018 at 3:34

HJo · Accepted Answer · 2019-09-25 04:44:49Z

25

You can utilize webpack's require.context() to list files in a given directory at compile time.

https://webpack.js.org/guides/dependency-management/

const illustrations = require.context(
  '@/assets/illustrations',
  true,
  /^.*\.jpg$/
)
console.log(illustrations.keys())

answered Sep 25, 2019 at 4:44

HJo

2,3002 gold badges27 silver badges32 bronze badges

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

1 Comment

giuliano-macedo Over a year ago

Be aware that for custom file formats (like yaml) you need a custom loader for this to work without warnings, and i think that with some loaders + regex it will increase your bundle size / memory consumption as stated in the docs.

Zhang Buzz · Accepted Answer · 2018-02-19 03:12:30Z

-4

fs is server side module. You cannot use fs in the browser, there is no solution to this, it's technically impossible.

https://github.com/vuejs-templates/webpack/issues/262

answered Feb 19, 2018 at 3:12

Zhang Buzz

11.2k6 gold badges44 silver badges47 bronze badges

1 Comment

HJo Over a year ago

Not true, you can use require.context()

Collectives™ on Stack Overflow

Vue.js webpack : how to get the list of files in a directory?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related