# mwc-app

> ## Project setup ``` yarn install ```

Latest version **2.0.0** (published 2019-08-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install mwc-app
pnpm add mwc-app
yarn add mwc-app
bun add mwc-app
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2019-08-06 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 4.6 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | rahmo alzahrani |
| Maintainers | rahmo |
| Keywords | mwc |

## Links

- npm: https://www.npmjs.com/package/mwc-app
- npm.io page: https://npm.io/package/mwc-app

## Dependencies (7)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [path](https://npm.io/package/path.md) ^0.12.7
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [vuelidate](https://npm.io/package/vuelidate.md) ^0.7.4
- [document-register-element](https://npm.io/package/document-register-element.md) ^1.14.1

## Recent versions

- 2.0.0 (latest) — 2019-08-06
- 1.9.0 — 2019-08-06
- 1.8.0 — 2019-08-06
- 1.7.0 — 2019-08-06
- 1.6.0 — 2019-08-06
- 1.5.0 — 2019-08-06
- 1.4.0 — 2019-08-06
- 1.3.0 — 2019-08-06
- 1.2.0 — 2019-08-05
- 1.1.0 — 2019-08-05
- 1.0.0 — 2019-08-05
- 0.9.0 — 2019-08-05

## README

# 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/).

---
_Source: https://npm.io/package/mwc-app · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._