🔨 Refactor folder structure, vuex store vueServerInit

Author: imrim12

aliases.config.js

@@ -7,6 +7,7 @@ const prettier = require('prettier')
 const aliases = {
   '@': 'src',
   '@assets': 'src/assets',
+  '@styles': 'src/styles',
   '@components': 'src/components',
   '@common': 'src/core/components',
   '@uncommon': 'src/components',

jsconfig.json

@@ -24,6 +24,14 @@
         "src/assets/index.scss",
         "src/assets/index.css"
       ],
+      "@styles/*": ["src/styles/*"],
+      "@styles": [
+        "src/styles/index.js",
+        "src/styles/index.json",
+        "src/styles/index.vue",
+        "src/styles/index.scss",
+        "src/styles/index.css"
+      ],
       "@components/*": ["src/components/*"],
       "@components": [
         "src/components/index.js",

src/assets/README.md

@@ -1,6 +1,14 @@
 <template>
   <div class="default__layout">
     <Navbar />
+    <div>
+      <router-link class="text-primary hover:underline" to="/">
+        Home
+      </router-link>
+      <router-link class="text-primary hover:underline" to="/about">
+        About
+      </router-link>
+    </div>
     <slot />
   </div>
 </template>

src/core/layouts/default.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="notFoundErrorPageComponent flex justify-center items-center h-screen"
+  >
+    <div class="text-center">
+      <h1 class="text-9xl text-white font-black">
+        404
+      </h1>
+      <h2 class="text-6xl text-white font-black">
+        {{ $t('error.404') }}
+      </h2>
+      <div class="mt-5">
+        <span
+          @click="$router.go(-1)"
+          class="inline-block w-16 p-3 m-3 border-white text-white font-bold border-4 rounded-full hover:bg-white hover:text-danger cursor-pointer duration-300"
+        >
+          <i class="fas fa-arrow-circle-left"></i>
+          <span> Back </span>
+        </span>
+        <span
+          @click="$router.push('/')"
+          class="inline-block w-40 p-3 m-3 border-white text-danger text-lg font-bold border-4 rounded-full bg-white cursor-pointer duration-300"
+        >
+          {{ 'Go Home' }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, onMounted } from '@vue/composition-api'
+// import { bus } from '@plugins/mitt'
+export default defineComponent({
+  name: 'notFoundErrorPage',
+  setup() {
+    onMounted(() => {
+      // bus.emit('layout', 'error')
+    })
+  },
+})
+</script>

src/core/pages/error/404.vue

@@ -0,0 +1,41 @@
+<template>
+  <div
+    class="internalServerErrorPageComponent flex justify-center items-center h-screen"
+  >
+    <div class="text-center">
+      <h1 class="text-9xl text-white font-black">
+        500
+      </h1>
+      <h2 class="text-6xl text-white font-black">
+        {{ $route.query.message || $t('error.500') }}
+      </h2>
+      <div class="mt-5">
+        <span
+          @click="$router.go(-1)"
+          class="inline-block w-32 p-3 m-3 border-white text-white font-bold border-4 rounded-full hover:bg-white hover:text-danger cursor-pointer duration-300"
+        >
+          <i class="fas fa-arrow-circle-left"></i>
+          <span> Back </span>
+        </span>
+        <span
+          @click="$router.push('/')"
+          class="inline-block w-40 p-3 m-3 border-white text-danger text-lg font-bold border-4 rounded-full bg-white cursor-pointer duration-300"
+        >
+          {{ 'Go Home' }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, onMounted } from '@vue/composition-api'
+// import { bus } from '@plugins/mitt'
+export default defineComponent({
+  name: 'internalServerErrorPage',
+  setup() {
+    onMounted(() => {
+      // bus.emit('layout', 'error')
+    })
+  },
+})
+</script>

src/core/pages/error/500.vue

@@ -0,0 +1,25 @@
+import NotFoundErrorPage from './404.vue'
+import InternalServerErrorPage from './500.vue'
+
+export const routes = [
+  {
+    name: '404',
+    path: '/:pathMatch(.*)*',
+    component: NotFoundErrorPage,
+    meta: {
+      layout: 'error',
+      auth: false,
+    },
+  },
+  {
+    name: '500',
+    path: '/error',
+    component: InternalServerErrorPage,
+    meta: {
+      layout: 'error',
+      auth: false,
+    },
+  },
+]
+
+export default { routes }

src/core/pages/error/config.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import store from '@store'
+import { store } from '@store'
 import dev from '@utils/functions/dev'
 // Create a custom axios instance
 export const authApi = axios.create({