Search code examples
javascriptregexvue.jsvue-componentatomic-design

import multiple components into a single line (Atomic Design + Vue.JS)

I am developing a project with Vue.js and would like to apply atomic design methodology, but I would like to import the components in a clustered and smarter way

currently

import GridLayout from '@/components/bosons/GridLayout.vue'
import LocalStorage from '@/components/bosons/LocalStorage.vue'

import ButtonStyled from '@/components/atoms/ButtonStyled.vue'
import TextLead from '@/components/atoms/TextLead.vue'
import InputSearch from '@/components/atoms/InputSearch.vue'

import SearchForm from '@/components/molecules/SearchForm.vue'

how I wish

import {
    GridLayout,
    LocalStorage
} from '@/components/bosons'

import {
    ButtonStyled,
    TextLead,
    InputSearch
} from '@/components/atoms'

import {
    SearchForm
} from '@/components/molecules'

Sulution? I thought in on putting an index.js inside folders

/bosons/index.js

/atoms/index.js

/molecules/index.js

and index.js would import all components and export, so it would be something like

import ButtonStyled from './ButtonStyled.vue'

export default {
  ButtonStyled
}

or

export { default as ButtonStyled } from './ButtonStyled.vue'

works fine, but in this way is still static, every time you create a new component, need to add it index.js, each time you delete a component, you also need to delete it from index.js

I need to import all components of the folder dynamically

the closer I got was that,

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

const modules = {}

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

export const { ButtonStyled, TextLead } = modules

but I'm still defining the export variable names statically, I need to define dynamics based on the components inside the folder

NOTE: I can not use

export default modules

if I use the above code snippet I will not be able to import the way I need it, which is:

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

  • I created a Plugin Webpack, a library that is perfect for those who work with the methodology of Atomic Design, basically it makes exports named from a directory, maybe this helps other people

    Weback Plugin - named-exports