Update

Author: atomjoy

README.md

@@ -1,6 +1,6 @@
 # Vue 3 in Laravel 10
 
-Minimal Vue 3 application with router, i18n, pinia stores and @googlemaps/js-api-loader.
+Minimal Vue 3 application with router, i18n, pinia store.
 
 ## Install package
 

app/jsconfig.json

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "allowJs": true
+    }
+}

app/resources/js/app.js

@@ -17,25 +17,26 @@ app.use(i18n)
 app.use(stores)
 app.use(router)
 
-// // Glogals provide/inject composition api
-// app.provide('globalStore', {
-// 	id: 1,
-// 	async getUsers() {
-// 		let res = await axios.get('https://jsonplaceholder.typicode.com/users')
-// 		console.log('App global store', res.data)
-// 	},
-// })
-
-// // v-color="'red'"
-// app.directive('color', (el, binding) => {
-// 	el.style.color = binding.value
-// })
-
-// // v-highlight="'yellow'"
-// app.directive('highlight', {
-// 	mounted(el, binding, vnode) {
-// 		el.style.background = binding.value
-// 	},
-// })
+/*
+
+// Glogal provide/inject composition api
+app.provide('globalStore', {
+  user: null,
+  isLogged: false,
+  async getUser(id = 1) {
+    let res = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`)
+    console.log('App global store', res.data)
+    return res.data ?? null
+  },
+})
+
+// Directive v-highlight="'yellow'"
+app.directive('highlight', {
+  mounted(el, binding, vnode) {
+    el.style.background = binding.value
+  },
+})
+
+*/
 
 app.mount('#app')

app/resources/js/components/ChangeLocale.vue

@@ -10,12 +10,11 @@
 import { watch, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 // import { useAuthStore } from '@/views/page/auth/stores/auth.js'
-
 // const store = useAuthStore()
 const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
 
 onMounted(() => {
-	console.log('Current locale', locale.value, availableLocales)
+	// console.log('Current locale', locale.value, availableLocales)
 })
 
 watch(

app/resources/js/views/NotFoundView.vue

@@ -1,3 +1,4 @@
 <template>
 	<h1>404 {{ $t('error404.title') }}</h1>
 </template>
+<script setup></script>

app/resources/views/vue.blade.php

@@ -5,6 +5,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>{{ __('Welcome') }}</title>
+
 	{{-- 
 	<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" referrerpolicy="no-referrer" />
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

app/routes/web.php

@@ -18,7 +18,7 @@
 	return view('welcome');
 });
 
-// Vue 
+// Vue catch all
 Route::fallback(function () {
 	return view('vue');
 });

src/VueServiceProvider.php

@@ -28,6 +28,7 @@ public function boot()
 				__DIR__ . '/../app/routes' => base_path('routes'),
 				__DIR__ . '/../app/package.json' => base_path('package.json'),
 				__DIR__ . '/../app/vite.config.js' => base_path('vite.config.js'),
+				__DIR__ . '/../app/jsconfig.json' => base_path('jsconfig.json'),
 			], 'vue-config');
 		}
 	}