Can Vite import a folder structure?

Question

I have a bunch of subfolders in the src/pages folder as well as some .vue components. Using webpack, I was able to get a list of page paths and names using code like this:

export default require
  .context("../pages", true, /^./.*.vue$/)
  .keys()
  .map(page => page.slice(2).replace(".vue", ""))
  .filter(page => page !== "Index")
  .map(page => ({
    file: page,
    title: createTitle(page),
    path: slugify(kebabCase(page))
  }));

Vite doesn't seem to support this. I tried const pages = import.meta.glob('../pages/*.vue') but this only works for files, not files inside subfolders.

Know how to achieve this using Vite?

Answer 1

I found a way. It's not perfect, but it's not terrible either:

const pages = import.meta.glob('../pages/*.vue')
const folders = import.meta.glob('../pages/*/*.vue')
const both = {...pages, ...folders}
export default both

This is an improvement:

const pages = import.meta.glob('../pages/**/*.vue')
export default pages