Установка клиентской части

После того, как Вы настроили серверную структуру, Вам необходимо настроить клиентскую структуру. В настоящее время Inertia поддерживает React, Vue и Svelte.

Установка зависимостей

Установите клиентские адаптеры Inertia с помощью NPM или Yarn.

npm install @inertiajs/inertia @inertiajs/inertia-vue3
yarn add @inertiajs/inertia @inertiajs/inertia-vue3

Инициализация приложения

Затем обновите свой основной файл JavaScript, чтобы загрузить приложение Inertia. Все, что мы здесь делаем, это инициализируем клиентскую структуру с помощью базового компонента страницы Inertia.

import { createApp, h } from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue3'

const el = document.getElementById('app')

createApp({
  render: () => h(App, {
    initialPage: JSON.parse(el.dataset.page),
    resolveComponent: name => require(`./Pages/${name}`).default,
  })
}).use(plugin).mount(el)

resolveComponent - это обратный вызов, который сообщает Inertia, как загрузить компонент страницы. Он получает имя страницы (строку) и должен возвращать экземпляр компонента страницы.

Индикатор выполнения

Поскольку запросы инерции выполняются через XHR, индикатор загрузки браузера по умолчанию при переходе с одной страницы на другую отсутствует. Чтобы решить эту проблему, Inertia предоставляет необязательную библиотеку progress, которая показывает полосу загрузки всякий раз, когда Вы совершаете посещение Inertia.

Чтобы использовать его, начните с его установки:

npm install @inertiajs/progress
yarn add @inertiajs/progress

После установки инициализируйте его в своем приложении.

import { InertiaProgress } from '@inertiajs/progress'

InertiaProgress.init()

Он также предоставляет ряд опций настройки, о которых вы можете узнать больше на странице индикаторы выполнения.

Разделение кода

Чтобы использовать разделение кода с помощью Inertia, Вам необходимо включить динамический импорт. Для этого Вам понадобится плагин Babel. Сначала установите плагин:

npm install @babel/plugin-syntax-dynamic-import

Затем создайте в своем проекте файл .babelrc со следующим:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

Если Вы используете Laravel Mix v4, плагин динамического импорта Babel уже настроен. Однако существует известная проблема с Laravel Mix v4 при использовании динамического импорта, когда Вы не можете использовать стили в файлах Vue из-за Webpack ограничение. В качестве обходного пути Вам нужно полностью отказаться от Mix или перейти на Laravel Mix v6.

Наконец, обновите обратный вызов resolveComponent в инициализации вашего приложения, чтобы использовать import вместо require.

resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),

Подумайте об использовании очистки кеша, чтобы заставить браузеры загружать последнюю версию Ваших ресурсов. Для этого добавьте в конфигурацию Вашего веб-пакета следующее:

output: {
  chunkFilename: 'js/[name].js?id=[chunkhash]',
}

На этой странице