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