Home > database >  Why I can not reference app layout file adding inertiajs to my project?
Why I can not reference app layout file adding inertiajs to my project?

Time:12-22

In Laravel 8 app where adminarea is implemented with jquery/bootstrap I need to make frontend with inertiajs/vuejs3. So I installed inertiajs with vuejs3 and I added frontend template resources/views/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">

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

    <!-- Styles -->
    <link rel="stylesheet" href="/css/frontend.css">
    <link rel="stylesheet" href="/css/main.css">


    <!-- Scripts -->
    @routes

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script src="/js/frontend_app.js" defer></script>
</head>
<body >
@inertia

</body>
</html>

In resources/js/frontend_app.js :

require('./bootstrap');

import { InertiaProgress } from '@inertiajs/progress';


import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel 0987';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: name => require(`./Pages/${name}`),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .component('inertia-link', Link)

            .mount(el)
    },
})

InertiaProgress.init({ color: '#4B5563' });

But I have a problem that I can not reference app layout file resources/js/Layouts/AppLayout.vue, which has content :

<template>
    <div >
        <nav >
            resources/js/Layouts/AppLayout.vue
        </nav>

        <div >
            <!-- Page Sidebar -->

            <!-- Page Content -->
            <main >
                <slot></slot>
            </main>
        </div>

    </div>
</template>


<script>
export default {
    components: {
    },

    data() {
        return {
        }
    },

    mounted() {
    },

    methods: {
        logout() {
            this.$inertia.post(route('logout'));
        },
    }
}
</script>

But trying to use it in resources/js/Pages/api/home/index.vue :

<template>
    <app-layout title="Profile">
        <template #header>
            <h2 >
                Profile
            </h2>
        </template>
    </app-layout>
</template>

<script>
import AppLayout from '@/Layouts/AppLayout.vue'


export default {
    components: {
        AppLayout,
    }
}
</script>

I got error in browser's console :

ERROR in ./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js) 3:0-48
Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/photographers/li/resources/js/Pages/api/home'

It seems to me that I have valid path... Did I miss something in inertiajs setip?

In composer.json :

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.3|^8.0",
        "fideloper/proxy": "^4.2",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.4.5",
        "jenssegers/date": "^4.0",
        "laravel/fortify": "^1.8",
        "laravel/framework": "^8.0",
        "laravel/telescope": "^4.6",
        "laravel/tinker": "^2.0",
        "mews/purifier": "^3.3",
        "proengsoft/laravel-jsvalidation": "^4.5.1",
        "spatie/laravel-medialibrary": "^9.9",
        "spatie/laravel-permission": "^5.4",
        "tightenco/ziggy": "^1.4",
        "laravel/jetstream": "^2.4",
        "wboyz/laravel-enum": "^0.2.1"
    },
    "require-dev": {
        "facade/ignition": "^2.3.6",
        "fakerphp/faker": "^1.9.1",
        "mockery/mockery": "^1.3.1",
        "nunomaduro/collision": "^5.0",
        "phpunit/phpunit": "^9.3"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "autoload": {
        "files": [
            "app/Library/helper.php"
        ],
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "minimum-stability": "dev",
    "prefer-stable": true,
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    }
}

package.json :

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21.4",
        "browser-sync": "^2.27.5",
        "browser-sync-webpack-plugin": "^2.3.0",
        "cross-env": "^7.0.3",
        "laravel-mix": "^6.0.31",
        "lodash": "^4.17.19",
        "postcss": "^8.3.6",
        "resolve-url-loader": "^4.0.0",
        "sass": "^1.40.1",
        "sass-loader": "^12.1.0",
        "vue": "^3.0.5",
        "vue-loader": "^16.8.3",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "@inertiajs/inertia": "^0.10.1",
        "@inertiajs/inertia-vue3": "^0.5.2",
        "@inertiajs/progress": "^0.2.6",
        "@popperjs/core": "^2.10.1",
        "bootstrap": "^5.1.1",
        "moment": "^2.29.1",
        "simplebar": "^5.3.5"
    }
}

MODIFIED 1: Reading this https://github.com/tighten/ziggy docs and comparing with one of my prior application which was created with --jet option and inertiajs selected I added several lines into top of webpack.mix.js :

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | 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.
 |
 */

const path = require('path')

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
        },
    },
});


mix
    /* CSS */
    .sass('resources/sass/main.scss', 'public/css/oneui.css')
    .sass('resources/sass/frontend.scss', 'public/css/frontend.css')
    .sass('resources/sass/oneui/themes/amethyst.scss', 'public/css/themes/')
    .sass('resources/sass/oneui/themes/city.scss', 'public/css/themes/')
    .sass('resources/sass/oneui/themes/flat.scss', 'public/css/themes/')
    .sass('resources/sass/oneui/themes/modern.scss', 'public/css/themes/')
    .sass('resources/sass/oneui/themes/smooth.scss', 'public/css/themes/')

    /* JS */
    .js('resources/js/app.js', 'public/js/laravel.app.js')
    .js('resources/js/oneui/app.js', 'public/js/oneui.app.js')

    .js('resources/js/frontend_app.js', 'public/js').vue()

    /* Page JS */
    .js('resources/js/pages/tables_datatables.js', 'public/js/pages/tables_datatables.js')

    /* Tools */
    // .browserSync('localhost:8000')
    // .disableNotifications()

    /* Options */
    .options({
        processCssUrls: false
    });


mix.copy(
    "vendor/proengsoft/laravel-jsvalidation/resources/views",
    "resources/views/vendor/jsvalidation"
).copy(
    "vendor/proengsoft/laravel-jsvalidation/public",
    "public/vendor/jsvalidation"
);

But it did not help and I still the same error :

ERROR in ./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/api/home/index.vue?vue&type=script&lang=js) 3:0-48
Module not found: Error: Can't resolve '@/Layouts/AppLayout.vue' in '/mnt/_work_sdb8/wwwroot/lar/photographers/li/resources/js/Pages/api/home'

And I think I still have valid path :

<script>
import AppLayout from '@/Layouts/AppLayout.vue'
export default {
    components: {
        AppLayout,
    }
}

Thanks!

CodePudding user response:

You need to add alias to your layouts folder:

mix.webpackConfig({
    resolve: {
        alias: {
            ziggy: path.resolve('vendor/tightenco/ziggy/dist'),
            '@Layouts': path.resolve(__dirname, 'path/to/layouts')
        },
    },
});

And use them as:

import AppLayout from '@Layouts/AppLayout'
  • Related