# 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 Vue from 'vue'
   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 

as

```Object.entries(Components).forEach((name, component) => {
  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;

```





### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).