Vue 3 with router, stores and locales

How To Install Vue 3 in Laravel 10 with Vite (router, locales, stores).

Author: atomjoy

vue/README.md

@@ -0,0 +1,48 @@
+# Vue 3 with router, stores and locales
+
+How To Install Vue 3 in Laravel 10 with Vite (router, locales, stores).
+
+## Create project
+
+Copy files from vue to laravel-project directory.
+
+```sh
+composer create-project --prefer-dist laravel/laravel:^10.0 laravel-project
+cd laravel-project
+```
+
+### Change in .env
+
+```sh
+APP_URL=http://localhost:8000
+```
+
+### Add in routes/web.php
+
+```php
+<?php
+// Last route
+Route::fallback(function() {
+    return view('welcome');
+});
+```
+
+## Install
+
+```sh
+npm install
+npm install vue@next vue-loader@next
+npm install @vitejs/plugin-vue
+npm install axios
+npm install pinia
+npm install vue-i18n@9
+npm install vue-router@4
+npm install @googlemaps/js-api-loader
+```
+
+## Build and run
+
+```sh
+npm run build
+php artisan serve
+```

vue/resources/js/App.vue

@@ -0,0 +1,14 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+</script>
+
+<template>
+<!-- 
+    <nav>
+        <RouterLink to="/">Home</RouterLink>
+        <RouterLink to="/about">About</RouterLink>
+    </nav>
+ -->
+
+	<RouterView />
+</template>

vue/resources/js/app.js

@@ -0,0 +1,39 @@
+import './bootstrap';
+
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createI18n } from 'vue-i18n'
+import lang from './lang'
+import router from './router'
+import App from './App.vue'
+import './assets/main.css'
+
+const app = createApp(App)
+const i18n = createI18n(lang)
+const stores = createPinia()
+
+app.use(i18n)
+app.use(stores)
+app.use(router)
+
+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
+	},
+})
+
+app.mount('#app')

vue/resources/js/assets/main.css

@@ -0,0 +1,35 @@
+* {
+    box-sizing: border-box;
+    text-decoration: none;
+    outline: none;
+}
+
+html,body {
+    padding: 0px;
+    margin: 0px;
+}
+
+html {
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+
+body {
+    color: #222;
+    background: #fff;    
+}
+
+nav {
+    float: left;
+    width: 100%;
+}
+
+.menu-link {
+    float: left;
+    padding: 10px 20px;
+    margin: 10px;
+    color: #fff;
+    background: #07f;
+    font-size: 1rem;
+    border-radius: 10px;
+}

vue/resources/js/bootstrap.js

@@ -0,0 +1,32 @@
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });

vue/resources/js/components/ChangeLocale.vue

@@ -0,0 +1,82 @@
+<!--
+// https://vue-i18n.intlify.dev/guide/advanced/composition.html#global-scope
+// Add in main i18n options main.js
+
+import { createI18n } from 'vue-i18n'
+
+const lang = {
+  // Allow compositions api (required)
+  allowComposition: true,
+  globalInjection: true,
+  legacy: false,
+
+  // Locales
+  locale: 'en',
+  fallbackLocale: 'en',
+  availableLocales: ['en', 'pl'],
+  messages: {
+    en: { en: "English", pl: "Polish" },
+    pl: { en: "Angielski", pl: "Polski" },
+  },
+}
+
+const i18n = createI18n(lang)
+app.use(i18n)
+-->
+
+<template>
+	<div class="locale-changer">
+		<select v-model="locale" class="locale-changer-select">
+			<option v-for="lang in availableLocales" :key="`locale-${lang}`" :value="lang">{{ t(lang) }}</option>
+		</select>
+	</div>
+</template>
+
+<script setup>
+import { watch, computed, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth.js'
+import { useI18n } from 'vue-i18n'
+
+const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
+const store = useAuthStore()
+
+onMounted(() => {
+	console.log('Current locale', locale.value, availableLocales)
+})
+
+watch(
+	() => locale.value,
+	(lang) => {
+		console.log('Changed locale', lang)
+		store.changeLocale(lang)
+	}
+)
+
+const msg = computed(() => t('example.msg'))
+</script>
+
+<style scoped>
+.locale-changer {
+	float: right;
+	width: auto;
+	height: auto;
+	padding: 5px;
+}
+.locale-changer-select {
+	float: right;
+	display: inline;
+	padding: 2px;
+	text-align: center;
+	border: 0px;
+	font-size: 1rem;
+	cursor: pointer;
+}
+.locale-changer-select > * {
+	background: #fff;
+	color: #222;
+}
+.locale-changer-select:focus {
+	border: none;
+	box-shadow: none;
+}
+</style>

vue/resources/js/lang/index.js

@@ -0,0 +1,13 @@
+import messages from './messages.js'
+
+const lang = {
+	locale: 'en', // set locale
+	fallbackLocale: 'en', // set fallback locale
+	availableLocales: ['en', 'pl'], // available locales
+	messages: messages,
+	allowComposition: true, // Allow compositions api
+	globalInjection: true, // Allow t compositions api
+	legacy: false, // Allow t compositions api
+}
+
+export default lang