Is it possible to import *.vue files in a folder?

Based on Potray and Fosuze's working answers for easy reference:

const files = require.context('.', false, /\.vue$/) const modules = {} files.keys().forEach((key) => { if (key === './index.js') return modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key) }) export default modules 

See the medium post I created

I'll explain it in an in-depth / easy way there.

For a quick answer here.

• Create a folder (let's say colors folders for example)

• create and or add your Vue files inside of that folder (sample red.vue, blue.vue, green.vue)

• add to that folder (colors folder) an index.js containing (This is based on oprogfrogo's answer.).

const files = require.context('.', false, /\.vue$/) const modules = {} files.keys().forEach((key) => { if (key === './index.js') return modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key) }) export default modules 

your directory looks like for example

• colors/
• colors/red.vue
• colors/blue.vue
• colors/green.vue
• colors/index.js

then in any component, you can

 import colors from "./colors/index" //location of the folder console.log(colors); let yourComponent = colors['blue'].default // wil get you that component 

where ['is the file name']

then in your template, you can

<component v-bind:is="yourComponent"></component> 

unplugin-vue-components

This is a Vue plugin that can auto-import components when they are used. Supports both Vue 2 and Vue 3. See installation instructions here.

It will automatically turn this:

<template> <div> <HelloWorld msg="Hello Vue 3.0 + Vite" /> </div> </template> <script> export default { name: 'App', } </script> 

into this:

<template> <div> <HelloWorld msg="Hello Vue 3.0 + Vite" /> </div> </template> <script> import HelloWorld from './src/components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld, }, } </script> 

Notice that it automatically does the import and also the components: {...} registration, so you don't have to.