Integrated Vue-Router and Clipboard.js

Author: jmosawy

src/App.vue

@@ -1,50 +1,16 @@
 <template>
   <div class="wrapper" id="app">
     <bc-header></bc-header>
-    <div class="page">
-      <section class="search">
-        <div class="container">
-          <div class="box-1">
-            <search-box></search-box>
-          </div>
-        </div>
-      </section>
-      <section class="brand">
-        <div class="container">
-          <brand-row v-for="item in colorData">
-            <h2 slot="title">{{ item.name }}</h2>
-
-            <template v-for="color in item.colors">
-              <color-box slot="colors" :color="color"></color-box>
-            </template>
-          </brand-row>
-        </div>
-      </section>
-    </div>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-  /* eslint-disable object-shorthand */
-
   import BcHeader from './components/header.vue';
-  import SearchBox from './components/search-box.vue';
-  import BrandRow from './components/brand-row.vue';
-  import ColorBox from './components/color-box.vue';
-
-  import colorData from './assets/data.json';
 
   export default {
-    data() {
-      return {
-        colorData: colorData,
-      };
-    },
     components: {
       BcHeader,
-      SearchBox,
-      BrandRow,
-      ColorBox,
     },
   };
 </script>

src/index.js

@@ -5,9 +5,23 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './App.vue';
 
+import HomePage from './pages/Home.vue';
+
 import Style from './style.scss';
 
+Vue.use(VueRouter);
+
+const routes = [
+  { path: '/', component: HomePage },
+];
+
+const router = new VueRouter({
+  mode: 'history',
+  routes,
+});
+
 const app = new Vue({
   el: '#app',
   render: h => h(App),
-});
+  router,
+}).$mount('#app');

src/pages/Home.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="page">
+    <section class="search">
+      <div class="container">
+        <div class="box-1">
+          <search-box></search-box>
+        </div>
+      </div>
+    </section>
+    <section class="brand">
+      <div class="container">
+        <brand-row v-for="item in colorData">
+          <h2 slot="title">{{ item.name }}</h2>
+
+          <template v-for="color in item.colors">
+            <color-box slot="colors" :color="color"></color-box>
+          </template>
+        </brand-row>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+  /* eslint-disable object-shorthand */
+
+  import Clipboard from 'clipboard';
+
+  import SearchBox from '../components/search-box.vue';
+  import BrandRow from '../components/brand-row.vue';
+  import ColorBox from '../components/color-box.vue';
+
+  import colorData from '../assets/data.json';
+
+  export default {
+    data() {
+      return {
+        colorData: colorData,
+      };
+    },
+    components: {
+      SearchBox,
+      BrandRow,
+      ColorBox,
+    },
+    created: function () {
+      const clipboard = new Clipboard('.color-box');
+      clipboard.on('success', () => {
+      });
+    },
+  };
+</script>