Q:

Dynamically add all components in a folder

So I'm currently building a tutorial, where the number of pages will continuously expand as more features are added, currently I am manually adding each file to the displaying file, i.e.
const Page0 = () => import("../../components/tutorial/Page0/index.vue");
const Page1 = () => import("../../components/tutorial/Page1/index.vue");

but obviously if this isn't very well handled once it gets really big i.e.
const Page0 = () => import("../../components/tutorial/Page0/index.vue");
...
const Page100 = () => import("../../components/tutorial/Page100/index.vue");

So I was wondering if there was a way to know let vue.js know that it should be fetching all files/folders in a certain folder and render each of them as a component with 'Page' + number name.
Ordering matters.
full code sandbox here https://codesandbox.io/s/serene-curie-it7xo?file=/pages/tutorial/_page.vue:102-247

A:

use dynamic loading then.
in your _page.vue
function mapComponents() {
  let components = {};
  for (let i = 0; i < 2; i++) { // 2 should be your pages amount
    components["Page" + i] = () =>
      import(`../../components/tutorial/Page${i}/index.vue`);
  }
  return components;
}
export default {
  components: mapComponents(),
  computed: {
    current() {
//.... other code

in your tutorial.vue
data() {
    return {
      pages: [...Array(2).keys()] // same here, 2 should be your pages amount
    };
  },

maybe just use another function to get the amount of the page, but you got the idea :)
working sample : https://codesandbox.io/s/clever-feynman-vgm93?file=/pages/tutorial.vue:280-347

