Skip to content

Commit f624c37

Browse files
atomjoyatomjoy
authored
Vue 3 with router, stores and locales
How To Install Vue 3 in Laravel 10 with Vite (router, locales, stores).
1 parent 7bdf820 commit f624c37

File tree

20 files changed

+903
-0
lines changed

20 files changed

+903
-0
lines changed

‎vue/README.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Vue 3 with router, stores and locales
2+
3+
How To Install Vue 3 in Laravel 10 with Vite (router, locales, stores).
4+
5+
## Create project
6+
7+
Copy files from vue to laravel-project directory.
8+
9+
```sh
10+
composer create-project --prefer-dist laravel/laravel:^10.0 laravel-project
11+
cd laravel-project
12+
```
13+
14+
### Change in .env
15+
16+
```sh
17+
APP_URL=http://localhost:8000
18+
```
19+
20+
### Add in routes/web.php
21+
22+
```php
23+
<?php
24+
// Last route
25+
Route::fallback(function() {
26+
return view('welcome');
27+
});
28+
```
29+
30+
## Install
31+
32+
```sh
33+
npm install
34+
npm install vue@next vue-loader@next
35+
npm install @vitejs/plugin-vue
36+
npm install axios
37+
npm install pinia
38+
npm install vue-i18n@9
39+
npm install vue-router@4
40+
npm install @googlemaps/js-api-loader
41+
```
42+
43+
## Build and run
44+
45+
```sh
46+
npm run build
47+
php artisan serve
48+
```

‎vue/resources/js/App.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup>
2+
import { RouterLink, RouterView } from 'vue-router'
3+
</script>
4+
5+
<template>
6+
<!--
7+
<nav>
8+
<RouterLink to="/">Home</RouterLink>
9+
<RouterLink to="/about">About</RouterLink>
10+
</nav>
11+
-->
12+
13+
<RouterView />
14+
</template>

‎vue/resources/js/app.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import './bootstrap';
2+
3+
import { createApp } from 'vue'
4+
import { createPinia } from 'pinia'
5+
import { createI18n } from 'vue-i18n'
6+
import lang from './lang'
7+
import router from './router'
8+
import App from './App.vue'
9+
import './assets/main.css'
10+
11+
const app = createApp(App)
12+
const i18n = createI18n(lang)
13+
const stores = createPinia()
14+
15+
app.use(i18n)
16+
app.use(stores)
17+
app.use(router)
18+
19+
app.provide('globalStore', {
20+
id: 1,
21+
async getUsers() {
22+
let res = await axios.get('https://jsonplaceholder.typicode.com/users')
23+
// console.log('App global store', res.data)
24+
},
25+
})
26+
27+
// v-color="'red'"
28+
app.directive('color', (el, binding) => {
29+
el.style.color = binding.value
30+
})
31+
32+
// v-highlight="'yellow'"
33+
app.directive('highlight', {
34+
mounted(el, binding, vnode) {
35+
el.style.background = binding.value
36+
},
37+
})
38+
39+
app.mount('#app')

‎vue/resources/js/assets/main.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
* {
2+
box-sizing: border-box;
3+
text-decoration: none;
4+
outline: none;
5+
}
6+
7+
html,body {
8+
padding: 0px;
9+
margin: 0px;
10+
}
11+
12+
html {
13+
font-family: Arial, Helvetica, sans-serif;
14+
font-size: 16px;
15+
}
16+
17+
body {
18+
color: #222;
19+
background: #fff;
20+
}
21+
22+
nav {
23+
float: left;
24+
width: 100%;
25+
}
26+
27+
.menu-link {
28+
float: left;
29+
padding: 10px 20px;
30+
margin: 10px;
31+
color: #fff;
32+
background: #07f;
33+
font-size: 1rem;
34+
border-radius: 10px;
35+
}

‎vue/resources/js/bootstrap.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* We'll load the axios HTTP library which allows us to easily issue requests
3+
* to our Laravel back-end. This library automatically handles sending the
4+
* CSRF token as a header based on the value of the "XSRF" token cookie.
5+
*/
6+
7+
import axios from 'axios';
8+
window.axios = axios;
9+
10+
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
11+
12+
/**
13+
* Echo exposes an expressive API for subscribing to channels and listening
14+
* for events that are broadcast by Laravel. Echo and event broadcasting
15+
* allows your team to easily build robust real-time web applications.
16+
*/
17+
18+
// import Echo from 'laravel-echo';
19+
20+
// import Pusher from 'pusher-js';
21+
// window.Pusher = Pusher;
22+
23+
// window.Echo = new Echo({
24+
// broadcaster: 'pusher',
25+
// key: import.meta.env.VITE_PUSHER_APP_KEY,
26+
// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
27+
// wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
28+
// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
29+
// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
30+
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
31+
// enabledTransports: ['ws', 'wss'],
32+
// });

‎vue/resources/js/components/ChangeLocale.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!--
2+
// https://vue-i18n.intlify.dev/guide/advanced/composition.html#global-scope
3+
// Add in main i18n options main.js
4+
5+
import { createI18n } from 'vue-i18n'
6+
7+
const lang = {
8+
// Allow compositions api (required)
9+
allowComposition: true,
10+
globalInjection: true,
11+
legacy: false,
12+
13+
// Locales
14+
locale: 'en',
15+
fallbackLocale: 'en',
16+
availableLocales: ['en', 'pl'],
17+
messages: {
18+
en: { en: "English", pl: "Polish" },
19+
pl: { en: "Angielski", pl: "Polski" },
20+
},
21+
}
22+
23+
const i18n = createI18n(lang)
24+
app.use(i18n)
25+
-->
26+
27+
<template>
28+
<div class="locale-changer">
29+
<select v-model="locale" class="locale-changer-select">
30+
<option v-for="lang in availableLocales" :key="`locale-${lang}`" :value="lang">{{ t(lang) }}</option>
31+
</select>
32+
</div>
33+
</template>
34+
35+
<script setup>
36+
import { watch, computed, onMounted } from 'vue'
37+
import { useAuthStore } from '@/stores/auth.js'
38+
import { useI18n } from 'vue-i18n'
39+
40+
const { t, locale, availableLocales } = useI18n({ useScope: 'global' })
41+
const store = useAuthStore()
42+
43+
onMounted(() => {
44+
console.log('Current locale', locale.value, availableLocales)
45+
})
46+
47+
watch(
48+
() => locale.value,
49+
(lang) => {
50+
console.log('Changed locale', lang)
51+
store.changeLocale(lang)
52+
}
53+
)
54+
55+
const msg = computed(() => t('example.msg'))
56+
</script>
57+
58+
<style scoped>
59+
.locale-changer {
60+
float: right;
61+
width: auto;
62+
height: auto;
63+
padding: 5px;
64+
}
65+
.locale-changer-select {
66+
float: right;
67+
display: inline;
68+
padding: 2px;
69+
text-align: center;
70+
border: 0px;
71+
font-size: 1rem;
72+
cursor: pointer;
73+
}
74+
.locale-changer-select > * {
75+
background: #fff;
76+
color: #222;
77+
}
78+
.locale-changer-select:focus {
79+
border: none;
80+
box-shadow: none;
81+
}
82+
</style>

‎vue/resources/js/lang/index.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import messages from './messages.js'
2+
3+
const lang = {
4+
locale: 'en', // set locale
5+
fallbackLocale: 'en', // set fallback locale
6+
availableLocales: ['en', 'pl'], // available locales
7+
messages: messages,
8+
allowComposition: true, // Allow compositions api
9+
globalInjection: true, // Allow t compositions api
10+
legacy: false, // Allow t compositions api
11+
}
12+
13+
export default lang

0 commit comments

Comments
 (0)