reverted back from vue typescript to javascript to fix bad performance...

components.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    NButton: typeof import('naive-ui')['NButton']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NInput: typeof import('naive-ui')['NInput']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+  }
+}

package.json

@@ -59,6 +59,7 @@
     "prettier": "^2.8.8",
     "tailwindcss": "^3.3.2",
     "typescript": "~4.6",
+    "unplugin-vue-components": "^0.25.1",
     "vue-loader": "^17.2.2",
     "webpack": "^5.88.1",
     "webpack-cli": "^4.10.0",
@@ -77,13 +78,11 @@
     "@eidellev/inertia-adonisjs": "^8.0.1",
     "@inertiajs/vue3": "^1.0.9",
     "@vue/compiler-sfc": "^3.3.4",
-    "@vue/tsconfig": "^0.1.3",
     "luxon": "^3.3.0",
     "proxy-addr": "^2.0.7",
     "reflect-metadata": "^0.1.13",
     "source-map-support": "^0.5.21",
     "sqlite3": "^5.1.6",
-    "ts-loader": "^9.4.4",
     "vue": "^3.3.4"
   }
 }

resources/js/Layouts/BELayout.vue

@@ -1,15 +1,12 @@
 <template>
-    <n-config-provider preflight-style-disabled>
+    <LoginLayout class="w-3/5">
-        <LoginLayout class="w-3/5">
+        <MainNav />
-            <MainNav />
+        <slot></slot>
-            <slot></slot>
 
-        </LoginLayout>
+    </LoginLayout>
-    </n-config-provider>
 </template>
 
-<script lang="ts" setup>
+<script setup>
-    import { NConfigProvider } from 'naive-ui'
     import LoginLayout from '@/layouts/LoginLayout.vue'
     import MainNav from '@/components/MainNav.vue'
 

resources/js/Layouts/LoginLayout.vue

@@ -6,7 +6,7 @@
     </main>
 </template>
 
-<script setup lang="ts">
+<script setup>
 
 defineProps(['class'])
 

resources/js/components/FlashMessages.vue

@@ -1,6 +1,6 @@
 <template>
 </template>
-<script setup lang="ts">
+<script setup>
     import { useMessage } from 'naive-ui'
     import { onUpdated, onMounted } from 'vue'
 
@@ -15,13 +15,13 @@
         displayNewMessages(props.messages)
     })
 
-    function displayNewMessages(messages: any) {
+    function displayNewMessages(messages) {
 
-        let output: Array<Object> = []
+        let output = []
 
         output = flattenObject(removeValidationErrors(messages))
 
-        output?.forEach((item: any) => {
+        output?.forEach((item) => {
             for (let key in item) {
                 switch (key){
                     case 'error':
@@ -52,24 +52,24 @@
         })
     }   
 
-    function removeValidationErrors(input: any) {
+    function removeValidationErrors(input) {
 
         if(input === null || !input.hasOwnProperty("errors")) return input
     
-        const { errors: _, ...output } = (input as any)
+        const { errors: _, ...output } = (input)
         return output
     }
 
-    function flattenObject(input: Object) {
+    function flattenObject(input) {
         if (input === null) return input
 
-        return Object.values(input).map((value: any) => Object.entries(value)).flat().reduce((acc: Array<Object>, [key, value]) => {
+        return Object.values(input).map((value) => Object.entries(value)).flat().reduce((acc, [key, value]) => {
             acc.push({[key]: value});
             return acc;
         }, []);
     }
 
-    function translateError(errorMsg: string) {
+    function translateError(errorMsg) {
         switch(errorMsg.split(":")[0]) {
             case 'E_INVALID_AUTH_PASSWORD':
                 return "Falsches Passwort eingegeben."

resources/js/components/MainNav.vue

@@ -9,14 +9,10 @@
     </div>
 </template>
 
-<script lang="ts" setup>
+<script setup>
-    import type { Ref, Component } from 'vue'
+    import { NIcon } from 'naive-ui'
-    import type { MenuOption } from 'naive-ui'
-    import type { User } from '../types/User'
-
     import { Link, usePage } from '@inertiajs/vue3'
     import { h, ref } from 'vue';
-    import { NIcon, NMenu } from 'naive-ui'
     import {
         GroupsFilled as Users,
         EventNoteFilled as Events,
@@ -25,10 +21,10 @@
         PersonRound as Profile,
     } from '@vicons/material'
 
-    const activeKey: Ref<string> = ref((usePage().props.request as any)?.url)
+    const activeKey= ref(usePage().props.request?.url)
-    const user: User = usePage().props.user as User
+    const user = usePage().props.user
     
-    const menuOptions: MenuOption[] = []
+    const menuOptions = []
 
     menuOptions.push({
         label: () =>
@@ -89,7 +85,7 @@
 
     
 
-    function renderIcon(icon: Component) {
+    function renderIcon(icon) {
         return () => h(NIcon, null, { default: () => h(icon) })
 
     }

resources/js/pages/Events/Index.vue

@@ -9,18 +9,15 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import BELayout from '@/layouts/BELayout.vue'
 import FlashMessages from '@/components/FlashMessages.vue'
-import { NMessageProvider } from 'naive-ui'
 
 defineOptions({
     layout: BELayout
 })
 
-const props = defineProps({
+const props = defineProps(['flashMessages'])
-    flashMessages: Object
-})
 
 </script>
 

resources/js/pages/Home.vue

@@ -12,16 +12,12 @@
     </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import FlashMessages from '@/components/FlashMessages.vue'
-import { NMessageProvider } from 'naive-ui'
 
-const props = defineProps({
+const props = defineProps(['test', 'flashMessages'])
-    test: String,
-    flashMessages: Object
-})
 
-const helloWorld = ref<String>("helloWorld")
+const helloWorld = ref("helloWorld")
 
 </script>

resources/js/pages/Login.vue

@@ -45,10 +45,8 @@
     </n-form>
 </template>
 
-<script setup lang="ts">
+<script setup>
-    import type { FormInst } from 'naive-ui'
     import { ref } from 'vue'
-    import { NMessageProvider, NInput, NForm, NFormItem } from 'naive-ui'
     import { router } from '@inertiajs/vue3'
     import LoginLayout from '@/layouts/LoginLayout.vue'
     import FlashMessages from '@/components/FlashMessages.vue'
@@ -61,7 +59,7 @@
         password: '',
     })
 
-    const formRef = ref<FormInst | null>(null)
+    const formRef = ref(null)
 
     const rules = ref({
         username: {
@@ -77,7 +75,7 @@
     })
 
     function onClickLogin(){
-        formRef.value?.validate((errors: any) => {
+        formRef.value?.validate((errors) => {
             if(!errors) router.post('login', form.value)
         })
     }

resources/js/pages/Users/Edit.vue

@@ -2,5 +2,5 @@
 
 </template>
 
-<script setup lang="ts">
+<script setup>
 </script>

resources/js/pages/Users/Index.vue

@@ -11,16 +11,12 @@
    />
 </template>
 
-<script setup lang="ts">
+<script setup>
-
-import type { User } from '../../types/User'
-import type { DataTableColumns } from 'naive-ui'
-import type { VNode } from 'vue'
 
 import { h } from 'vue'
 import BELayout from '@/layouts/BELayout.vue'
 import FlashMessages from '@/components/FlashMessages.vue'
-import { NIcon, NButton, NDataTable, NMessageProvider } from 'naive-ui'
+import { NIcon, NButton } from 'naive-ui'
 
 import {
    AdminPanelSettingsFilled as Admin,
@@ -30,12 +26,9 @@ import {
 
 defineOptions({ layout: BELayout })
 
-const props = defineProps<{
+const props = defineProps(['users', 'flashMessages'])
-   users?: User[],
-   flashMessages?: Object
-}>()
 
-const columns: DataTableColumns<User> = [
+const columns = [
    {
       title: "Admin",
       key: "is_admin",
@@ -58,7 +51,7 @@ const columns: DataTableColumns<User> = [
       key: "actions",
       className: "space-x-4",
       render(row) {
-         let arr: VNode[] = []
+         let arr = []
          arr[0] = h(
             NButton,
             { 
@@ -84,11 +77,11 @@ const columns: DataTableColumns<User> = [
    }
 ]
 
-function clickEdit(id: Number){
+function clickEdit(id){
    console.log("Edit clicked: "+id)
 }
 
-function clickDelete(id: Number){
+function clickDelete(id){
    console.log("Delete clicked: "+id)
 }
 

resources/js/pages/Users/Show.vue

@@ -2,9 +2,8 @@
 
 </template>
 
-<script lang="ts" setup>
+<script setup>
 import BELayout from '@/layouts/BELayout.vue'
-//import FlashMessages from '@/components/FlashMessages.vue'
 
 defineOptions({ layout: BELayout })
 

tsconfig.vue.json

@@ -1,20 +0,0 @@
-{
-    // tsconfig.vue.json
-  
-    "extends": "@vue/tsconfig/tsconfig.web.json",
-    "include": [
-      "./resources/js/**/*"
-    ],
-    "exclude": [
-      "node_modules",
-      "build",
-    ],
-    "compilerOptions": {
-      "paths": {
-        "@/*": ["./resources/js/"],
-      },
-      "types": [
-        "node"
-      ]
-    }
-  }

webpack.config.js

@@ -1,7 +1,7 @@
 const { join, resolve } = require('path')
 const Encore = require('@symfony/webpack-encore')
-//const Components = require('unplugin-vue-components/webpack')
+const Components = require('unplugin-vue-components/webpack')
-//const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')
+const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')
 
 /*
 |--------------------------------------------------------------------------
@@ -47,7 +47,7 @@ Encore.setPublicPath('/assets')
 | entrypoints.
 |
 */
-Encore.addEntry('app', './resources/js/app.ts')
+Encore.addEntry('app', './resources/js/app.js')
 
 /*
 |--------------------------------------------------------------------------
@@ -187,18 +187,14 @@ Encore.enableVueLoader(() => {}, {
   version: 3,
   runtimeCompilerBuild: false,
   useJsx: false
-}).enableTypeScriptLoader(config => {
-  config.configFile = 'tsconfig.vue.json'
 }).addAliases({
   '@': join(__dirname, 'resources/js'),
 }).configureDefinePlugin(options => {
   options['__VUE_OPTIONS_API__'] = true
   options['__VUE_PROD_DEVTOOLS__'] = false
-})
+}).addPlugin( Components({
-
+  resolvers: [NaiveUiResolver()]
-/*.addPlugin( Components({
+}))
-  //resolvers: [NaiveUiResolver()]
-}))*/
 
 /*
 |--------------------------------------------------------------------------