vue-web-components.md

Getting Started

Install Dependencies

npm init -y
npm install --save-dev vue @vue/cli http-server

Create Web Component

Create vue component src/my-component.vue.

<template>
  <div>
    <h1>Hello {{ name }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: 'Jane'
    }
  }
}
</script>

<style scoped>
  h2 {
    color: red;
  }
</style>

Create scripts in package.json

 "scripts": {
  "build": "vue build --target wc ./src/my-component.vue",
  "serve": "http-server dist"
 }

Build vue component to web components
```
npm run build
```
Run your server
```
npm run serve
```
Browse your application
```
http://localhost:8080/demo.html
```

Add UserList Vue Component

Install Dependencies
```
npm install rxjs vue-rx
```

Add vue component src/UserList.vue

<template>
  <div id="app">
    <table>
      <tr>
        <th>Name</th>
        <th>Email</th>
      </tr>
      <tr v-for="(profile, index) in profiles" v-bind:key="index">
        <td>{{ profile.name }}</td>
        <td>{{ profile.email }}</td>
      </tr>
    </table>      
  </div>
</template>

<script>
import { from } from 'rxjs';
import { flatMap } from 'rxjs/operators';

const getProfiles = () => {
  return from(fetch('https://jsonplaceholder.typicode.com/users'))
        .pipe(flatMap(response => response.json())) 
}

export default {
  name: 'UserList',
  subscriptions () {
    return {
      profiles: getProfiles()
    }
  }
}
</script> 

<style scoped>
  table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
  }

  th, td {
    text-align: left;
    padding: 16px;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2
  }
</style>

update src/my-component.vue file.

<template>
  <div>
    <h1>Hello {{ name }}</h1>
    <UserList />
  </div>
</template>

<script>
import Vue from 'vue'
import VueRx from 'vue-rx'
import UserList from './UserList'

Vue.use(VueRx)

export default {
  components: {
    UserList
  },
  props: {
    name: {
      type: String,
      default: 'Jane'
    }
  }
}
</script>

<style scoped>
  h2 {
    color: red;
  }
</style>

Build vue component to web components
```
npm run build
```
Run your server
```
npm run serve
```
Browse your application
```
http://localhost:8080/demo.html
```

aelbore/vue-web-components.md

Getting Started

Create Web Component

Add UserList Vue Component