Count number of files in a folder in Vue

Let's assume that you have the following folder structure:

terminal
├── lessons
|   ├── 1.vue
|   ├── 2.vue
|   ├── 3.vue
├── App.vue

If you want to count the number of files inside the /lessons folder from App.vue, you can use the require.context() function from Webpack.

Example:

html
<template>
    There are {{ total_files }} files. 
</template>

<script>
export default {
    name: 'App',
    data(){
        return {
            total_files: require.context('../lessons', false, /\.(vue)$/).keys().length
        }
    }
}
</script>

Hi, I'm Erik, an engineer from Barcelona. If you like the post or have any comments, say hi.