So in standard blade templates, you can translate any text by encapsulating them
{{__("Hello")}}
and it will translate to the applicable locale.
You can also do this in any included Javascript in the file...
#section('footer-scripts')
#parent
<script type="text/javascript">
swal.fire({
"title": "{{__('Alert')}}",
"text": "{{__('The application has been successfully submitted!')}}",
"type": "success",
"confirmButtonClass": "btn btn-secondary"
});
<script>
But what if you have a global js file thats included via webpack, call it custom.js and within it, it too has wording that needs to be translated?
const {mix} = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.copy('node_modules/tinymce/skins', 'public/js/skins');
mix.styles([
'node_modules/apexcharts/dist/apexcharts.css', //ApexCharts
'resources/assets/plugins/global/plugins.bundle.css',
'resources/assets/plugins/global/fonts/line-awesome/css/line-awesome.css',
'resources/assets/plugins/custom/datatables/datatables.bundle.css',
'resources/assets/css/pages/wizard/wizard-1.css',
'resources/assets/css/style.bundle.css',
'resources/assets/css/skins/header/base/light.css',
'resources/assets/css/skins/header/menu/light.css',
'resources/assets/css/skins/brand/dark.css',
'resources/assets/css/skins/aside/dark.css',
'resources/custom.css'
], 'public/css/libs.css');
mix.scripts([
//Global - All Pages
'resources/assets/plugins/global/plugins.bundle.js',
'resources/assets/js/scripts.bundle.js',
// Page Vendors
'resources/assets/plugins/custom/datatables/datatables.bundle.js',
'resources/assets/plugins/custom/datatables/plugin-intl.js',
'resources/assets/plugins/custom/datatables/accent-neutralise.js', // DataTables Accent neutralise
// Custom Vendors
'node_modules/apexcharts/dist/apexcharts.min.js', //ApexCharts
'node_modules/jspdf/dist/jspdf.debug.js',
'node_modules/html2canvas/dist/html2canvas.js',
// Custom
'resources/custom.js'
], 'public/js/libs.js');
Related
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I'm trying to build a PWA with offline support using Laravel and Vue.js. I'm using the laravel-mix-workbox plugin to setup my service worker, but I'm having a massive amount of trouble trying to accomplish what should be a simple task. I have some static assets (images, XML files etc.) that are served out of my application, and I can't get workbox to add them to the precached file list.
I have tried moving the assets to /resources/img and adding a call to copyDirectory to try to get them included, also, I have tried the webpack-copy-plugin, but only the compiled assets are included(js, css, fonts etc). Here is my webpack.mix.js file:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
require('laravel-mix-workbox');
const CopyPlugin = require('copy-webpack-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version()
// mp035 add inject manifest plugin to inject workbox manifest into the service worker.
.injectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
});
Does anyone know how I can include all files in my /resources/img (or /public/img) in the precached files list?
Ok, so it looks like this is an issue with laravel-mix-workbox. Removing it and using the generic workbox webpack plugin solves the problem. For anyone finding this, here is the updated webpack.mix.js:
const mix = require('laravel-mix');
//mp035 add workbox plugin and copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
//mp035 fix issue with laravel-mix outputting bad urls in precache manifest for app.js (//js/app.js) and app.css
// and copy assets into place (so they are in the build tree)
mix.webpackConfig({
output: {
publicPath: ''
},
plugins: [
new CopyPlugin([
{ from: 'resources/img/*', to: 'public/img', flatten:true },
{ from: 'resources/root/*', to: 'public', flatten:true },
]),
new InjectManifest({
swSrc: './resources/pwa/service-worker.js',
maximumFileSizeToCacheInBytes: 20000000, // ******************************DEBUG ONLY!!!
}),
],
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps().version();
All in all, using workbox with laravel-mix has been an extremely painful process with all of the 'minor' tweaks that laravel-mix does breaking the workbox plugin. I'd recommend sticking to plain webpack if possible.
Am building a web application with Vue and Laravel.
Am utilizing code splitting and versioning with Laravel mix and Webpack under the hood.
However, whenever i make changes to my code, run npm run production and upload on the live server, on frequent occations i receive TypeError: "e[r] is undefined"
I have to manually clear browser cache before the page loads correctly.
I already have versioning enabled and thus cache busting should be automated.
Below is my webpack.mix.js file
const mix = require('laravel-mix');
const webpack = require('webpack');
mix.webpackConfig({
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
})
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [new CompressionPlugin()],
optimization: {
minimize: true,
namedModules: true,
namedChunks: true,
removeAvailableModules: true,
flagIncludedChunks: true,
occurrenceOrder: false,
usedExports: true,
concatenateModules: true,
sideEffects: false, // <----- in prod defaults to true if left blank
}
};
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/main/main.js', 'public/v1.4.0/js')
.sass('resources/sass/app.scss', 'public/css')
.extract(['vue'])
.version();
I had a similar problem and I found a solution that wasn't quite good but it worked: set in webpack config options optimization.concatenateModules and optimization.minimize to false.
After a lot of hustle,
my best approach was to control cache from the server software itself.
Ex: you can prevent JS and CSS caching from nginx / apache/http configurations
I'm trying to use Bootstrap-material-design https://github.com/FezVrasta/bootstrap-material-design on the Laravelhttp://laravel-boilerplate.com-boilerplate
Bootstrap-material-design has a npm install, but according to Bootstrap-material-design it's "just" a matter of adding the necessary links to your element for fonts and stylsheets, but Laravel can't find. I've tried this moving manually the .css and .js files:
<link rel="stylesheet" type="text/css" href="{{ URL::asset('css/bootstrap-material-design.css') }}">
In publicfolder I have /css and /js but I always get a 404 error.
Laravel-boilerplate use this config for webpack-mix.js:
const { mix } = require('laravel-mix');
const WebpackRTLPlugin = require('webpack-rtl-plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend.css')
.sass('resources/assets/sass/backend/app.scss', 'public/css/backend.css')
.js([
'resources/assets/js/frontend/app.js',
'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
'resources/assets/js/plugins.js'
], 'public/js/frontend.js')
.js([
'resources/assets/js/backend/app.js',
'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
'resources/assets/js/plugins.js'
], 'public/js/backend.js')
.webpackConfig({
plugins: [
new WebpackRTLPlugin('/css/[name].rtl.css')
]
});
I have installed https://github.com/puikinsh/gentelella on my application, is there a way to link the assets to laravel elixir?
here is my template directory
Root
|-app/
|-node_module/
| |-gentelella/ # -> this is my template
|-gulpfile.js
|-public/
// other laravel folders to follow.
Inside ./gulpfile.js
var elixir = require('laravel-elixir');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function(mix) {
mix.sass('app.scss');
});
Try this:
elixir(function(mix) {
mix.sass('app.scss');
mix.styles([
'node_modules/path/to/gentelella/css.css'
], 'public/css/app.css', './');
mix.version('public/css/app.css');
});