Build Vue Components as standalone components

Version

3.0.0-beta.6

Reproduction link

https://codesandbox.io/s/k2qojnor8o

Steps to reproduce

I am using Vue cli and I have a components directory structure like this

- components
  - button
    - button.scss
    - button.vue
    - index.js
  index.js // imports all components

What is expected?

I want to get my build files like this

- build
  - button.js
  - button.css
  - index.js
  - components.css

What is actually happening?

It bundles the entire components into one component I use vue-cli-service build --target lib and after that, I get

- build
  - app.2fa32eb.css
  - app.fa24cd4.js

---

Is it possible to do this with Vue cli, or do I have to use a custom build.

[divyamrastogi]

@kayandrae07 : Could you maybe share a GitHub repository for the workaround you’ve come up with? It would be really helpful for people who might end up referencing this issue even later. Also, this could become a really cool medium article.

[kayandra]

@renoirb I’m using the solution you provided above, but I’m building the combination of all the components first. Then you can build the individual components.

Another thing I noticed is that you have to add the / after the folder name in the dest option like this:

yarn build --target lib --name Complete2 --dest dist/complete2/

For the main time, this is what I have working

yarn build --target lib --name components components/main.js

yarn build --target lib --name component1 --dest dist/component1 components/component1.js

I also set dist as main in package.json. So in my application I can require like this

import { Component1 } from 'components'
// or
import Component1 from 'components/component1/component1.common'

The second import format is a bit stressful, so I wrote a little script that runs after building the components. The script iterates the directories and renames any file ending with .common.js into index.js.