Как вставить код из"Inertia" в свой проект "Laravel", в файл "app.js"?

от
prokoding.ru > Laravel > Как вставить код из"Inertia" в свой проект "Laravel", в файл "app.js"?

Для вставки кода из "Inertia" в свой проект на "Laravel" в файл "app.js" следуйте следующим шагам:

1. Установите "Inertia" в свой проект. Для этого можно использовать Composer, запустив следующую команду в корневой папке проекта:

composer require inertiajs/inertia-laravel

2. Затем установите "Inertia" на стороне фронтенда, используя NPM:

npm install @inertiajs/inertia

3. Добавьте InertiaServiceProvider в раздел providers файла config/app.php:

'providers' => [
    // ...
    InertiaServiceProvider::class,
],

4. Затем зарегистрируйте маршрут inertia в файле routes/web.php:

use IlluminateSupportFacadesRoute;
use InertiaInertia;

Route::inertia('/app', 'App');

5. Создайте новый файл blade шаблона в папке resources/views, например app.blade.php. В этом шаблоне вы будете монтировать ваше приложение "Inertia".

6. Вставьте следующий код в ваш файл app.js, для определения точки монтирования и указания базового URL:

import { App, plugin } from '@inertiajs/inertia-vue';
import Vue from 'vue';

Vue.use(plugin);

const app = document.getElementById('app');

new Vue({
  render: (h) =>
    h(App, {
      props: {
        initialPage: JSON.parse(app.dataset.page),
        resolveComponent: (name) =>
          import(`./Pages/${name}`).then((module) => module.default),
      },
    }),
}).$mount(app);

7. Теперь, вставьте следующий код в ваш файл шаблона app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <!-- ... -->
    </head>
    <body>
        <div id="app" data-page="{{ json_encode($page) }}"></div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

8. Теперь вы можете создать компоненты "Inertia" в папке resources/js/Pages, которые будут отображать контент страниц. За обновление содержимого страниц и взаимодействие с бэкендом будет отвечать "Inertia".

Теперь ваш проект Laravel должен быть настроен для использования "Inertia"! Вы можете создавать новые страницы, компоненты и взаимодействовать с бэкендом, используя стандартные методы "Laravel". Не забудьте скомпилировать свои фронтенд ресурсы с помощью команды npm run dev или аналогичной перед тем, как проверять изменения в браузере.