[Vuejs]-How to load all Vue SFC in a specific directory in Nuxt?

by

0👍

It’s not a good idea to read the file as text with fs. fs is a nodejs module and it won’t work in client side. Not to mention you will have a hard time actually instanciating your components this way.

You can just use a glob import for the directory:

<template>
  <component :is="view" v-for"view in extensions" :key="view" />
</template>

<script setup>
import * as extensions from '@/components/extensions'
</script>

You just need to create an index file in your directory and export all your components. This is sadly a required manual step, this file won’t update itself when you add a new component.

|- extensions
 \_ index.js
 \_ Extension1.vue
 \_ Extension2.vue

// index.js
export { default as Extension1 } from './Extension1.vue'
export { default as Extension2 } from './Extension2.vue'

Leave a comment