Skip to content

Instantly share code, notes, and snippets.

@aelbore
Last active January 28, 2019 14:39
Show Gist options
  • Save aelbore/5fd0607a9f1815962efbf2b7b40432e7 to your computer and use it in GitHub Desktop.
Save aelbore/5fd0607a9f1815962efbf2b7b40432e7 to your computer and use it in GitHub Desktop.

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
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment