I have laravel/VueJs app which is supporting multiple language but there is one issue, when I change language on VueJs html Lang tag will not change.
Code
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" />
<style>body{ margin-bottom: 60px !important;}</style>
</head>
<body style="overflow:hidden;">
<noscript>
<strong>We're sorry but Xtreme Vuesax doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="{{ asset('js/app.js') }}"></script>
<script>
window.default_locale = "{{ config('app.locale') }}";
window.fallback_locale = "{{ config('app.fallback_locale') }}";
</script>
</body>
</html>
app.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import localesData from './components/Layouts/localesData'
Vue.component('locale-dropdown', require('./components/Layouts/locales').default);
const i18n = new VueI18n({
locale: 'en',
messages: localesData,
})
const app = new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
});
Explanation
I need this line <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> to be change to selected language in VueJs.
any idea how to change that?
From within your Vue component 'locale-dropdown', when the user selects a locale, you can
//say the data property on your component which holds the selected locale is called locale
let h = document.querySelector('html');
h.setAttribute('lang', this.locale);
Related
I am trying to make PWA of my Vue/Laravel app. The problem I am facing is my manifest.json file is not linked to my production build head. On my development it's working fine, browser is detecting the manifest.json but not on server.
I have linked the manifest.json to my app.blade.php file but on production server when I see the source code there is no manifest.json attached.
Here is my app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<link rel="manifest" href="manifest.json" />
<title>{{env('APP_NAME')}}</title>
</head>
<body class="antialiased">
<div id="app"></div>
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>
My webpack.mix.js configs are
const mix = require('laravel-mix');
const path = require('path');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.ts('resources/js/main.ts', 'public/js')
.vue({ version: 3 })
.postCss('resources/css/app.css', 'public/css', [
//
])
.sourceMaps();
mix.browserSync('http://localhost/');
mix.webpackConfig(module.exports = {
resolve: {
alias: {
'#/pages': path.resolve(__dirname, './resources/js/pages'),
'#/assets': path.resolve(__dirname, './resources/js/assets'),
},
},
});
mix.webpackConfig({
plugins: [
new WebpackManifestPlugin(),
new WebpackPwaManifest({
name: "DC",
short_name: "DC",
start_url: "/",
display: "standalone",
theme_color: "#004c97",
background_color: "#fff",
icons: [
{
"src": path.resolve(__dirname, './resources/js/assets/images/logo-pwa.png'),
"sizes": "256x256",
"type": "image/png"
}
],
id: "/#/login",
filename: 'manifest.json',
publicPath: '/',
basePath: '/public',
}),
],
});
mix.options({
hmrOptions: {
host: 'localhost',
port: 8000
}
})
Remember, it's working fine on development but not working on production.
Here is my production output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="irPGXqkRHKDYOBD1G0rPYsNp0Iwu881BIeCbmBfo"/>
<title>Abc</title>
</head>
<body class="antialiased">
<div id="app"></div>
<script src="https://xxxx/js/main.js"></script>
</body>
</html>
As you can see, there is no manifest file attached here
After spending hours i finally able to resolve this issue by replacing assets with mix in app.blade.php here is my latest file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}"/>
<link rel="manifest" href="{{ mix('/pwa/manifest.json') }}" />
<title>{{env('APP_NAME')}}</title>
</head>
<body class="antialiased">
<div id="app"></div>
<script src="{{ mix('/js/main.js') }}"></script>
</body>
</html>
To be honest, I'm having trouble understanding the concept of Laravel how to build in and use its assets (css, js). I guess I'm using a wrong but still working way even for production.
My approach for Production
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Step 1: npm run build
Step 2: Manually copy the newly generated js and css files into my public folder.
Step 3: Change the file names in my bladetemplate. So app.11111.js to app.js
Note: This doesn't feel right but it worked for Production. I would be very grateful for any hints on this.
Here is my layout.blade.php file
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght#400;600;700&display=swap">
<link rel="stylesheet" href="{{ asset('assets/css/main.css') }}">
<!-- Scripts -->
#vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100" style="min-height: 100vh; display:flex; flex-direction:column;">
#include('layouts.navigation')
<!-- Page Content -->
<main>
#yield('content')
</main>
#include('templateparts.footer')
</div>
<script src="{{ asset('assets/js/app.js') }}"></script>
</body>
</html>
I have a Laravel app that uses a tiny bit of Vue code in the blade templates. There's a problem navigating from view to view, almost every time there's a brief delay before the CSS is loaded where the raw text of the page shows without any formatting. It shows for about 1/2 a second and then the CSS kicks in and it looks correct. I can't find any reason for this, I tried changing the mix('css/app.css') etc so that it's not having to reload every time, but I can't figure out how to fix it.
I'm not sure if Vue is somehow delaying the css from loading? Any ideas what it could be? I'll paste the top section of the blade template below. I just upgraded to Laravel 8 but the same was happening with Laravel 7.
Thanks for your help!
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="title" content="Pono Admin">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Admin</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/admin.css') }}" rel="stylesheet">
#hasSection('style')
#yield('style')
#endif
<!-- Scripts -->
#hasSection('script')
#yield('script')
#else
<script>
var vmMixinsAdmin = '';
</script>
#endif
<script src="{{ mix('/js/app.js') }}" defer></script>
<script>
var vmMixinsApp = '';
let vroundedBtn = false;
let vunreadNotificationCount = {{ auth()->user()->unreadNotifications()->count() }};
</script>
</head>
<body>
<div id="vm">
<main id="app-main" class="container-fluid px-0">
etc
Someone had something similar and decided to show an overlay on foreground and hide it after the page has loaded. I'm not sure that it's the best solution but it could help:
Force browsers to load CSS before showing the page
I used these vue js files to build my form in Larval.
When I call these files in Larval I get a blank page.
The structure of my files is as follows:
And the contents of app.js file is as follow:
import Vue from "vue"
import App from "./components/App.vue"
import store from "./components/store"
import VeeValidate from "vee-validate"
Vue.use(VeeValidate);
import "./components/directives"
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount("#app");
Of course, I get the below warning when I run nmp run watch's command.
WARNING in ./resources/js/app.js 5:8-19 "export 'default' (imported as
'VeeValidate') was not found in 'vee-validate' # multi
./resources/js/app.js ./resources/sass/app.scss
My question is: How to import external vue js files to laravel project?
First thing you need to include app.js to your blade file like this
<script src="{{asset('js/app.js')}}"></script>
after that if you want to use vue js components in you blade app you need to define them in your app.js like this:
Vue.component('home', require('path to your component').default);
and in your blade under div #idd add your tag <home></home>
use src="{{ mix('js/app.js') }}"
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}" />
<title>VueJS CRUD Operations in Laravel</title>
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>
Iḿ trying to run vue+laravel project without php artisan serve but when I acces localhost/project/public I see a blank page with this content only:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Roboto:100,300,400,500,700,900"><link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css">
</head>
<body></body>
Despite this, when I acces localhost/project/public/any I see my default not found vue page so when I click go home button I can access my entire project without problems. Anyone can help to redirect properly to / route when going to localhost/project/public.
Note: It works fine with php artisan serve and I'm trying this because I want to run my project in a ec2 instance but facing same probleme even with a virtual host to redirect to /project/public from .htacces
It's not a .htacces problem I can do the redirections as I want but when redirected to /public my vue file it's not being loaded, this is my app.js:
import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css'
import Vuetify from 'vuetify'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import App from './App.vue';
import store from './store';
import router from './router';
Vue.use(Vuetify)
require('./bootstrap');
const opts = {}
import ApiService from './api/api.service';
ApiService.init();
window.Vue = require('vue');
const app = new Vue({
router,
store,
vuetify: new Vuetify(opts),
components: { App },
render: h => h(App)
}).$mount('#app');
this is my welcom.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Administrador') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<index></index>
</div>
</body>
</html>
If you're not running php artisan serve what are you running? Laravel requires the server to be running PHP in order to serve the welcome.blade.php file.