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'