diff --git a/examples/App.vue b/examples/App.vue
index 2fa98452b..6863c74e3 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,276 +1,12 @@
 <template>
   <div id="app" spellcheck="false">
-
-    <editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate">
-
-      <div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
-        <template v-if="marks">
-          <form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
-            <input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
-            <button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
-              <icon name="remove" />
-            </button>
-          </form>
-          <template v-else>
-            <button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
-              <icon name="bold" />
-            </button>
-            <button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
-              <icon name="italic" />
-            </button>
-            <button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
-              <icon name="code" />
-            </button>
-            <button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
-              <icon name="link" />
-            </button>
-          </template>
-        </template>
-      </div>
-      <div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, focused }">
-        <div v-if="nodes">
-          <button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
-            <icon name="paragraph" />
-          </button>
-          <button class="menubar__button" @click="nodes.heading.command({ level: 1 })" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }">
-            H1
-          </button>
-          <button class="menubar__button" @click="nodes.heading.command({ level: 2 })" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }">
-            H2
-          </button>
-          <button class="menubar__button" @click="nodes.heading.command({ level: 3 })" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }">
-            H3
-          </button>
-          <button class="menubar__button" @click="nodes.bullet_list.command" :class="{ 'is-active': nodes.bullet_list.active() }">
-            <icon name="ul" />
-          </button>
-          <button class="menubar__button" @click="nodes.ordered_list.command" :class="{ 'is-active': nodes.ordered_list.active() }">
-            <icon name="ol" />
-          </button>
-          <button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
-            <icon name="code" />
-          </button>
-          <button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
-            <icon name="checklist" />
-          </button>
-        </div>
-      </div>
-      <div class="editor__content" slot="content" slot-scope="props"></div>
-    </editor>
-
-    <!-- <pre>{{ data }}</pre> -->
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
-import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
-import MentionPlugin from './plugins/Mention.js'
-
 export default {
-  components: {
-    Editor,
-    Icon,
-  },
-  data() {
-    return {
-      linkUrl: null,
-      linkMenuIsActive: false,
-      plugins: [
-        new MentionPlugin(),
-      ],
-      data: {
-        "type": "doc",
-        "content": [
-          {
-            "type": "heading",
-            "attrs": {
-              "level": 1,
-            },
-            "content": [
-              {
-                "type": "text",
-                "text": "A renderless rich-text editor for Vue.js "
-              },
-            ],
-          },
-          {
-            "type": "paragraph",
-            "content": [
-              {
-                "type": "text",
-                "text": "This editor is based on "
-              },
-              {
-                "type": "text",
-                "marks": [
-                  {
-                    "type": "link",
-                    "attrs": {
-                      "href": "https://prosemirror.net"
-                    }
-                  }
-                ],
-                "text": "Prosemirror"
-              },
-              {
-                "type": "text",
-                "text": ", "
-              },
-              {
-                "type": "text",
-                "marks": [
-                  {
-                    "type": "italic"
-                  }
-                ],
-                "text": "fully extendable "
-              },
-              {
-                "type": "text",
-                "text": "and renderless. There is a plugin system that lets you render each node as "
-              },
-              {
-                "type": "text",
-                "marks": [
-                  {
-                    "type": "bold"
-                  }
-                ],
-                "text": "a vue component. "
-              },
-              {
-                "type": "text",
-                "text": "Things like mentions "
-              },
-              {
-                "type": "mention",
-                "attrs": {
-                  "id": "Philipp"
-                }
-              },
-              {
-                "type": "text",
-                "text": " are also supported."
-              }
-            ]
-          },
-          {
-            "type": "code_block",
-            "content": [
-              {
-                "type": "text",
-                "text": "body {\n  display: none;\n}"
-              }
-            ]
-          },
-          {
-            "type": "todo_list",
-            "content": [
-              {
-                "type": "todo_item",
-                "attrs": {
-                  "done": true
-                },
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "There is always something to do"
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "todo_item",
-                "attrs": {
-                  "done": false
-                },
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "This list will never end"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "bullet_list",
-            "content": [
-              {
-                "type": "list_item",
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "A regular list"
-                      }
-                    ]
-                  }
-                ]
-              },
-              {
-                "type": "list_item",
-                "content": [
-                  {
-                    "type": "paragraph",
-                    "content": [
-                      {
-                        "type": "text",
-                        "text": "With regular items"
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            "type": "paragraph",
-            "content": [
-              {
-                "type": "text",
-                "text": "It's amazing 👏"
-              },
-            ]
-          }
-        ]
-      },
 
-    }
-  },
-  methods: {
-    showLinkMenu(type) {
-      this.linkUrl = type.attrs.href
-      this.linkMenuIsActive = true
-      this.$nextTick(() => {
-        this.$refs.linkInput.focus()
-      })
-    },
-    hideLinkMenu() {
-      this.linkUrl = null
-      this.linkMenuIsActive = false
-    },
-    setLinkUrl(url, type, focus) {
-      type.command({ href: url })
-      this.hideLinkMenu()
-      focus()
-    },
-    onUpdate(state) {
-      this.data = state.doc.toJSON()
-    },
-  },
 }
 </script>
 
diff --git a/examples/plugins/Mention.js b/examples/Components/Routes/Default/Mention.js
similarity index 100%
rename from examples/plugins/Mention.js
rename to examples/Components/Routes/Default/Mention.js
diff --git a/examples/Components/Routes/Default/index.vue b/examples/Components/Routes/Default/index.vue
new file mode 100644
index 000000000..7fab149da
--- /dev/null
+++ b/examples/Components/Routes/Default/index.vue
@@ -0,0 +1,273 @@
+<template>
+	<div>
+		<editor :editable="true" class="editor" :doc="data" :extensions="plugins" @update="onUpdate">
+			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
+				<template v-if="marks">
+					<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
+						<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
+						<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
+							<icon name="remove" />
+						</button>
+					</form>
+					<template v-else>
+						<button class="menububble__button" @click="marks.bold.command" :class="{ 'is-active': marks.bold.active() }">
+							<icon name="bold" />
+						</button>
+						<button class="menububble__button" @click="marks.italic.command" :class="{ 'is-active': marks.italic.active() }">
+							<icon name="italic" />
+						</button>
+						<button class="menububble__button" @click="marks.code.command" :class="{ 'is-active': marks.code.active() }">
+							<icon name="code" />
+						</button>
+						<button class="menububble__button" @click="showLinkMenu(marks.link)" :class="{ 'is-active': marks.link.active() }">
+							<icon name="link" />
+						</button>
+					</template>
+				</template>
+			</div>
+			<div class="menubar" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, focused }">
+				<div v-if="nodes">
+					<button class="menubar__button" @click="nodes.paragraph.command" :class="{ 'is-active': nodes.paragraph.active() }">
+						<icon name="paragraph" />
+					</button>
+					<button class="menubar__button" @click="nodes.heading.command({ level: 1 })" :class="{ 'is-active': nodes.heading.active({ level: 1 }) }">
+						H1
+					</button>
+					<button class="menubar__button" @click="nodes.heading.command({ level: 2 })" :class="{ 'is-active': nodes.heading.active({ level: 2 }) }">
+						H2
+					</button>
+					<button class="menubar__button" @click="nodes.heading.command({ level: 3 })" :class="{ 'is-active': nodes.heading.active({ level: 3 }) }">
+						H3
+					</button>
+					<button class="menubar__button" @click="nodes.bullet_list.command" :class="{ 'is-active': nodes.bullet_list.active() }">
+						<icon name="ul" />
+					</button>
+					<button class="menubar__button" @click="nodes.ordered_list.command" :class="{ 'is-active': nodes.ordered_list.active() }">
+						<icon name="ol" />
+					</button>
+					<button class="menubar__button" @click="nodes.code_block.command" :class="{ 'is-active': nodes.code_block.active() }">
+						<icon name="code" />
+					</button>
+					<button class="menubar__button" @click="nodes.todo_list.command" :class="{ 'is-active': nodes.todo_list.active() }">
+						<icon name="checklist" />
+					</button>
+				</div>
+			</div>
+			<div class="editor__content" slot="content" slot-scope="props"></div>
+		</editor>
+
+		<!-- <pre>{{ data }}</pre> -->
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import MentionPlugin from './Mention.js'
+
+export default {
+  components: {
+    Editor,
+    Icon,
+  },
+  data() {
+    return {
+      linkUrl: null,
+      linkMenuIsActive: false,
+      plugins: [
+        new MentionPlugin(),
+      ],
+      data: {
+        "type": "doc",
+        "content": [
+          {
+            "type": "heading",
+            "attrs": {
+              "level": 1,
+            },
+            "content": [
+              {
+                "type": "text",
+                "text": "A renderless rich-text editor for Vue.js "
+              },
+            ],
+          },
+          {
+            "type": "paragraph",
+            "content": [
+              {
+                "type": "text",
+                "text": "This editor is based on "
+              },
+              {
+                "type": "text",
+                "marks": [
+                  {
+                    "type": "link",
+                    "attrs": {
+                      "href": "https://prosemirror.net"
+                    }
+                  }
+                ],
+                "text": "Prosemirror"
+              },
+              {
+                "type": "text",
+                "text": ", "
+              },
+              {
+                "type": "text",
+                "marks": [
+                  {
+                    "type": "italic"
+                  }
+                ],
+                "text": "fully extendable "
+              },
+              {
+                "type": "text",
+                "text": "and renderless. There is a plugin system that lets you render each node as "
+              },
+              {
+                "type": "text",
+                "marks": [
+                  {
+                    "type": "bold"
+                  }
+                ],
+                "text": "a vue component. "
+              },
+              {
+                "type": "text",
+                "text": "Things like mentions "
+              },
+              {
+                "type": "mention",
+                "attrs": {
+                  "id": "Philipp"
+                }
+              },
+              {
+                "type": "text",
+                "text": " are also supported."
+              }
+            ]
+          },
+          {
+            "type": "code_block",
+            "content": [
+              {
+                "type": "text",
+                "text": "body {\n  display: none;\n}"
+              }
+            ]
+          },
+          {
+            "type": "todo_list",
+            "content": [
+              {
+                "type": "todo_item",
+                "attrs": {
+                  "done": true
+                },
+                "content": [
+                  {
+                    "type": "paragraph",
+                    "content": [
+                      {
+                        "type": "text",
+                        "text": "There is always something to do"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "todo_item",
+                "attrs": {
+                  "done": false
+                },
+                "content": [
+                  {
+                    "type": "paragraph",
+                    "content": [
+                      {
+                        "type": "text",
+                        "text": "This list will never end"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "bullet_list",
+            "content": [
+              {
+                "type": "list_item",
+                "content": [
+                  {
+                    "type": "paragraph",
+                    "content": [
+                      {
+                        "type": "text",
+                        "text": "A regular list"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "list_item",
+                "content": [
+                  {
+                    "type": "paragraph",
+                    "content": [
+                      {
+                        "type": "text",
+                        "text": "With regular items"
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          },
+          {
+            "type": "paragraph",
+            "content": [
+              {
+                "type": "text",
+                "text": "It's amazing 👏"
+              },
+            ]
+          }
+        ]
+      },
+
+    }
+  },
+  methods: {
+    showLinkMenu(type) {
+      this.linkUrl = type.attrs.href
+      this.linkMenuIsActive = true
+      this.$nextTick(() => {
+        this.$refs.linkInput.focus()
+      })
+    },
+    hideLinkMenu() {
+      this.linkUrl = null
+      this.linkMenuIsActive = false
+    },
+    setLinkUrl(url, type, focus) {
+      type.command({ href: url })
+      this.hideLinkMenu()
+      focus()
+    },
+    onUpdate(state) {
+      this.data = state.doc.toJSON()
+    },
+  },
+}
+</script>
\ No newline at end of file
diff --git a/examples/main.js b/examples/main.js
index 2fc9a2ddd..193b338ba 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -1,5 +1,6 @@
 import '@babel/polyfill'
 import Vue from 'vue'
+import VueRouter from 'vue-router'
 import svgSpriteLoader from 'helpers/svg-sprite-loader'
 import App from './App.vue'
 
@@ -8,6 +9,20 @@ svgSpriteLoader(__svg__.filename)
 
 Vue.config.productionTip = false
 
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    component: () => import('Components/Routes/Default'),
+  },
+]
+
+const router = new VueRouter({
+  routes,
+})
+
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')
diff --git a/package.json b/package.json
index af2843c82..35dc2fb63 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,10 @@
   },
   "babel": {
     "presets": [
-      [
-        "@babel/preset-env"
-      ]
+      "@babel/preset-env"
+    ],
+    "plugins": [
+      "@babel/plugin-syntax-dynamic-import"
     ]
   },
   "postcss": {
@@ -52,6 +53,7 @@
   "devDependencies": {
     "@babel/core": "^7.0.0-rc.2",
     "@babel/node": "^7.0.0-rc.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0-rc.2",
     "@babel/plugin-transform-runtime": "^7.0.0-rc.2",
     "@babel/polyfill": "^7.0.0-rc.2",
     "@babel/preset-env": "^7.0.0-rc.2",
@@ -94,6 +96,7 @@
     "uglify-js": "^3.4.7",
     "vue": "^2.5.17",
     "vue-loader": "^15.2.4",
+    "vue-router": "^3.0.1",
     "vue-style-loader": "^4.1.0",
     "vue-template-compiler": "^2.5.17",
     "webpack": "^4.15.1",
diff --git a/yarn.lock b/yarn.lock
index 8d76b77b9..2b88e2bfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -292,6 +292,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "7.0.0-rc.2"
 
+"@babel/plugin-syntax-dynamic-import@^7.0.0-rc.2":
+  version "7.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0-rc.2.tgz#a21957616ee59691d57de45d18e8e40b8855fa7e"
+  dependencies:
+    "@babel/helper-plugin-utils" "7.0.0-rc.2"
+
 "@babel/plugin-syntax-json-strings@7.0.0-rc.2":
   version "7.0.0-rc.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0-rc.2.tgz#6c16304a379620034190c06b50da3812351967f2"
@@ -8695,6 +8701,10 @@ vue-loader@^15.2.4:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-router@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
+
 vue-style-loader@^4.1.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"