Added additional routes.

Author: umairsiddique

public/_redirects

@@ -0,0 +1 @@
+/*  /index.html 200

src/sample.json renamed to src/data/sample.json

@@ -1,14 +1,21 @@
 import Vue from 'vue/dist/vue.js'
-import App from './App.vue'
 import VueRouter from 'vue-router'
 
+import Example from './views/Example.vue'
+import DesignList from './views/DesignList.vue'
+import DesignEdit from './views/DesignEdit.vue'
+
 Vue.config.productionTip = false
 
 const routes = [
-  { path: '/', component: App },
+  { path: '/', component: Example },
+  { path: '/dashboard', component: DesignList },
+  { path: '/dashboard/new', component: DesignEdit },
+  { path: '/dashboard/edit/:designId', component: DesignEdit },
 ]
 
 const router = new VueRouter({
+  mode: 'history',
   routes
 })
 

src/main.js

@@ -0,0 +1,106 @@
+<template>
+  <div id="designEdit">
+    <div class="container">
+      <div id="bar">
+        <h1>Vue Email Editor (Demo)</h1>
+
+        <router-link to="/dashboard">Dashboard</router-link>
+        <button v-on:click="saveDesign">Save Design</button>
+        <button v-on:click="exportHtml">Export HTML</button>
+      </div>
+
+      <EmailEditor ref="editor" v-on:load="editorLoaded" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { EmailEditor } from '../components'
+
+export default {
+  name: 'designEdit',
+  components: {
+    EmailEditor
+  },
+  methods: {
+    editorLoaded() {
+    },
+    saveDesign() {
+      this.$refs.editor.saveDesign(
+        (design) => {
+          console.log('saveDesign', design);
+        }
+      )
+    },
+    exportHtml() {
+      this.$refs.editor.exportHtml(
+        (data) => {
+          console.log('exportHtml', data);
+        }
+      )
+    }
+  }
+}
+</script>
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+}
+
+#app, #designEdit {
+  height: 100%;
+}
+
+#designEdit .container {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  height: 100%;
+}
+
+#bar {
+  flex: 1;
+  background-color: #40B883;
+  color: #FFF;
+  padding: 10px;
+  display: flex;
+  max-height: 40px;
+}
+
+#bar h1 {
+  flex: 1;
+  font-size: 16px;
+  text-align: left;
+}
+
+#bar button {
+  flex: 1;
+  padding: 10px;
+  margin-left: 10px;
+  font-size: 14px;
+  font-weight: bold;
+  background-color: #000;
+  color: #FFF;
+  border: 0px;
+  max-width: 150px;
+  cursor: pointer;
+}
+
+#bar a {
+  flex: 1;
+  padding: 10px;
+  margin-left: 10px;
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+  border: 0px;
+  cursor: pointer;
+  text-align: right;
+  text-decoration: none;
+  line-height: 160%;
+}
+</style>

src/views/DesignEdit.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="designList">
+    <h1>My Designs</h1>
+
+    <p>
+      <router-link to="/dashboard/new">New Design</router-link>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'designList',
+  components: {
+  },
+  methods: {
+  }
+}
+</script>

src/views/DesignList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="example">
     <div class="container">
       <div id="bar">
         <h1>Vue Email Editor (Demo)</h1>
@@ -14,11 +14,11 @@
 </template>
 
 <script>
-import { EmailEditor } from './components'
-import sample from './sample.json';
+import { EmailEditor } from '../components'
+import sample from '../data/sample.json';
 
 export default {
-  name: 'app',
+  name: 'example',
   components: {
     EmailEditor
   },
@@ -52,11 +52,11 @@ html, body {
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 }
 
-#app {
+#app, #example {
   height: 100%;
 }
 
-#app .container {
+#example .container {
   display: flex;
   flex-direction: column;
   position: relative;