Closed aislandener closed 1 year ago
Can you share where is located your lang folder? and your app.js
file?
Thanks.
yes, resource folder:
resources
├── images
│ └── logo.webp
├── js
│ ├── Components
│ │ ├── ApplicationLogo.vue
│ │ ├── Button.vue
│ │ ├── Checkbox.vue
│ │ ├── Dropdown.vue
│ │ ├── DropdownLink.vue
│ │ ├── Input.vue
│ │ ├── InputError.vue
│ │ ├── Label.vue
│ │ ├── NavLink.vue
│ │ ├── ResponsiveNavLink.vue
│ │ └── ValidationErrors.vue
│ ├── Layouts
│ │ ├── Authenticated.vue
│ │ └── Guest.vue
│ ├── Pages
│ │ ├── Auth
│ │ │ ├── ConfirmPassword.vue
│ │ │ ├── ForgotPassword.vue
│ │ │ ├── Login.vue
│ │ │ ├── Register.vue
│ │ │ ├── ResetPassword.vue
│ │ │ └── VerifyEmail.vue
│ │ ├── Dashboard.vue
│ │ └── Welcome.vue
│ ├── app.js
│ └── bootstrap.js
├── lang
│ ├── en
│ │ ├── auth.php
│ │ ├── pagination.php
│ │ ├── passwords.php
│ │ └── validation.php
│ ├── pt-BR
│ │ ├── auth.php
│ │ ├── pagination.php
│ │ ├── passwords.php
│ │ └── validation.php
│ └── pt-BR.json
├── sass
│ └── app.scss
└── views
├── app.blade.php
├── vendor
│ └── l5-swagger
│ └── index.blade.php
└── welcome.blade.php
public folder:
public
├── css
│ └── app.css
├── favicon.ico
├── images
│ └── logo.webp
├── index.php
├── js
│ ├── app.js
│ ├── app.js.LICENSE.txt
│ └── resources_lang_pt-BR_json.js
├── mix-manifest.json
└── robots.txt
resources/js/app.js
require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import { i18nVue } from 'laravel-vue-i18n'
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin).use(i18nVue, {
resolve: (lang) => import(`../lang/${lang}.json`)
})
.mixin({ methods: { route } })
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| 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.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [ tailwindcss('./tailwind.config.js') ],
})
.alias({
'@': 'resources/js',
});
if (mix.inProduction()) {
mix.version();
}
Thanks, any errors on the console?
yes, only
project path: expected http://localhost/my-project/js/resource_lang_pt-BR_json.js
Got it, is possible for you to create a public repo and send it here, for me to check if I can figure that out?
Thanks.
Of course,
Laravel v8.83.27 (PHP v7.3.33)
.env.example
to .env
/path/to/my-project/public
to /path/to/apache/my-project
Eg:. ln -s /home/$USER/my-project/public /var/www/html/my-project
Thanks, will keep you posted.
So it looks like its an Webpack thing when using the lazy imports.
You will need to add this on your webpack.mix.js
.
mix.webpackConfig({
output: {
publicPath: '/laravel-vue-i18n-issue-app/',
},
});
More info here: https://webpack.js.org/guides/public-path/
Cheers
Thanks, It worked out,
thank you very much for the time spent.
I think it would be interesting to put in the project documentation
I'm having a problem that I can't use the translations inside a directory.
If the project is running as root, it's working fine, but if it's running inside a directory, like dev.app/my-project, I can't get the translation itself.