diff --git a/erpnext/public/js/hub/App.vue b/erpnext/public/js/hub/App.vue
new file mode 100644
index 0000000..37ec4f3
--- /dev/null
+++ b/erpnext/public/js/hub/App.vue
@@ -0,0 +1,34 @@
+<template>
+	<div class="app">
+		<hello></hello>
+	</div>
+</template>
+
+<script>
+import ItemCardsContainer from './components/ItemCardsContainer.vue';
+export default {
+	name: 'app',
+	components: {
+		ItemCardsContainer
+	}
+}
+</script>
+
+<style>
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100%;
+	margin: 0;
+}
+.app {
+	color: #444;
+	margin-top: 100px;
+	max-width: 600px;
+	font-family: Helvetica, sans-serif;
+	text-align: center;
+	display: flex;
+	align-items: center;
+}
+</style>
diff --git a/erpnext/public/js/hub/components/ItemCard.vue b/erpnext/public/js/hub/components/ItemCard.vue
new file mode 100644
index 0000000..7a7f821
--- /dev/null
+++ b/erpnext/public/js/hub/components/ItemCard.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
+		<div class="hub-card is_local">
+			<div class="hub-card-header flex">
+				<div>
+					<div class="hub-card-title ellipsis bold">{{ title }}</div>
+					<div class="hub-card-subtitle ellipsis text-muted" v-html='subtitle'></div>
+				</div>
+			</div>
+			<div class="hub-card-body">
+				<img class="hub-card-image" :src="item.image"/>
+				<div class="hub-card-overlay">
+					<div class="hub-card-overlay-body">
+						<div class="hub-card-overlay-button" style="right: 15px; bottom: 15px;">
+							<button class="btn btn-default zoom-view">
+								<i class="octicon octicon-pencil text-muted"></i>
+							</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'item-card',
+	props: ['item', 'is_local'],
+	computed: {
+		title() {
+			return this.item.item_name
+		},
+		subtitle() {
+			return comment_when(this.item.creation);
+		}
+	}
+}
+</script>
+
+<style scoped></style>
diff --git a/erpnext/public/js/hub/components/ItemCardsContainer.vue b/erpnext/public/js/hub/components/ItemCardsContainer.vue
new file mode 100644
index 0000000..8014296
--- /dev/null
+++ b/erpnext/public/js/hub/components/ItemCardsContainer.vue
@@ -0,0 +1,30 @@
+<template>
+	<div>
+		<item-card
+			v-for="item in items"
+			:key="item[item_id]"
+			:item="item"
+			:is_local="is_local"
+		>
+		</item-card>
+	</div>
+</template>
+
+<script>
+import ItemCard from './ItemCard.vue';
+
+export default {
+	name: 'item-cards-container',
+	props: ['items', 'is_local'],
+	components: {
+		ItemCard
+	},
+	computed: {
+		item_id() {
+			return this.is_local ? 'item_code' : 'hub_item_code';
+		}
+	}
+}
+</script>
+
+<style scoped></style>
diff --git a/erpnext/public/js/hub/components/PublishPage.vue b/erpnext/public/js/hub/components/PublishPage.vue
new file mode 100644
index 0000000..06241d6
--- /dev/null
+++ b/erpnext/public/js/hub/components/PublishPage.vue
@@ -0,0 +1,58 @@
+<template>
+	<div
+		class="marketplace-page"
+		:data-page-name="page_name"
+	>
+		<item-cards-container
+			:items="valid_items"
+			:is_local="1"
+		>
+		</item-cards-container>
+	</div>
+</template>
+
+<script>
+import ItemCardsContainer from './ItemCardsContainer.vue';
+
+export default {
+	name: 'publish-page',
+	data() {
+		return {
+			page_name: frappe.get_route()[1],
+			valid_items: [],
+			search_value: ''
+		};
+	},
+	components: {
+		ItemCardsContainer
+	},
+	// watch: {
+	// 	// whenever search term changes, this function will run
+	// 	question: function (newQuestion, oldQuestion) {
+	// 		this.answer = 'Waiting for you to stop typing...'
+	// 		this.debouncedGetAnswer()
+	// 	}
+	// },
+	created() {
+		this.get_valid_items();
+	},
+	methods: {
+		get_valid_items() {
+			var vm = this;
+
+			frappe.call(
+				'erpnext.hub_node.api.get_valid_items',
+				{
+					search_value: this.search_value
+				}
+			)
+			.then(function (r) {
+				vm.valid_items = r.message;
+				frappe.dom.handle_broken_images(this.$wrapper);
+			})
+		}
+	}
+}
+</script>
+
+<style scoped></style>
diff --git a/erpnext/public/js/hub/components/publishing_area.js b/erpnext/public/js/hub/components/publishing_area.js
index 4775c3b..c19bf6b 100644
--- a/erpnext/public/js/hub/components/publishing_area.js
+++ b/erpnext/public/js/hub/components/publishing_area.js
@@ -17,6 +17,7 @@
                 ${title_html}
                 ${publish_button_html}
             </div>
+            <div id="vue-area"></div>
             <div class="empty-items-container flex align-center flex-column justify-center">
                 <p class="text-muted">${__('No Items Selected')}</p>
             </div>
diff --git a/erpnext/public/js/hub/pages/publish.js b/erpnext/public/js/hub/pages/publish.js
index f493658..d94a755 100644
--- a/erpnext/public/js/hub/pages/publish.js
+++ b/erpnext/public/js/hub/pages/publish.js
@@ -4,29 +4,35 @@
 import { make_search_bar } from '../components/search_bar';
 import { get_publishing_header } from '../components/publishing_area';
 import { ItemPublishDialog } from '../components/item_publish_dialog';
+import PublishPage from '../components/PublishPage.vue';
 
-erpnext.hub.Publish = class Publish extends SubPage {
-	make_wrapper() {
-		super.make_wrapper();
+erpnext.hub.Publish = class Publish {
+	constructor(parent) {
 		this.items_data_to_publish = {};
 		this.unpublished_items = [];
 		this.fetched_items = [];
 		this.fetched_items_dict = {};
 
-		frappe.realtime.on("items-sync", (data) => {
-			this.$wrapper.find('.progress-bar').css('width', data.progress_percent+'%');
+		this.$wrapper = $(`<div id="vue-area">`).appendTo($(parent));
 
-			if(data.progress_percent === 100 || data.progress_percent === '100') {
-				setTimeout(() => {
-					hub.settings.sync_in_progress = 0;
-					frappe.db.get_doc('Hub Settings')
-						.then(doc => {
-							hub.settings = doc;
-							this.refresh();
-						});
-				}, 500);
-			}
-		});
+		frappe.app = new Vue({
+			render: h => h(PublishPage),
+			mounted() {
+				console.log('Mounted For Publish page');
+			},
+		}).$mount('#vue-area');
+	}
+
+	show() {
+		this.$wrapper.show();
+	}
+
+	hide() {
+		this.$wrapper.hide();
+	}
+
+	show_message(message) {
+		this.$wrapper.prepend(NotificationMessage(message));
 	}
 
 	refresh() {
diff --git a/erpnext/public/js/hub/pages/subpage.js b/erpnext/public/js/hub/pages/subpage.js
index c833446..cded179 100644
--- a/erpnext/public/js/hub/pages/subpage.js
+++ b/erpnext/public/js/hub/pages/subpage.js
@@ -28,7 +28,10 @@
 
 	make_wrapper() {
 		const page_name = frappe.get_route()[1];
-		this.$wrapper = $(`<div class="marketplace-page" data-page-name="${page_name}">`).appendTo(this.$parent);
+		this.$wrapper = $(`<div class="marketplace-page"
+			data-page-name="${page_name}">`
+		).appendTo(this.$parent);
+
 		this.hide();
 	}