Marketplace-web-components NPM

mwc

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit

VUE from Vue repo to Vue (as Library)

note : make sure "main": "./dist/mymwc.common.js", pointing to the right dist output 1) export the component in index.js to be like

   import Banner from './Banner'
   import LoginPage from './LoginPage'
   
   const Components = {
     Banner,
     LoginPage
   }
   
   Object.keys(Components).forEach(name => {
     Vue.component(name, Components[name])
   })
   
   export default Components

this export as vue components 2) make sure the package.json includes this script

"build-bundle": "vue-cli-service build --target lib --name mymwc ./src/components/index.js"

3) publish this anywhere (i.e npm)

4)to consume vue components in the consuming project in main.js

import Components from 'mwc-app';

note: mwc-app is the name of the project in package.json from before in main js in vue app then register them

  Vue.component(name, component);
});

#Vue to any framework yarn build copy assets from dist (css and js) in index.html (or publish to npm/mstash) in the consumer app install the library and point to the dist (css and js) example from react app

import React from 'react';
import logo from './logo.svg';
import './App.css';

import 'mwc-app/dist/js/app.js'
import 'mwc-app/dist/css/app.css'

function App() {
  return (
    <div className="App">
      <h1>hi</h1>
       <login-page></login-page>
        <banner-element>Rahmo</banner-element>
    </div>
  );
}

export default App;