refactor: remove vite proxy & update vuetify to latest version

Author: themustafaomar

.env.example

@@ -1,5 +1,4 @@
 VITE_SERVER_URL=http://localhost:8000
-
 VITE_PUSHER_HOST=127.0.0.1
 VITE_PUSHER_KEY=cbae043c3b6e2fdd4c12
 VITE_PUSHER_CLUSTER=eu

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "vuetify-starter",
+  "name": "vue-starter",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -34,7 +34,7 @@
     "vue-chart-3": "^3.1.8",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.6",
-    "vuetify": "^3.1.15",
+    "vuetify": "^3.4.9",
     "webfontloader": "^1.6.28",
     "yup": "^1.1.1"
   },

package.json

@@ -3,7 +3,7 @@
     <img
       class="mb-3"
       :src="`/${isDark ? 'logo-dark' : 'logo'}.png`"
-      :width="isDark ? 60 : 120"
+      :width="isDark ? 60 : 70"
       alt="Logo"
     />
     <h2 class="mb-2">{{ title }}</h2>

src/components/auth/Heading.vue

@@ -7,7 +7,7 @@
       :ripple="false"
     />
 
-    <v-toolbar-title text="Wakeb" class="text-uppercase text-medium-emphasis" />
+    <v-toolbar-title text="Brand" class="text-uppercase text-medium-emphasis" />
 
     <v-text-field
       v-if="lgAndUp"

src/components/dashboard/bar/Bar.vue

@@ -1,9 +1,5 @@
 <template>
   <app-sheet title="Permissions" table class="pb-5">
-    <template #actions>
-      <v-btn @click="composer.add()" color="primary" rounded="pill">Create Permission</v-btn>
-    </template>
-
     <v-data-table :headers="headers" :items="permissions">
       <template #item.assigned_to="{ item }">
         <v-chip v-for="role in item.raw.roles" color="primary" variant="tonal" class="mx-1">
@@ -32,7 +28,6 @@ import { ref, onMounted } from 'vue'
 import { useLoader } from '@/composables/useLoader'
 import axios from '@/plugins/axios'
 import useComposer from '@/hoc/useComposer.vue'
-import AppDashboardPermissionsCreate from '@/components/dashboard/permissions/Create.vue'
 
 const composer = ref(null)
 const permissions = ref([])

src/components/dashboard/permissions/Create.vue

@@ -2,17 +2,12 @@ import axios from 'axios'
 import router from '../router'
 import { useAppStore } from '@/stores/app'
 import { useAuthStore } from '@/stores/auth'
-import { isDev } from '@/utils'
-
-const env = import.meta.env
 
 // Axios instance
 const instance = axios.create({
-  // We need to send requests to the front-end dev server
-  // so the proxy can forward the requests to the backend host
-  // in production, we'll send requests to the back-end directly.
-  baseURL: `${isDev() ? '' : env.VITE_SERVER_URL}/api`,
+  baseURL: `${import.meta.env.VITE_SERVER_URL}/api`,
   headers: { 'X-Requested-With': 'XMLHttpRequest' },
+  withXSRFToken: true,
   withCredentials: true,
 })
 

src/pages/dashboard/permissions.vue

@@ -1,7 +1,6 @@
 import Echo from 'laravel-echo'
 import Pusher from 'pusher-js'
 import axios from './axios'
-import { isDev } from '@/utils'
 
 const env = import.meta.env
 
@@ -19,9 +18,8 @@ window.Echo = new Echo({
   // https://laravel.com/docs/10.x/sanctum#authorizing-private-broadcast-channels
   authorizer: (channel) => ({
     authorize: (socketId, callback) => {
-      const prefix = isDev() ? '/@' : env.VITE_SERVER_URL
       axios
-        .post(`${prefix}/broadcasting/auth`, {
+        .post(`${env.VITE_SERVER_URL}/broadcasting/auth`, {
           socket_id: socketId,
           channel_name: channel.name,
         })

src/plugins/axios.js

@@ -1,8 +1,6 @@
 import 'vuetify/styles'
 import '@mdi/font/css/materialdesignicons.css'
 import { createVuetify } from 'vuetify'
-import { VDataTable } from 'vuetify/labs/VDataTable'
-import { VSkeletonLoader } from 'vuetify/labs/VSkeletonLoader'
 import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
 import { createI18n, useI18n } from 'vue-i18n'
 import { loadFonts } from './webfontloader'
@@ -31,7 +29,6 @@ export const useVuetify = (app) => {
 
   // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
   const vuetify = createVuetify({
-    components: { VDataTable, VSkeletonLoader },
     theme,
     locale: {
       adapter: createVueI18nAdapter({ i18n, useI18n }),