Menu
I'm trying to use inertia in my laravel app. My app doesn't need jetstream so I won't be using that. So I went to inertia's site https://inertiajs.com/ to install it, but I'm not sure if I'm doing it correctly.
The error I get on my page is
View [app] not found.
This is what I have in my ProductController
public function index()
{
return Inertia::render('components/products/Index');
}
This is my Index.vue
<template>
<div>
<h1>Welcome</h1>
<p>Hello, welcome to your first Inertia app!</p>
</div>
</template>
<script>
export default {
components: {
},
props: {
},
}
</script>
and in my app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Admin</title>
<link rel="stylesheet" href="/vendor/adminlte/plugins/fontawesome-free/css/all.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown"><span>{{ Auth::user()->name }}</span></a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<li class="user-header bg-primary h-auto">
<p class="mt-0"><span>{{ Auth::user()->name }}</span><small><span>{{ Auth::user()->title }}</span></small></p>
</li>
<li class="user-footer">
<a class="btn btn-default btn-flat float-right btn-block" href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<i class="fa fa-fw fa-power-off"></i> Log Out
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.navbar -->
<aside class="main-sidebar elevation-4">
<a href="{{ route('home') }}" class="brand-link">
<img src="/img/default-brand.png" class="brand-image img-circle elevation-3"
style="opacity: .8">
</a>
</aside>
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">@yield('title')</h1>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container-fluid">
@inertia
</div>
</div>
</div>
</div>
<script src="/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ mix('js/app.js') }}"></script>
</body>
</html>
I'm not sure if I'm missing anything else.
838
Inertia is a small library that allows you to render single-file Vue components from your Laravel backend by providing the name of the component and the data that should be hydrated into that component's "props".
Livewire is focused on Laravel developers, so they could stay back-end only and not deal with JavaScript at all. Inertia is for Vue or React developers who want to simplify their workflow: not create a separate API, not deal with routing, state management, and other challenges.
Inertia allows you to set your application root view from the HandleInertiaRequests middleware
protected $rootView = 'layout/app';
make sure it corresponds with your folder arrangement under views/
in this case it should be views/layout/app.blade.php
200
you can also change the app.blade.php directory if you want by going to inertia middleware file located in: app\Http\Middleware\HandleInertiaRequests.php and changing the app file directory to wherever you want:
protected $rootView = '/layouts/app';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
