upgrade vite

composer.json

@@ -17,7 +17,6 @@
     "fideloper/proxy": "^4.0",
     "fruitcake/laravel-cors": "^1.0",
     "guzzlehttp/guzzle": "^7.0.1",
-    "innocenzi/laravel-vite": "^0.1.1",
     "intervention/image": "^2.3",
     "jasonmccreary/laravel-test-assertions": "^2.0",
     "laravel/framework": "^8.0",

config/vite.php

@@ -1,67 +0,0 @@
-<?php
-
-return [
-    /*
-    |--------------------------------------------------------------------------
-    | Entrypoints
-    |--------------------------------------------------------------------------
-    | The files in the configured directories will be considered
-    | entry points and will not be required in the configuration file.
-    | To disable the feature, set to false.
-    */
-    'entrypoints' => [
-        'resources/scripts/main.js',
-    ],
-    'ignore_patterns' => ["/\.d\.ts$/"],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Aliases
-    |--------------------------------------------------------------------------
-    | These aliases will be added to the Vite configuration and used
-    | to generate a proper tsconfig.json file.
-    */
-    'aliases' => [
-        '@' => 'resources',
-    ],
-
-    /*
-    |--------------------------------------------------------------------------
-    | Static assets path
-    |--------------------------------------------------------------------------
-    | This option defines the directory that Vite considers as the
-    | public directory. Its content will be copied to the build directory
-    | at build-time.
-    | https://vitejs.dev/config/#publicdir
-    */
-    'public_directory' => resource_path('static'),
-
-    /*
-    |--------------------------------------------------------------------------
-    | Ping timeout
-    |--------------------------------------------------------------------------
-    | The maximum duration, in seconds, that the ping to the development
-    | server should take while trying to determine whether to use the
-    | manifest or the server in a local environment.
-    */
-    'ping_timeout' => .1,
-
-    /*
-    |--------------------------------------------------------------------------
-    | Build path
-    |--------------------------------------------------------------------------
-    | The directory, relative to /public, in which Vite will build
-    | the production files. This should match "build.outDir" in the Vite
-    | configuration file.
-    */
-    'build_path' => 'build',
-
-    /*
-    |--------------------------------------------------------------------------
-    | Development URL
-    |--------------------------------------------------------------------------
-    | The URL at which the Vite development server runs.
-    | This is used to generate the script tags when developing.
-    */
-    'dev_url' => 'http://localhost:3000',
-];

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port=3000",
     "build": "vite build",
     "serve": "vite preview",
     "test": "eslint ./resources/scripts --ext .js,.vue"
@@ -18,13 +18,12 @@
     "eslint": "^7.27.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^7.0.0-beta.4",
-    "laravel-vite": "^0.0.7",
     "postcss": "^8.4.5",
     "prettier": "^2.3.0",
     "sass": "^1.32.12",
     "tailwind-scrollbar": "^1.3.1",
     "tailwindcss": "^3.0.6",
-    "vite": "^2.6.1"
+    "vite": "^4.0.0"
   },
   "dependencies": {
     "@headlessui/vue": "^1.4.0",
@@ -32,10 +31,11 @@
     "@popperjs/core": "^2.9.2",
     "@stripe/stripe-js": "^1.21.2",
     "@tailwindcss/line-clamp": "^0.3.0",
-    "@tiptap/core": "^2.0.0-beta.85",
+    "@tiptap/core": "^2.0.3",
-    "@tiptap/extension-text-align": "^2.0.0-beta.29",
+    "@tiptap/extension-text-align": "^2.0.3",
-    "@tiptap/starter-kit": "^2.0.0-beta.81",
+    "@tiptap/pm": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.0-beta.38",
+    "@tiptap/starter-kit": "^2.0.3",
+    "@tiptap/vue-3": "^2.0.3",
     "@vuelidate/components": "^1.1.12",
     "@vuelidate/core": "^2.0.0-alpha.32",
     "@vuelidate/validators": "^2.0.0-alpha.25",
@@ -43,6 +43,7 @@
     "axios": "^0.19",
     "chart.js": "^2.7.3",
     "guid": "0.0.12",
+    "laravel-vite-plugin": "^0.7.4",
     "lodash": "^4.17.13",
     "maska": "^1.4.6",
     "mini-svg-data-uri": "^1.3.3",

resources/scripts/admin/views/customers/partials/CustomerChart.vue

@@ -35,7 +35,16 @@
       </div>
 
       <div
-        class="grid col-span-12 mt-6 text-center xl:mt-0 sm:grid-cols-4 xl:text-right xl:col-span-3 xl:grid-cols-1 xxl:col-span-2"
+        class="
+          grid
+          col-span-12
+          mt-6
+          text-center
+          xl:mt-0
+          sm:grid-cols-4
+          xl:text-right xl:col-span-3 xl:grid-cols-1
+          xxl:col-span-2
+        "
       >
         <div class="px-6 py-2">
           <span class="text-xs leading-5 lg:text-sm">
@@ -168,12 +177,10 @@ const getChartInvoices = computed(() => {
   return []
 })
 
-const customerId = computed(() => route.params.id)
-
 watch(
-  () => customerId.value,
+  route,
-  (id) => {
+  () => {
-    if (id && route.name === 'customers.view') {
+    if (route.params.id) {
       loadCustomer()
     }
     selectedYear.value = 'This year'

resources/scripts/admin/views/estimates/View.vue

@@ -37,10 +37,32 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
+      class="
+        fixed
+        top-0
+        left-0
+        hidden
+        h-full
+        pt-16
+        pb-[6.4rem]
+        ml-56
+        bg-white
+        xl:ml-64
+        w-88
+        xl:block
+      "
     >
       <div
-        class="flex items-center justify-between px-4 pt-8 pb-2 border border-gray-200 border-solid height-full"
+        class="
+          flex
+          items-center
+          justify-between
+          px-4
+          pt-8
+          pb-2
+          border border-gray-200 border-solid
+          height-full
+        "
       >
         <div class="mb-6">
           <BaseInput
@@ -70,7 +92,14 @@
             </template>
 
             <div
-              class="px-4 py-1 pb-2 mb-1 mb-2 text-sm border-b border-gray-200 border-solid"
+              class="
+                px-4
+                py-1
+                pb-2
+                mb-1 mb-2
+                text-sm
+                border-b border-gray-200 border-solid
+              "
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -127,7 +156,12 @@
 
       <div
         ref="estimateListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid base-scroll"
+        class="
+          h-full
+          overflow-y-scroll
+          border-l border-gray-200 border-solid
+          base-scroll
+        "
       >
         <div v-for="(estimate, index) in estimateList" :key="index">
           <router-link
@@ -147,11 +181,29 @@
               <BaseText
                 :text="estimate.customer.name"
                 :length="30"
-                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
+                class="
+                  pr-2
+                  mb-2
+                  text-sm
+                  not-italic
+                  font-normal
+                  leading-5
+                  text-black
+                  capitalize
+                  truncate
+                "
               />
 
               <div
-                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-gray-600"
+                class="
+                  mt-1
+                  mb-2
+                  text-xs
+                  not-italic
+                  font-medium
+                  leading-5
+                  text-gray-600
+                "
               >
                 {{ estimate.estimate_number }}
               </div>
@@ -168,11 +220,26 @@
               <BaseFormatMoney
                 :amount="estimate.total"
                 :currency="estimate.customer.currency"
-                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
+                class="
+                  block
+                  mb-2
+                  text-xl
+                  not-italic
+                  font-semibold
+                  leading-8
+                  text-right text-gray-900
+                "
               />
 
               <div
-                class="text-sm not-italic font-normal leading-5 text-right text-gray-600 est-date"
+                class="
+                  text-sm
+                  not-italic
+                  font-normal
+                  leading-5
+                  text-right text-gray-600
+                  est-date
+                "
               >
                 {{ estimate.formatted_estimate_date }}
               </div>
@@ -197,7 +264,13 @@
     >
       <iframe
         :src="`${shareableLink}`"
-        class="flex-1 border border-gray-400 border-solid rounded-md bg-white frame-style"
+        class="
+          flex-1
+          border border-gray-400 border-solid
+          rounded-md
+          bg-white
+          frame-style
+        "
       />
     </div>
   </BasePage>
@@ -272,14 +345,11 @@ const getCurrentEstimateId = computed(() => {
   return null
 })
 
-const estimateId = computed(() => route.params.id)
+watch(route, (to, from) => {
-
+  if (to.name === 'estimates.view') {
-watch(
+    loadEstimate()
-  () => estimateId.value,
-  (id) => {
-    if (id && route.name === 'estimates.view') loadEstimate()
   }
-)
+})
 
 loadEstimates()
 loadEstimate()

resources/scripts/admin/views/invoices/View.vue

@@ -65,14 +65,11 @@ const getCurrentInvoiceId = computed(() => {
   return null
 })
 
-const invoiceId = computed(() => route.params.id)
+watch(route, (to, from) => {
-
+  if (to.name === 'invoices.view') {
-watch(
+    loadInvoice()
-  () => invoiceId.value,
-  (id) => {
-    if (id && route.name === 'invoices.view') loadInvoice()
   }
-)
+})
 
 async function onMarkAsSent() {
   dialogStore
@@ -289,10 +286,32 @@ onSearched = debounce(onSearched, 500)
 
     <!-- sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6.4rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
+      class="
+        fixed
+        top-0
+        left-0
+        hidden
+        h-full
+        pt-16
+        pb-[6.4rem]
+        ml-56
+        bg-white
+        xl:ml-64
+        w-88
+        xl:block
+      "
     >
       <div
-        class="flex items-center justify-between px-4 pt-8 pb-2 border border-gray-200 border-solid height-full"
+        class="
+          flex
+          items-center
+          justify-between
+          px-4
+          pt-8
+          pb-2
+          border border-gray-200 border-solid
+          height-full
+        "
       >
         <div class="mb-6">
           <BaseInput
@@ -316,7 +335,14 @@ onSearched = debounce(onSearched, 500)
               </BaseButton>
             </template>
             <div
-              class="px-2 py-1 pb-2 mb-1 mb-2 text-sm border-b border-gray-200 border-solid"
+              class="
+                px-2
+                py-1
+                pb-2
+                mb-1 mb-2
+                text-sm
+                border-b border-gray-200 border-solid
+              "
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -373,7 +399,12 @@ onSearched = debounce(onSearched, 500)
 
       <div
         ref="invoiceListSection"
-        class="h-full overflow-y-scroll border-l border-gray-200 border-solid base-scroll"
+        class="
+          h-full
+          overflow-y-scroll
+          border-l border-gray-200 border-solid
+          base-scroll
+        "
       >
         <div v-for="(invoice, index) in invoiceList" :key="index">
           <router-link
@@ -393,11 +424,29 @@ onSearched = debounce(onSearched, 500)
               <BaseText
                 :text="invoice.customer.name"
                 :length="30"
-                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
+                class="
+                  pr-2
+                  mb-2
+                  text-sm
+                  not-italic
+                  font-normal
+                  leading-5
+                  text-black
+                  capitalize
+                  truncate
+                "
               />
 
               <div
-                class="mt-1 mb-2 text-xs not-italic font-medium leading-5 text-gray-600"
+                class="
+                  mt-1
+                  mb-2
+                  text-xs
+                  not-italic
+                  font-medium
+                  leading-5
+                  text-gray-600
+                "
               >
                 {{ invoice.invoice_number }}
               </div>
@@ -411,12 +460,27 @@ onSearched = debounce(onSearched, 500)
 
             <div class="flex-1 whitespace-nowrap right">
               <BaseFormatMoney
-                class="mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900 block"
+                class="
+                  mb-2
+                  text-xl
+                  not-italic
+                  font-semibold
+                  leading-8
+                  text-right text-gray-900
+                  block
+                "
                 :amount="invoice.total"
                 :currency="invoice.customer.currency"
               />
               <div
-                class="text-sm not-italic font-normal leading-5 text-right text-gray-600 est-date"
+                class="
+                  text-sm
+                  not-italic
+                  font-normal
+                  leading-5
+                  text-right text-gray-600
+                  est-date
+                "
               >
                 {{ invoice.formatted_invoice_date }}
               </div>
@@ -441,7 +505,13 @@ onSearched = debounce(onSearched, 500)
     >
       <iframe
         :src="`${shareableLink}`"
-        class="flex-1 border border-gray-400 border-solid bg-white rounded-md frame-style"
+        class="
+          flex-1
+          border border-gray-400 border-solid
+          bg-white
+          rounded-md
+          frame-style
+        "
       />
     </div>
   </BasePage>

resources/scripts/admin/views/payments/View.vue

@@ -22,10 +22,31 @@
 
     <!-- Sidebar -->
     <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-[6rem] ml-56 bg-white xl:ml-64 w-88 xl:block"
+      class="
+        fixed
+        top-0
+        left-0
+        hidden
+        h-full
+        pt-16
+        pb-[6rem]
+        ml-56
+        bg-white
+        xl:ml-64
+        w-88
+        xl:block
+      "
     >
       <div
-        class="flex items-center justify-between px-4 pt-8 pb-6 border border-gray-200 border-solid"
+        class="
+          flex
+          items-center
+          justify-between
+          px-4
+          pt-8
+          pb-6
+          border border-gray-200 border-solid
+        "
       >
         <BaseInput
           v-model="searchData.searchText"
@@ -49,7 +70,14 @@
             </template>
 
             <div
-              class="px-4 py-1 pb-2 mb-2 text-sm border-b border-gray-200 border-solid"
+              class="
+                px-4
+                py-1
+                pb-2
+                mb-2
+                text-sm
+                border-b border-gray-200 border-solid
+              "
             >
               {{ $t('general.sort_by') }}
             </div>
@@ -131,17 +159,43 @@
               <BaseText
                 :text="payment?.customer?.name"
                 :length="30"
-                class="pr-2 mb-2 text-sm not-italic font-normal leading-5 text-black capitalize truncate"
+                class="
+                  pr-2
+                  mb-2
+                  text-sm
+                  not-italic
+                  font-normal
+                  leading-5
+                  text-black
+                  capitalize
+                  truncate
+                "
               />
 
               <div
-                class="mb-1 text-xs not-italic font-medium leading-5 text-gray-500 capitalize"
+                class="
+                  mb-1
+                  text-xs
+                  not-italic
+                  font-medium
+                  leading-5
+                  text-gray-500
+                  capitalize
+                "
               >
                 {{ payment?.payment_number }}
               </div>
 
               <div
-                class="mb-1 text-xs not-italic font-medium leading-5 text-gray-500 capitalize"
+                class="
+                  mb-1
+                  text-xs
+                  not-italic
+                  font-medium
+                  leading-5
+                  text-gray-500
+                  capitalize
+                "
               >
                 {{ payment?.invoice_number }}
               </div>
@@ -149,7 +203,15 @@
 
             <div class="flex-1 whitespace-nowrap right">
               <BaseFormatMoney
-                class="block mb-2 text-xl not-italic font-semibold leading-8 text-right text-gray-900"
+                class="
+                  block
+                  mb-2
+                  text-xl
+                  not-italic
+                  font-semibold
+                  leading-8
+                  text-right text-gray-900
+                "
                 :amount="payment?.amount"
                 :currency="payment.customer?.currency"
               />
@@ -251,14 +313,9 @@ const paymentDate = computed(() => {
   )
 })
 
-const paymentId = computed(() => route.params.id)
+watch(route, () => {
-
+  loadPayment()
-watch(
+})
-  () => paymentId.value,
-  (id) => {
-    if (id && route.name === 'payments.view') loadPayment()
-  }
-)
 
 loadPayments()
 loadPayment()

resources/scripts/admin/views/recurring-invoices/partials/RecurringInvoiceInfo.vue

@@ -78,12 +78,10 @@ let isLoading = computed(() => {
   return recurringInvoiceStore.isFetchingViewData
 })
 
-const invoiceId = computed(() => route.params.id)
-
 watch(
-  () => invoiceId.value,
+  route,
-  (id) => {
+  () => {
-    if (id && route.name === 'recurring-invoices.view') {
+    if (route.params.id && route.name === 'recurring-invoices.view') {
       loadRecurringInvoice()
     }
   },

resources/views/app.blade.php

@@ -21,7 +21,7 @@
         <link rel="stylesheet" href="/modules/styles/{{ $name }}">
     @endforeach
 
-    @vite
+    @vite('resources/scripts/main.js')
 </head>
 
 <body
@@ -57,15 +57,15 @@
 
         window.login_page_description = "{{$login_page_description}}"
 
-        @endif     
+        @endif
         @if(isset($copyright_text))
 
         window.copyright_text = "{{$copyright_text}}"
 
-        @endif    
+        @endif
 
-        window.Crater.start()
+        // window.Crater.start()
     </script>
 </body>
 
-</html>
+</html>

vite.config.ts

@@ -1,17 +1,24 @@
-import { defineConfig } from 'laravel-vite'
+import { defineConfig } from 'vite'
+import laravel from 'laravel-vite-plugin'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
     server: {
-        watch: {
+      watch: {
-            ignored: ['**/.env/**'],
+        ignored: ['**/.env/**'],
-        },
+      },
     },
+    plugins: [
+      vue(),
+      laravel({
+        input: ['resources/scripts/main.js'],
+        valetTls: false,
+      }),
+    ],
     resolve: {
-        alias: {
+      alias: {
-            "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
+        '@': '/resources',
-        }
+        'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
-    }
+      },
-}).withPlugins(
+    },
-    vue
+  })
-)