Vue Starter SPA

Author: atomjoy

README.md

@@ -1,11 +1,12 @@
-# Laravel 11 vue 3.4 Starter Router
+# Laravel 11 Vue 3.4 Starter SPA
 
 Pobierz repozytorium z githuba rozpakuj i przejdż do katalogu.
 
 ## Wersje
 
 - v1.0 Starter - single page
-- v2.0 Starter Router - single page with sub-pages
+- v2.0 Starter Router - single page with sub-pages, router, fontawesome.css, animate.css
+- v3.0 Starter SPA - single page with sub-pages, router, stores, locales, themes, fontawesome.css, animate.css
 
 ## Vue
 

README_DEV.md

@@ -14,6 +14,9 @@ npm install axios
 npm install vue@latest
 npm install --save-dev @vitejs/plugin-vue
 npm install vue-router@4
+npm install pinia
+npm install vue-i18n@9
+npm install @googlemaps/js-api-loader
 ```
 
 ### Kompilacja

composer.lock

@@ -12,7 +12,10 @@
         "vite": "^5.0"
     },
     "dependencies": {
+        "@googlemaps/js-api-loader": "^1.16.6",
+        "pinia": "^2.1.7",
         "vue": "^3.4.21",
+        "vue-i18n": "^9.11.0",
         "vue-router": "^4.3.0"
     }
 }

package-lock.json

@@ -1,17 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 :root {
 	--font-family: 'Poppins', Arial, Helvetica, sans-serif;
 	--font-family-text: 'Open Sans', Arial, Helvetica, sans-serif;
 	--font-size: 16px;
 	--border-radius: 10px;
+	--scrollbar-bg: #FF9557;
+	--scrollbar-thumb: #e6e6e6;
 }
 
 :root {	
     color-scheme: light;
 	--bg-primary: #fff;	
-	--text-primary: #272848;
+	--text-primary: #232629;
     --accent-primary: #FF9557; /* #0249fe; */
     --placeholder: #717171;
     --logo: url('/logo/logo-light.png');
@@ -33,35 +35,44 @@
 [color-scheme='light'] {
     color-scheme: light;
 	--bg-primary: #fff;	
-	--text-primary: #272848;
+	--text-primary: #212329;
     --accent-primary: #FF9557; /* #0249fe; */
     --placeholder: #717171;
 	--logo: url('/logo/logo-light.png');
 }
 
 [color-scheme='dark'] {
     color-scheme: dark;
-    --bg-primary: #212529; /* #1E1E1E; #212529; */
-    --text-primary: #fff;
-    --accent-primary: #FF9557; /* #0249FE; */
-    --placeholder: #717171;
-    --logo: url('/logo/logo-dark.png');
+	--bg-primary: #212529; /* #1E1E1E; #212529; */
+	--text-primary: #fff;
+	--accent-primary: #FF9557; /* #0249FE; */
+	--placeholder: #717171;
+	--logo: url('/logo/logo-dark.png');
 }
 
-html, body {    
-    font-size: var(--font-size);
+html {
+	display: block;
+	font-size: var(--font-size);
 	font-family: var(--font-family);
 	background: var(--bg-primary);
 	margin: 0;
-	padding: 0px;	    
+	padding: 0px;
+	height: 100vh;
+	overflow-y: scroll;	
 }
 
 body {
-    overflow-y: scroll;
+	display: block;
+	overflow: hidden;
+	margin: 0;
+	padding: 0px;	
+	color: var(--text-primary);
 	background: var(--bg-primary);
-    color: var(--text-primary);
+	transition: color 0.5s, background-color 0.5s;
+	position: relative;	
 }
 
+
 p {
     font-family: var(--font-family-text);
 }
@@ -98,19 +109,18 @@ iframe {
 	color: #fff;
 }
 
-.scrollbar-thin {
-	overflow-y: scroll;
+.scrollbar-thin {	
 	scrollbar-width: thin;
-	scrollbar-color: #fff #aaa;
+	scrollbar-color: var(--scrollbar-bg) var(--scrollbar-thumb);
 }
 
 .scrollbar-thin::-webkit-scrollbar {
 	width: 8px;
-	background: #aaa;
+	background: var(--scrollbar-bg);
 }
 
-.scrollbar-thin::-webkit-scrollbar-thumb {
-	background: #fff;
+.scrollbar-thin::-webkit-scrollbar-thumb {	
+	background: var(--scrollbar-thumb);
 }
 
 #app, .section {