CODEWITHSUNDEEP
javascriptnode.jsnpmvuejs2
Miguel Coder
Miguel Coder

Reputation: 1954

How to build a UI framework with Vue

I want to make a UI framework with Vue, but I don't want it to be just any UI framework. I want the User to be able to specify which components they want from the framework. Then I want to be able to bring them into my single-file-templates like this

import { component1, component2} from 'framework';

I would also like to be able to build this as an npm module.

Any advice would be greatly appreciated.

Upvotes: 1

Views: 417

Answers (1)

Cristi Jora
Cristi Jora

Reputation: 1752

The simplest way to do it is probably this package

One of the components I did some time ago uses it and it will basically work by default. CVC (first package from above) uses "bili" which is a small wrapper over rollup bundler and creates 3 different types of bundles (umd - browser, common - requirejs and es-ES6 import)

The only thing you are left to do is declare an export in your index file with your components

  export {
    component1,
    component2
  }

Se here as a reference

The only thing to take care here is the css. The default approach will extract css into different css files. See rollup plugin vue on how you could customize what should be done with css. Those options can be specified in the bili section of package json like here

If you want to take it one step further and import css along with the component you could look at Babel plugin component which is used by Element UI (most popular Vue UI library) to do that.

Upvotes: 2

Related Questions