Problems with projects inside directories

[aislandener]

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.

[xiCO2k]

Can you share where is located your lang folder? and your app.js file?

Thanks.

[aislandener]

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();
}

[xiCO2k]

Thanks, any errors on the console?

[aislandener]

yes, only

project path: expected http://localhost/my-project/js/resource_lang_pt-BR_json.js

problem: http://localhost/js/resource_lang_pt-BR_json.js

[xiCO2k]

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.

[aislandener]

Of course,

my-project

Laravel v8.83.27 (PHP v7.3.33)

• Clone the git in any directory
• Copy .env.example to .env
• Create link in directory /path/to/my-project/public to /path/to/apache/my-project Eg:. ln -s /home/$USER/my-project/public /var/www/html/my-project

[xiCO2k]

Thanks, will keep you posted.

[xiCO2k]

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

[aislandener]

Thanks, It worked out,

thank you very much for the time spent.

I think it would be interesting to put in the project documentation