#3: Fixed the issue with vue vue-router and poi

SiddharthaSarma · Jul 1, 2018 · 164326c · 164326c
1 parent 55b60a4
commit 164326c
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "firebase": "^4.8.0",
     "poi": "^9.6.1",
     "vue-property-decorator": "^6.0.0",
+    "vue-router": "^3.0.1",
     "vuetify": "^0.17.5"
   },
   "devDependencies": {

diff --git a/src/components/list.vue b/src/components/list.vue
@@ -3,7 +3,9 @@
     <v-layout row wrap>
       <div class="spinner" v-if="loading"></div>
       <v-flex xs12 v-if="!loading && !computedPages.length">
-        <h1>There are no courses in library :(</h1>
+        <h1 class="text-xs-center">
+          There are no courses matching with search text :( Try different search.
+        </h1>
       </v-flex>
       <v-flex xs12 sm6 md2 class="course-card" v-for="course in computedPages" :key="course.id">
         <v-card flat tile>

diff --git a/src/components/search.vue b/src/components/search.vue
@@ -1,8 +1,7 @@
 <template>
   <v-content dark class="search-content">
     <v-layout>
-      <v-flex xs8>
-      </v-flex>
+      <v-flex xs8></v-flex>
       <v-flex xs4>
         <div class="mb-3 input-group input-group--prepend-icon input-group--text-field input-group--single-line input-group--solo">
           <div class="input-group__input">

diff --git a/src/components/signin.vue b/src/components/signin.vue
@@ -1,13 +1,49 @@
 <template>
-
+  <v-app id="inspire">
+    <v-content>
+      <v-container fluid fill-height>
+        <v-layout align-center justify-center>
+          <v-flex xs12 sm8 md4>
+            <v-card class="elevation-12">
+              <v-toolbar dark color="primary">
+                <v-toolbar-title>Login form</v-toolbar-title>
+                <v-spacer></v-spacer>
+              </v-toolbar>
+              <v-card-text>
+                <v-form>
+                  <v-text-field
+                    prepend-icon="person"
+                    name="login"
+                    label="Login"
+                    type="text"
+                  ></v-text-field>
+                  <v-text-field
+                    prepend-icon="lock"
+                    name="password"
+                    label="Password"
+                    id="password"
+                    type="password"
+                  ></v-text-field>
+                </v-form>
+              </v-card-text>
+              <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn color="primary" @click="login">Login</v-btn>
+              </v-card-actions>
+            </v-card>
+          </v-flex>
+        </v-layout>
+      </v-container>
+    </v-content>
+  </v-app>
 </template>
 
 <script>
 export default {
-
-}
+  methods: {
+    login() {
+      this.$router.push('/library')
+    }
+  }
+};
 </script>
-
-<style>
-
-</style>
diff --git a/src/index.ejs b/src/index.ejs
@@ -1,18 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Courses Library</title>
+    <link rel="icon" href="./assets/course.png">
+    <!-- Compiled and minified CSS -->
+    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
+  </head>
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Courses Library</title>
-  <link rel="icon" href="./assets/course.png">
-  <!-- Compiled and minified CSS -->
-  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
-</head>
+  <body>
+    <div id="app"></div>
+  </body>
 
-<body>
-  <div id="app"></div>
-</body>
-
-</html>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,6 +1,13 @@
 import Vue from 'vue';
-import App from './app.vue';
+import Routes from './routes.vue';
 import Vuetify from 'vuetify';
+import VueRouter from 'vue-router';
+import { routes } from './routes-config';
+
+Vue.use(VueRouter);
+const router = new VueRouter({
+  routes
+});
 
 Vue.use(Vuetify, {
   theme: {
@@ -12,5 +19,6 @@ Vue.use(Vuetify, {
 });
 new Vue({
   el: '#app',
-  render: h => h(App)
+  router,
+  render: h => h(Routes)
 });
diff --git a/src/routes-config.js b/src/routes-config.js
@@ -0,0 +1,9 @@
+import App from './app.vue';
+import SignIn from './components/signin'
+
+export const routes = [
+  { path: '/signin', component: SignIn },
+  { path: '/library', component: App }
+];
+
+
diff --git a/src/routes.vue b/src/routes.vue
@@ -0,0 +1,8 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script>
+export default {
+};
+</script>