├── .gitignore
├── README.md
├── app.vue
├── assets
    └── main.css
├── components
    ├── GoBack.vue
    ├── IconBack.vue
    ├── IconChevronDown.vue
    ├── IconChevronUp.vue
    ├── IconEdit.vue
    ├── IconLink.vue
    ├── IconLogout.vue
    ├── IconPlusCircle.vue
    ├── IconRefresh.vue
    ├── IconSearch.vue
    ├── IconSquaresPlus.vue
    ├── IconTrash.vue
    ├── SearchInput.vue
    ├── TableTh.vue
    └── TheMainNav.vue
├── formkit.config.ts
├── layouts
    ├── centered.vue
    ├── default.vue
    └── plain.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── index.vue
    ├── links
    │   ├── [id].vue
    │   ├── create.vue
    │   └── index.vue
    ├── login.vue
    ├── logout.vue
    ├── me.vue
    └── register.vue
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # "Laravel Backends for Vue.js 3" Front End Source Code
 2 | 
 3 | [![](https://vueschool.io/media/1b4b17d7dfaf4a708fbd160ba767b6d8/laravel-backends-for-vue-js-3-not-transparent.jpg)](https://vueschool.io/courses/laravel-backends-for-vue-js-3)
 4 | 
 5 | This repository contains the front end source code for the course: "Laravel Backends for Vue.js 3".
 6 | 
 7 | The main branch is the starting point for the course (the boilerplate code) and the solutions branch
 8 | includes commits for each lesson.
 9 | 
10 | ## Setup
11 | 
12 | Make sure to install the dependencies:
13 | 
14 | ```bash
15 | # yarn
16 | yarn install
17 | 
18 | # npm
19 | npm install
20 | 
21 | # pnpm
22 | pnpm install --shamefully-hoist
23 | ```
24 | 
25 | ## Development Server
26 | 
27 | Start the development server on http://localhost:3000
28 | 
29 | ```bash
30 | npm run dev
31 | ```
32 | 
33 | ## Production
34 | 
35 | Build the application for production:
36 | 
37 | ```bash
38 | npm run build
39 | ```
40 | 
41 | Locally preview production build:
42 | 
43 | ```bash
44 | npm run preview
45 | ```
46 | 
47 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
48 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtLayout>
4 |       <NuxtPage></NuxtPage>
5 |     </NuxtLayout>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   @apply bg-gray-200;
 3 | }
 4 | h1 {
 5 |   @apply text-3xl font-thin mb-3;
 6 | }
 7 | 
 8 | .btn {
 9 |   text-decoration: none;
10 |   background: var(--fk-bg-submit);
11 |   color: var(--fk-color-submit);
12 |   font-size: var(--fk-font-size-button);
13 |   border-radius: var(--fk-border-radius);
14 |   cursor: pointer;
15 |   display: inline-flex;
16 |   width: auto;
17 |   justify-content: center;
18 |   padding: var(--fk-padding-button);
19 |   margin: var(--fk-margin-button);
20 |   position: relative;
21 |   transition: filter 0.25s;
22 |   border: 1px solid transparent;
23 |   line-height: var(--fk-line-height-button);
24 | }
25 | table {
26 |   @apply rounded overflow-hidden;
27 | }
28 | table thead {
29 |   @apply text-left bg-gray-800 text-white rounded-t;
30 | }
31 | table th {
32 |   @apply font-normal p-2;
33 | }
34 | table td {
35 |   border-bottom: 1px solid;
36 |   @apply p-3 border-gray-300;
37 | }
38 | 
39 | button.formkit-input,
40 | .btn {
41 |   @apply bg-gray-800 !important;
42 | }
43 | 
44 | /**
45 | Apply formkit like styles to non formkit inputs
46 | this way it looks the same before and after we use formkit
47 | **/
48 | form:not(.formkit-form) {
49 |   margin-bottom: 10px;
50 |   max-width: var(--fk-max-width-input);
51 | }
52 | label:not(.formkit-label) {
53 |   margin: var(--fk-margin-outer);
54 |   display: block;
55 | }
56 | label > div {
57 |   display: block;
58 |   margin: var(--fk-margin-label);
59 |   padding: var(--fk-padding-label);
60 |   font-family: var(--fk-font-family-label);
61 |   font-size: var(--fk-font-size-label);
62 |   font-weight: var(--fk-font-weight-label);
63 |   line-height: var(--fk-line-height-label);
64 | }
65 | input:not(.formkit-input) {
66 |   display: block;
67 |   width: 100%;
68 |   border-radius: var(--fk-border-radius);
69 |   padding: var(--fk-padding-input);
70 |   font-family: var(--fk-font-family-input);
71 |   font-size: var(--fk-font-size-input);
72 |   font-weight: var(--fk-font-weight-input);
73 |   line-height: var(--fk-line-height-input);
74 |   background-color: var(--fk-bg-input);
75 |   color: var(--fk-color-input);
76 |   position: relative;
77 |   box-shadow: var(--fk-border-box-shadow);
78 |   border-radius: var(--fk-border-radius);
79 |   display: flex;
80 |   align-items: center;
81 | }
82 | 


--------------------------------------------------------------------------------
/components/GoBack.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     href="#"
 4 |     class="text-sm mb-5 italic flex items-center mt-[-10px]"
 5 |     @click.prevent="useRouter().back()"
 6 |   >
 7 |     <IconBack class="w-2 mr-1" /><slot>Go back</slot>
 8 |   </a>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/components/IconBack.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconChevronDown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M19.5 8.25l-7.5 7.5-7.5-7.5"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconChevronUp.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M4.5 15.75l7.5-7.5 7.5 7.5"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconEdit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconLogout.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconPlusCircle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconRefresh.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconSearch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconSquaresPlus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/IconTrash.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     xmlns="http://www.w3.org/2000/svg"
 4 |     fill="none"
 5 |     viewBox="0 0 24 24"
 6 |     stroke-width="1.5"
 7 |     stroke="currentColor"
 8 |     class="w-6 h-6"
 9 |   >
10 |     <path
11 |       stroke-linecap="round"
12 |       stroke-linejoin="round"
13 |       d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
14 |     />
15 |   </svg>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/SearchInput.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | defineProps({
 3 |   modelValue: { type: String, required: true },
 4 | });
 5 | 
 6 | defineEmits<{
 7 |   (e: "update:modelValue", payload: string): void;
 8 | }>();
 9 | </script>
10 | <template>
11 |   <div class="relative">
12 |     <IconSearch
13 |       class="w-3 w-3 absolute top-[50%] translate-y-[-50%] left-2 opacity-30"
14 |     />
15 | 
16 |     <input
17 |       type="text"
18 |       placeholder="Search"
19 |       class="pl-10 p-2 rounded"
20 |       @input="
21 |         $emit('update:modelValue', ($event.target as HTMLInputElement).value)
22 |       "
23 |       :value="modelValue"
24 |     />
25 |   </div>
26 | </template>
27 | 


--------------------------------------------------------------------------------
/components/TableTh.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const props = defineProps({
 3 |   name: { type: String, required: true },
 4 |   modelValue: { type: String, required: true },
 5 | });
 6 | 
 7 | defineEmits<{
 8 |   (e: "update:modelValue", payload: string): void;
 9 | }>();
10 | 
11 | const withoutDash = computed(() => props.name.replace(/^-/, ""));
12 | const withDash = computed(() => `-${withoutDash.value}`);
13 | 
14 | const sorting = computed(
15 |   () => props.name === props.modelValue.replace(/^-/, "")
16 | );
17 | const desc = computed(() => props.modelValue.startsWith("-"));
18 | </script>
19 | <template>
20 |   <th>
21 |     <button
22 |       class="flex items-center"
23 |       @click="$emit('update:modelValue', desc ? withoutDash : withDash)"
24 |     >
25 |       <slot></slot>
26 |       <button v-if="sorting && desc">
27 |         <IconChevronDown class="inline w-2 ml-2" />
28 |       </button>
29 |       <button v-if="sorting && !desc">
30 |         <IconChevronUp class="inline w-2 ml-2" />
31 |       </button>
32 |     </button>
33 |   </th>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/components/TheMainNav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav
 3 |     class="bg-gray-800 p-4 shadow shadow-gray-900 text-white flex justify-between items-center"
 4 |   >
 5 |     <div>
 6 |       <NuxtLink to="/" class="text-3xl font-bold">
 7 |         <IconLink class="inline" />
 8 |         URLShortify
 9 |       </NuxtLink>
10 |     </div>
11 |     <div>
12 |       <NuxtLink to="/me">My Profile</NuxtLink>
13 |       <NuxtLink to="/links">Links</NuxtLink>
14 |       <NuxtLink to="/logout">
15 |         <IconLogout class="inline" />
16 |       </NuxtLink>
17 |     </div>
18 |   </nav>
19 | </template>
20 | <style scoped>
21 | a {
22 |   @apply text-white mr-3 no-underline;
23 | }
24 | </style>
25 | 


--------------------------------------------------------------------------------
/formkit.config.ts:
--------------------------------------------------------------------------------
1 | import { DefaultConfigOptions } from "@formkit/vue";
2 | 
3 | export default {
4 |   theme: "genesis",
5 | } as DefaultConfigOptions;
6 | 


--------------------------------------------------------------------------------
/layouts/centered.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-[100vh] flex justify-center items-center">
 3 |     <div
 4 |       class="p-5 rounded w-96 bg-white shadow border-t-[8px] border-gray-800"
 5 |     >
 6 |       <slot></slot>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import "@/assets/main.css";
 3 | </script>
 4 | <template>
 5 |   <div>
 6 |     <TheMainNav />
 7 |     <div class="p-10">
 8 |       <slot></slot>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/layouts/plain.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <slot></slot>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://nuxt.com/docs/api/configuration/nuxt-config
 2 | export default defineNuxtConfig({
 3 |   modules: ["@vueuse/nuxt", "@nuxtjs/tailwindcss", "@formkit/nuxt"],
 4 |   css: ["@/assets/main.css"],
 5 |   tailwindcss: {
 6 |     config: {
 7 |       content: ["./node_modules/laravel-vue-pagination/**/*.vue"],
 8 |     },
 9 |   },
10 |   runtimeConfig: {
11 |     public: {
12 |       appURL: "http://localhost",
13 |     },
14 |   },
15 |   routeRules: {
16 |     "/profiles/*": { swr: true },
17 |     "/*": { ssr: false },
18 |   },
19 | });
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "@nuxtjs/tailwindcss": "^6.2.0",
12 |     "nuxt": "3.0.0"
13 |   },
14 |   "dependencies": {
15 |     "@formkit/icons": "^1.0.0-beta.14",
16 |     "@formkit/nuxt": "^1.0.0-beta.14",
17 |     "@formkit/themes": "^1.0.0-beta.14",
18 |     "@formkit/vue": "^1.0.0-beta.14",
19 |     "@vueuse/nuxt": "^9.11.0",
20 |     "axios": "^1.2.3",
21 |     "laravel-vue-pagination": "^4.0.0",
22 |     "nanoid": "^4.0.0",
23 |     "query-string": "^8.1.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <h1 class="text-4xl">👋 Hello Laravel!</h1>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/pages/links/[id].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Update Link</h1>
 3 |   <GoBack>or go back to links</GoBack>
 4 |   <form>
 5 |     <label>
 6 |       <div>Short Link</div>
 7 |       <input type="text" />
 8 |     </label>
 9 | 
10 |     <label>
11 |       <div>Full Link</div>
12 |       <input type="text" />
13 |     </label>
14 | 
15 |     <button class="btn">Update Link</button>
16 |   </form>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/pages/links/create.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Create New Link</h1>
 3 |   <GoBack>or go back to links</GoBack>
 4 |   <form>
 5 |     <label>
 6 |       <div>Link</div>
 7 |       <input type="text" name="full_link" />
 8 |     </label>
 9 |     <button class="btn">Create Link</button>
10 |   </form>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/pages/links/index.vue:
--------------------------------------------------------------------------------
  1 | <script setup lang="ts">
  2 | const links = [
  3 |   {
  4 |     short_link: "234jlsfsf",
  5 |     full_link: "https://vueschool.io",
  6 |     views: 3,
  7 |     id: 1,
  8 |   },
  9 |   {
 10 |     short_link: "adfaowerw",
 11 |     full_link: "https://google.com",
 12 |     views: 1,
 13 |     id: 2,
 14 |   },
 15 |   {
 16 |     short_link: "234sfdjaip",
 17 |     full_link: "https://vuejsnation.com/",
 18 |     views: 0,
 19 |     id: 3,
 20 |   },
 21 | ];
 22 | </script>
 23 | <template>
 24 |   <div>
 25 |     <nav class="flex justify-between mb-4 items-center">
 26 |       <h1 class="mb-0">My Links</h1>
 27 |       <div class="flex items-center">
 28 |         <SearchInput modelValue="" />
 29 |         <NuxtLink to="/links/create" class="ml-4">
 30 |           <IconPlusCircle class="inline" /> Create New
 31 |         </NuxtLink>
 32 |       </div>
 33 |     </nav>
 34 | 
 35 |     <div v-if="true">
 36 |       <table class="table-fixed w-full">
 37 |         <thead>
 38 |           <tr>
 39 |             <th class="w-[35%]">Full Link</th>
 40 |             <th class="w-[35%]">Short Link</th>
 41 |             <th class="w-[10%]">Views</th>
 42 |             <th class="w-[10%]">Edit</th>
 43 |             <th class="w-[10%]">Trash</th>
 44 |             <th class="w-[6%] text-center">
 45 |               <button><IconRefresh /></button>
 46 |             </th>
 47 |           </tr>
 48 |         </thead>
 49 |         <tbody>
 50 |           <tr v-for="link in links">
 51 |             <td>
 52 |               <a :href="link.full_link" target="_blank">
 53 |                 {{ link.full_link.replace(/^http(s?):\/\//, "") }}</a
 54 |               >
 55 |             </td>
 56 |             <td>
 57 |               <a
 58 |                 :href="`${useRuntimeConfig().public.appURL}/${link.short_link}`"
 59 |                 target="_blank"
 60 |               >
 61 |                 {{
 62 |                   useRuntimeConfig().public.appURL.replace(
 63 |                     /^http(s?):\/\//,
 64 |                     ""
 65 |                   )
 66 |                 }}/{{ link.short_link }}
 67 |               </a>
 68 |             </td>
 69 |             <td>{{ link.views }}</td>
 70 |             <td>
 71 |               <NuxtLink class="no-underline" :to="`/links/${link.id}`"
 72 |                 ><iconEdit
 73 |               /></NuxtLink>
 74 |             </td>
 75 |             <td>
 76 |               <button><IconTrash /></button>
 77 |             </td>
 78 |             <td></td>
 79 |           </tr>
 80 |         </tbody>
 81 |       </table>
 82 |       <div class="mt-5 flex justify-center"></div>
 83 |     </div>
 84 | 
 85 |     <!-- No links message for when table is empty -->
 86 |     <div
 87 |       v-else
 88 |       class="border-dashed border-gray-500 p-3 border-[1px] text-center"
 89 |     >
 90 |       <div class="flex justify-center">
 91 |         <IconLink />
 92 |       </div>
 93 |       <p>
 94 |         <!-- Show this if reason for no links is none found in search -->
 95 |         <span v-if="false"> No links matching links found. </span>
 96 | 
 97 |         <!-- Show this if reason for no links is User has none -->
 98 |         <span v-else>
 99 |           No links created yet
100 |           <NuxtLink to="/links/create" class="text-green-600"
101 |             >Go create your first link!</NuxtLink
102 |           >
103 |         </span>
104 |       </p>
105 |     </div>
106 |   </div>
107 | </template>
108 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   layout: "centered",
 4 | });
 5 | </script>
 6 | <template>
 7 |   <div class="login">
 8 |     <h1>Login</h1>
 9 |     <form>
10 |       <label>
11 |         <div>Email</div>
12 |         <input type="text" />
13 |       </label>
14 | 
15 |       <label>
16 |         <div>Password</div>
17 |         <input type="password" />
18 |       </label>
19 |       <button class="btn">Login</button>
20 |     </form>
21 | 
22 |     <p>
23 |       Don't have an account?
24 |       <NuxtLink class="underline text-lime-600" to="/register"
25 |         >Register now!</NuxtLink
26 |       >
27 |     </p>
28 |   </div>
29 | </template>
30 | 


--------------------------------------------------------------------------------
/pages/logout.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>Logging Out...</div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/pages/me.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <p><strong>User Name:</strong> Daniel</p>
3 |   <p><strong>User Email:</strong> test@test.com</p>
4 | </template>
5 | 


--------------------------------------------------------------------------------
/pages/register.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | definePageMeta({
 3 |   layout: "centered",
 4 | });
 5 | </script>
 6 | <template>
 7 |   <div class="register">
 8 |     <h1>Register</h1>
 9 |     <form>
10 |       <label>
11 |         <div>Name</div>
12 |         <input type="text" />
13 |       </label>
14 | 
15 |       <label>
16 |         <div>Email</div>
17 |         <input type="email" />
18 |       </label>
19 | 
20 |       <label>
21 |         <div>Password</div>
22 |         <input type="password" />
23 |       </label>
24 | 
25 |       <label>
26 |         <div>Confirm Password</div>
27 |         <input type="password" />
28 |       </label>
29 | 
30 |       <button class="btn">Register</button>
31 |     </form>
32 | 
33 |     <p>
34 |       Already have an account?
35 |       <NuxtLink class="underline text-lime-600" to="/login">Login</NuxtLink>
36 |     </p>
37 |   </div>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------