create-v-kit-spa 1.0.9 → 1.0.10

package/lib/162/package.json

@@ -6,8 +6,16 @@
         "build": "vite build"
     },
     "devDependencies": {
-        "axios": "^1.7.4",
+        "@mdi/font": "^7.4.47",
+        "axios": "^1.6.4",
         "laravel-vite-plugin": "^1.0",
         "vite": "^5.0"
+    },
+    "dependencies": {
+        "@vitejs/plugin-vue": "^5.2.1",
+        "pinia": "^2.3.0",
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0",
+        "vuetify": "^3.7.5"
     }
 }

package/lib/162/public/.htaccess

@@ -2,20 +2,22 @@
     <IfModule mod_negotiation.c>
         Options -MultiViews -Indexes
     </IfModule>
-
+ 
     RewriteEngine On
-
+    RewriteBase /ProjectName/
+ 
     # Handle Authorization Header
     RewriteCond %{HTTP:Authorization} .
     RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
-
+ 
     # Redirect Trailing Slashes If Not A Folder...
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteCond %{REQUEST_URI} (.+)/$
     RewriteRule ^ %1 [L,R=301]
-
-    # Send Requests To Front Controller...
+    RewriteRule ^(.*)/$ /ProjectName/$1 [L,R=301]
+ 
+    # Handle Front Controller...
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteRule ^ index.php [L]
-</IfModule>
+</IfModule>

package/lib/162/resources/js/app.js

@@ -1,29 +1,29 @@
-import './bootstrap.js';
+import './bootstrap';
 import { createApp } from 'vue'
-import App from './components/templates/App.vue'
+import App from './templates/App.vue'
 
-import router  from './router.js'
+import router from './router.js'
+
+import { createPinia } from 'pinia'
+const pinia = createPinia()
 
 import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
+import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import '@mdi/font/css/materialdesignicons.css'
 
-import { createPinia } from 'pinia'
-
-const pinia = createPinia()
 const vuetify = createVuetify({
     components,
     directives,
     icons: {
-        defaultSet: 'mdi',
-    },
+        defaultSet: 'mdi'
+    }
 })
 
 const app = createApp(App)
+app.use(router)
 app.use(pinia)
 app.use(vuetify)
-app.use(router)
 app.mount('#app')

package/lib/162/resources/js/components/About.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+    About
+</template>

package/lib/162/resources/js/components/Home.vue

@@ -0,0 +1,12 @@
+<script setup>
+    import { piniaStore } from '../store.js';
+    const store = piniaStore();
+</script>
+
+<template>
+    <h1>HOME</h1>
+    <h1>{{ store.greet }}</h1>
+    <h1>Original : {{ store.count }}</h1>
+    <h1>Getter : {{ store.doubleCount }}</h1>
+    <v-btn @click="store.increment">Add</v-btn>
+</template>

package/lib/162/resources/js/failOver.js

@@ -0,0 +1,9 @@
+import router from './router';
+const routerBase = router.options.base;
+
+export const base = routerBase == undefined ? '/' : '/ProjectName/'; // to be automated
+
+// usage
+// note: mainly used for multiple routes like /products/items/2 since api read it as items/2
+// import { base } from '@/path.js'
+// const response = await axios.get(`${base}api/getJobs`)

package/lib/162/resources/js/router.js

@@ -1,40 +1,24 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-const Home = () => import('./components/pages/Home.vue');
-const About= () => import('./components/pages/About.vue');
-const ErrorPage = () => import('./components/pages/Error.vue');
-// import Home from './components/pages/Home.vue';
-// import About from './components/pages/About.vue';
-// import ErrorPage from './components/pages/Error.vue';
-
-const router = createRouter({
-    history: createWebHistory(import.meta.env.BASE_URL), 
-    routes: [
-        {
-            path: '/',
-            component: Home,
-            name: 'Home',
-        },
-        {
-            path: '/about',
-            component: About,
-            name: 'About',
-        },
-        {
-            path: '/:catchAll(.*)',
-            component: ErrorPage,
-            name: 'Error'
-        },
-    ],
-});
-      
-// router.beforeEach((to, from, next) => {
-//     if(to.path == '/'){
-//       next('/')
-//     }else{
-//       next()
-//     }
-// })
-
-export default router;
- 
+import { createRouter, createWebHistory } from "vue-router";
+
+const Home = () => import('./views/HomeView.vue');
+const About = () => import('./components/About.vue');
+
+const router = createRouter({
+    // history: createWebHistory(),
+    history: createWebHistory('/ProjectName/'),
+    base: '/ProjectName/',
+    routes:[
+        {
+            path:'/',
+            component: Home,
+            name: 'Home'
+        },
+        {
+            path:'/about',
+            component: About,
+            name: 'About'
+        }
+    ]
+});
+
+export default router;

package/lib/162/resources/js/{mainStore.js → store.js}

@@ -1,20 +1,19 @@
-import { defineStore } from 'pinia'
-
-export const useSampleStore = defineStore('counter', {
-    state: () => {
-        return {
-            count: 0,
-            greet: 'Ohayooooo!',
-        }
-    },
-
-    getters: {
-        doubleCount: (state) => state.count * 2,
-    },
-    
-    actions: {
-        increment() {
-            this.count++
-        },
-    },
+import { defineStore } from 'pinia'
+ 
+export const piniaStore = defineStore('store', {
+    state: () => {
+        return {
+            count: 0,
+            greet: 'Ohayooooo!',
+        }
+    },
+    
+    getters: {
+        doubleCount: (state) => state.count * 2,
+    },
+    actions: {
+        increment() {
+            this.count++
+        },
+    },
 })

package/lib/162/resources/js/{components/templates → templates}/App.vue

@@ -1,86 +1,66 @@
-<template>
-    <v-app>
-        <v-app-bar
-            density="compact"
-            color="primary"
-            prominent
-            >
-            <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-            <v-toolbar-title>Vue 3 - Laravel 11 SPA</v-toolbar-title>
-        </v-app-bar>
-
-        <v-navigation-drawer
-            v-model="drawer"
-            temporary
-            >
-
-            <v-list density="compact" class="pt-0" >
-                <v-list-item
-                    v-for="(item, i) in items"
-                    :key="i"
-                    :value="item"
-                    color="primary"
-                    @click="$router.push(item.to)"
-                >
-                    <template v-slot:prepend>
-                        <v-icon :icon="item.icon"></v-icon>
-                    </template>
-                    <v-list-item-title v-text="item.text"></v-list-item-title>
-                </v-list-item>
-            </v-list>
-        </v-navigation-drawer>
-
-        <v-main>
-            <router-view></router-view>
-        </v-main>
-    </v-app>
-</template>
-
-<script>
-import { ref } from 'vue';
-
-export default {
-  setup() {
-        const drawer = ref(false);
-
-        const items = ref([
-            {
-                text: 'Home',
-                to: '/',
-                icon: 'mdi-home'
-            },
-            {
-                text: 'About',
-                to: '/about',
-                icon:'mdi-information-outline'
-            },
-        ]);
-    
-        return {
-            drawer,
-            items
-        };
-  },
-};
-</script>
-
-<!-- <script>
-export default {
-    data: () => ({
-        drawer: false,
-        items: [
-            {
-                title: 'Home',
-                to: '/',
-                icon: 'mdi-home'
-            },
-            {
-                title: 'About',
-                to: 'about',
-                icon:'mdi-information-outline'
-            },
-        ],
-
-    }),
-}   
-</script> -->
+<template>
+    <v-app>
+        <v-app-bar
+            elevation="0"
+            density="compact"
+            color="black"
+            prominent
+            >
+            <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+            <v-toolbar-title >Vue 3 - Laravel 11 SPA</v-toolbar-title>
+        </v-app-bar>
+
+        <v-navigation-drawer
+            v-model="drawer"
+            temporary
+            >
+
+            <v-list density="compact" class="pt-0" >
+                <v-list-item
+                    v-for="(item, i) in items"
+                    :key="i"
+                    :value="item"
+                    color="gray"
+                    @click="$router.push(item.to)"
+                >
+                    <template v-slot:prepend>
+                        <v-icon :icon="item.icon"></v-icon>
+                    </template>
+                    <v-list-item-title class="py-3" v-text="item.text"></v-list-item-title>
+                </v-list-item>
+            </v-list>
+        </v-navigation-drawer>
+
+        <v-main>
+            <router-view></router-view>
+        </v-main>
+    </v-app>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+        const drawer = ref(false);
+
+        const items = ref([
+            {
+                text: 'Home',
+                to: '/',
+                icon: 'mdi-home'
+            },
+            {
+                text: 'About',
+                to: '/about',
+                icon:'mdi-information-outline'
+            },
+        ]);
+    
+        return {
+            drawer,
+            items
+        };
+  },
+};
+</script>

package/lib/162/resources/js/views/HomeView.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Home from '../components/Home.vue'
+
+</script>
+
+<template>
+    <Home/>
+</template>

package/lib/162/resources/views/layouts/app.blade.php

@@ -1,14 +1,15 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vue 3 - Laravel 11 SPA</title>
-
-    @vite(['resources/css/app.css', 'resources/js/app.js'])
-    
-</head>
-<body>
-    <div id="app"></div>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <title>Laravel-11 Vue-3</title>
+
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+        
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
 </html>

package/lib/162/resources/views/welcome.blade.php

@@ -16,7 +16,7 @@
         </style>
     </head>
     <body class="font-sans antialiased dark:bg-black dark:text-white/50">
-        <div class="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
+        <div className="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
             <img id="background" class="absolute -left-20 top-0 max-w-[877px]" src="https://laravel.com/assets/img/welcome/background.svg" />
             <div class="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white">
                 <div class="relative w-full max-w-2xl px-6 lg:max-w-7xl">
@@ -140,7 +140,7 @@
                                 <svg class="size-6 shrink-0 self-center stroke-[#FF2D20]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75"/></svg>
                             </a>
 
-                            <div class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] transition duration-300 hover:text-black/70 hover:ring-black/20 focus:outline-none focus-visible:ring-[#FF2D20] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800 dark:hover:text-white/70 dark:hover:ring-zinc-700 dark:focus-visible:ring-[#FF2D20]">
+                            <div class="flex items-start gap-4 rounded-lg bg-white p-6 shadow-[0px_14px_34px_0px_rgba(0,0,0,0.08)] ring-1 ring-white/[0.05] lg:pb-10 dark:bg-zinc-900 dark:ring-zinc-800">
                                 <div class="flex size-12 shrink-0 items-center justify-center rounded-full bg-[#FF2D20]/10 sm:size-16">
                                     <svg class="size-5 sm:size-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                         <g fill="#FF2D20">

package/lib/162/routes/web.php

@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Route;
-use App\Http\Controllers\MainController;
 
-Route::get('/{any?}', [MainController::class, 'index'])->where('any', '.*');
+Route::get('/{any?}', function () {
+    return view('layouts.app');
+})->where('any','.*');

package/lib/162/storage/app/.gitignore

@@ -0,0 +1,3 @@
+*
+!public/
+!.gitignore

package/lib/162/storage/app/public/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/lib/162/storage/framework/cache/.gitignore

@@ -0,0 +1,3 @@
+*
+!data/
+!.gitignore

package/lib/162/storage/framework/cache/data/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/lib/162/storage/framework/sessions/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/lib/162/storage/framework/testing/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/lib/162/storage/framework/views/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/lib/162/storage/logs/.gitignore

@@ -0,0 +1,2 @@
+*
+!.gitignore

package/lib/162/vite.config.js

@@ -10,4 +10,4 @@ export default defineConfig({
         }),
         vue(),
     ],
-});
+});

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "create-v-kit-spa",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "main": "dist/index.js",
   "description": "A simple way to start your Vue-Laravel SPA projects",
   "repository": "Shuashuaa/v-kit-spa",
   "scripts": {
     "test": "ts-node dist/index.js",
     "test-dev": "ts-node src/index.ts",
-    "build": "tsc"
+    "build": "tsc",
+    "deploy": "npm link && npm link create-v-kit-spa && npm publish --access public"
   },
   "bin": {
     "create-v-kit-spa": "dist/index.js"

package/lib/162/app/Http/Controllers/MainController.php

@@ -1,12 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-
-class mainController extends Controller
-{
-    public function index(){
-        return view('layouts.app');
-    }
-}

package/lib/162/resources/js/components/pages/About.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        <p>About Page</p>
-    </div>
-</template>

package/lib/162/resources/js/components/pages/Error.vue

@@ -1,5 +0,0 @@
-<template>
-    <div>
-        <p>Error Page | 404 Not Found</p>
-    </div>
-</template>

package/lib/162/resources/js/components/pages/Home.vue

@@ -1,21 +0,0 @@
-<template>
-    <h1>HOME</h1>
-    <h1>{{ sampleStore.greet }}</h1>
-    <h1>Original : {{ sampleStore.count }}</h1>
-    <h1>Getter : {{ sampleStore.doubleCount }}</h1>
-    <v-btn @click="sampleStore.increment">Add</v-btn>
-  </template>
-  
-  <script>
-  import { useSampleStore } from '../../mainStore.js';
-  
-  export default {
-    setup() {
-        const sampleStore = useSampleStore();
-    
-        return {
-            sampleStore,
-        };
-    },
-  };
-  </script>