Use Vue Router to get started on different screens

range-of-motion · Oct 23, 2023 · e171927 · e171927
1 parent f6c5192
commit e171927
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     },
     "dependencies": {
         "axios": "^0.26.0",
-        "vue-color": "^2.7.0"
+        "vue-color": "^2.7.0",
+        "vue-router": "3"
     }
 }
diff --git a/resources/assets/js/prototype/app.js b/resources/assets/js/prototype/app.js
@@ -1,8 +1,32 @@
 import Vue from 'vue';
+import VueRouter from 'vue-router';
 
 import App from './components/App.vue';
 
-const app = new Vue({
+import Login from './screens/Login.vue';
+import Register from './screens/Register.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+    {
+        path: '/prototype/login',
+        name: 'login',
+        component: Login,
+    }, {
+        path: '/prototype/register',
+        name: 'register',
+        component: Register,
+    },
+];
+
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+});
+
+new Vue({
     el: '#app',
-    render: h => h(App)
-})
+    router,
+    render: h => h(App),
+});
diff --git a/resources/assets/js/prototype/components/App.vue b/resources/assets/js/prototype/components/App.vue
@@ -1,9 +1,7 @@
 <script setup>
-//
+
 </script>
 
 <template>
-    <div>
-        <div>Hello world</div>
-    </div>
+    <router-view></router-view>
 </template>
diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
@@ -0,0 +1,22 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div class="max-w-sm mx-auto my-12">
+        <div class="p-5 bg-white border rounded-md space-y-5">
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">E-mail</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Password</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+            </div>
+            <button class="w-full py-2.5 hover:bg-blue-600 transition text-sm bg-blue-500 text-white rounded-md">Log in</button>
+        </div>
+        <div class="mt-4 text-center">
+            <router-link class="text-sm" :to="{ name: 'register' }">First time here? Register.</router-link>
+        </div>
+    </div>
+</template>
diff --git a/resources/assets/js/prototype/screens/Register.vue b/resources/assets/js/prototype/screens/Register.vue
@@ -0,0 +1,34 @@
+<script setup>
+//
+</script>
+
+<template>
+    <div class="max-w-sm mx-auto my-12">
+        <div class="p-5 bg-white border rounded-md space-y-5">
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Name</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">E-mail</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="email" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Password</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Verify password</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="password" />
+            </div>
+            <div>
+                <label class="block mb-1 text-sm text-gray-700">Currency</label>
+                <input class="w-full px-3 py-2 text-sm border rounded-md" type="text" />
+            </div>
+            <button class="w-full py-2.5 hover:bg-blue-600 transition text-sm bg-blue-500 text-white rounded-md">Register</button>
+        </div>
+        <div class="mt-4 text-center">
+            <router-link class="text-sm" :to="{ name: 'login' }">Already using Budget? Log in.</router-link>
+        </div>
+    </div>
+</template>
diff --git a/resources/views/prototype.blade.php b/resources/views/prototype.blade.php
@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html>
+    <head>
+        <script src="https://cdn.tailwindcss.com"></script>
+    </head>
     <body>
         <div id="app"></div>
         @vite('resources/assets/js/prototype/app.js')

diff --git a/routes/web.php b/routes/web.php
@@ -27,8 +27,6 @@
 
 Route::get('/', [IndexController::class, 'index'])->name('index');
 
-Route::get('/prototype', \App\Http\Controllers\PrototypeController::class);
-
 Route::group(['middleware' => ['guest']], function () {
     Route::get('/login', [LoginController::class, 'index'])->name('login');
     Route::post('/login', [LoginController::class, 'store']);
@@ -133,3 +131,9 @@
 });
 
 Route::get('/logout', [LogoutController::class, 'index'])->name('logout');
+
+Route::prefix('prototype')
+    ->group(function () {
+        Route::get('/', fn () => 'Hello world');
+        Route::get('/{any}', \App\Http\Controllers\PrototypeController::class);
+    });