How to Export Variables with a Dynamic Names

Question

I have a components folder in nuxt.js

/components/atoms/

and inside that folder I have an index.js to export all components dynamically

const req = require.context('./', true, /\.vue$/)

const components = {}

req.keys().forEach(fileName => {
  const componentName = fileName.replace(/^.+\/([^/]+)\.vue/, '$1')
  components[componentName] = req(fileName).default
})

export const { ButtonStyled, TextLead, InputSearch } = components

so I can import perfectly as I wish

import { ButtonStyled } from "@/components/atoms"

the problem is that I am defining the variables to be exported statically, fixed, so for each created component I would need to add another variable manually

I need to dynamically export the variable name

Example:

DynamicCreation = ['ButtonStyled', 'TextLead', 'InputSearch']

export const { DynamicCreation } = components 

// output -> export const { ButtonStyled, TextLead,InputSearch  } = components

I need to export the name of already unstructured variables

Note: I can not use this export default components because I can not import like this import { ButtonStyled } from "@/components/atoms"

score 0 · Answer 1 · answered Apr 25 '19 at 22:11

You should be able to do it like this:

export default components

Then in your file where you want to use the components:

import * as components from '@/components/atoms'

Then when you need to use the components in your Vue files, you need to map them:

@Component({
  components: {
    ButtonStyled: components.ButtonStyled
  }
})

And now you have:

<ButtonStyled></ButtonStyled>

score 0 · Answer 2 · answered Apr 25 '19 at 22:59

You can make something like this way, check if is what do you need.

Create a file to import a conjunct of components: allComponents.js

export default {
 componentOne: require('./passToOneComponent.js');
 componentTwo: require('./passToOneComponent.js');
 componentThree: require('./passToOneComponent.js');
}

After in index.js export the allComponents.js with the name that you wish:

export {default as SomeName } from 'allComponents.js';

So in the final file, you can make something like:

import { SomeName } from 'index.js';

SomeName.componentOne();

As i mentioned in the description of my question, i need import dynamically, not static — Yung Silva, Apr 25 '19 at 23:10

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

I created a library that does this type of export, anyone who wants can install via npm

I created a Webpack Plugin that makes named exports from a component, maybe this helps other people

Weback Plugin - named-exports

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 09 '19 at 16:08

Yung Silva

1,324
4
20
40

How to Export Variables with a Dynamic Names

3 Answers3

Weback Plugin - named-exports