1

I have a number of SVG cards as components in Vue; I probably have 50 or more. I could import them one by one just after the script tag:

<script>
import MyVueComponent1 from "~/components/MyVueComponent1.vue";
import MyVueComponent2 from "~/components/MyVueComponent2.vue";
import MyVueComponent3 from "~/components/MyVueComponent3.vue";
...
import MyVueComponent50 from "~/components/MyVueComponent50.vue";

But I've been reading that I can do this programmatically. I just haven't found any one example that makes it crystal clear to me. I able to register the components dynamically but I'm not certain how to import an entire folder of components.

I was able to register the components dynamically using this code in the created hook:

created() {
    const requireComponent = require.context(
      // Look for files in the current directory
      "../components",
      // Do not look in subdirectories
      false,
      // Only include "S" prefixed .vue files
      /S[\w-]+\.vue$/
    );

    // For each matching file name...
    requireComponent.keys().forEach((fileName) => {
      // Get the component config
      const componentConfig = requireComponent(fileName);
      // Get the PascalCase version of the component name
      fileName = fileName.replace("./", "");
      fileName = fileName.replace(".vue", "");
      const componentName = fileName;
      this.generatedComponentList.push(componentName);
      // Globally register the component
      Vue.component(componentName, componentConfig.default || componentConfig);
    });
  },

And I'm using the generatedComponentList of component names to display the cards:

<div
      v-for="componentName in generatedComponentList"
      :key="componentName"
    >
      <component :is="componentName" :id="componentName"></component>
    </div>

But I'd love to get rid of all the import lines under the script tag and have cleaner and more dynamic code. That way if I add a new component card to the folder, it will simply be "picked up" and displayed without having to add the "import" line, or register the component etc. Hopefully I've clearly articulated what I'm looking to achieve.

tony19
  • 125,647
  • 18
  • 229
  • 307
sandalwoodsh
  • 129
  • 1
  • 11
  • I do not understand your question - specifically the last paragraph. `require.context` does exactly what you want - just remove your static imports – Michal Levý Sep 22 '21 at 08:22
  • Does this answer your question? [How do I properly import multiple components dynamically and use them in Nuxt?](https://stackoverflow.com/questions/69200097/how-do-i-properly-import-multiple-components-dynamically-and-use-them-in-nuxt) – kissu Sep 22 '21 at 09:06
  • @kissu I do not think he is looking for dynamic components. It all looks to me pretty static in terms of runtime but dynamic at build time - more like auto-discover components at build + create a list of components to use at runtime – Michal Levý Sep 22 '21 at 09:43

2 Answers2

0

Nuxt auto-imports the components you use from the ~/components directory, so you don't need to import or register them explicitly.

This feature is enabled in nuxt.config.js with the components config:

// nuxt.config.js
export default {
  components: true
}
tony19
  • 125,647
  • 18
  • 229
  • 307
  • And if you want to import then all even if nested into other other directories in `components`, you can follow this answer: https://stackoverflow.com/a/66336654/8816585 – kissu Sep 22 '21 at 06:53
  • Meanwhile, I'm not sure that it's the best in terms of performance: https://github.com/nuxt/components/issues/227#issuecomment-902013353 – kissu Sep 22 '21 at 07:02
0

Thanks tony19 suggesting I look at the nuxt.config.js file, your answer definitely put me on the right track; also thanks to whoever suggested 1 might be the right answer.

Here's the solution that worked for me:

Based on tony19's suggestion I looked at my nuxt.config.js file; specifically the component section. I already had this line in my code to automatically import any components in my components folder:

components: true,

But the components I wanted to import were nested within another folder within the components folder.

After reading this 2 from the nuxt.org docs, I replaced my previous code with this:

//components: true,
  components: [
    // Equivalent to { path: '~/components' }
    '~/components',
    { path: '~/components/myTargetComponents', extensions: ['vue'] }
  ],

Then, I was able to remove all of my import lines:

<script>
import MyVueComponent1 from "~/components/MyVueComponent1.vue";
import MyVueComponent2 from "~/components/MyVueComponent2.vue";
import MyVueComponent3 from "~/components/MyVueComponent3.vue";
...
import MyVueComponent50 from "~/components/MyVueComponent50.vue";

In my index.vue file I don't have anything listed in the components section anymore...just this as a reminder to myself:

,
  components: {
    //see nuxt.config.js file ...component section
  },

Just to be clear, in my index.vue file, I don't import any components using this format, "import MyVueComponent1 from "~/components/MyVueComponent1.vue"; AND I don't have anything listed in the components section. Also just to clarify, the components I'm wanting to import ARE in a sub folder of the components folder (~/components/myTargetComponents). I realize now that I didn't clearly articulate that in my original post.

As a related piece of this...

As you can see from my original post, I'm using a block of code in the created hook to populate a list of the component names:

this.generatedComponentList.push(componentName);

And then using this list to iterate through the component cards:

<div
      v-for="componentName in generatedComponentList"
      :key="componentName"
    >
      <component :is="componentName" :id="componentName"></component>
    </div>

But I'm wondering if there's a list of these components already generated by nuxt.config.js file. Any suggestions? And again, thanks everyone for the help, I greatly appreciate it.

sandalwoodsh
  • 129
  • 1
  • 11