Build Vue Components as standalone components

[kayandra]

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.

[LinusBorg]

I think right now, you have to call the build command multiple times, for each component you want to create.

This is necessary because we always create a UMD module version of your lib, and these require a name, and each woudl require a different one.

[kayandra]

@LinusBorg thank you, I guess I can write a node script for now. Is there any plan to add this to the builder or will a PR be accepted?

[renoirb]

I'd like to expand a little bit about that topic and making sure the following is what's possible we can do -- or rather how it's designed to be used;

(Also that I didn't find official docs about that use-case, yet)

Assuming, we want a-button, and a-button-two (because it is recommended to use dashes in names) and that we might have more than one form of button.

I'd like to clarify the statement

(...) you have to call the build command multiple times, for each component you want to create.

So, if we have a set of components that share assets (css, mixins, etc), that we maintain in a file tree like this;

- components/
  - button/
    - button.scss
    - button.vue
    - button-two.vue

Assuming each .vue files above has matching {name: 'AButton'} (e.g. for button.vue) in their script tags.

And we want to export for other project usage as ;

- dist/
  - AButton/
    - AButton.umd.js
    - AButton.common.js
  - AButtonTwo/
    - AButtonTwo.umd.js
    - AButtonTwo.common.js
...

We'd have to run;

ASIDE I guess we can't use the same --dest dist/foo for more than one component, because the script might delete the folder (I haven't tested that though)

vue-cli-service build --target lib --name AButton --dest dist/AButton components/button/button.vue
vue-cli-service build --target lib --name AButtonTwo --dest dist/AButtonTwo components/button/button-two.vue

Which makes sense with

This is necessary because we always create a UMD module version of your lib, and these require a name, and each would require a different one.

Did I get that right?

[LinusBorg]

Yep you did.

[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.

[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.

[mbj36]

@kayandrae07 Could you please share the script or may be workaround with a Github repo ? It will be very much helpful..i am bit stuck

[wontolla92]

How can i remove the demo.html that every build --target lib create?
It's usless for an npm component library.

[LinusBorg]

You could add it to .npmignore and forget about it? As an alternative to removing it.