How to install inertia vue3 version in laravel-Vue.js-php.cn

How to install inertia vue3 version in laravel

WBOY

Release： 2023-05-15 10:31:05

forward

1145 people have browsed it

1. Pre-installation requirements

1.1 Laravel framework has been installed
1.2 Node JS has been installed
1.3 Npm package management tool has been installed

2. Server configuration

2.1 The first step: composer installs inertia-laravel

$ composer require inertiajs/inertia-laravel

Copy after login

2.2 The second step: laravel directory resouces/views/add app.blade. php file, add the following code

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
        <link href="{{ mix(&#39;/css/app.css&#39;) }}" rel="stylesheet"/>
        <script src="{{ mix(&#39;/js/app.js&#39;) }}" defer></script>
    </head>
    <body>
        @inertia    </body></html>

Copy after login

2.3 Step 3: Execute the artisan command and add middleware

$ php artisan inertia:middleware

Copy after login

After the file is generated, manually add it to the web in the Kernel file The last line of the middleware group

&#39;web&#39; => [
    // ...
    \App\Http\Middleware\HandleInertiaRequests::class,],

Copy after login

3. Client configuration

3.1 Step 1 : Use the npm command to install the front-end framework dependencies and install the VUE3 version.

$ npm install @inertiajs/inertia @inertiajs/inertia-vue3

Copy after login

3.2 Step 2: Initialize the application
Open /resouces/js/app.js, clear it and overwrite the following code

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },})

Copy after login

3.3 Three steps: npm install progress bar package
The browser will not refresh the page created using inertia. For user perception, a friendly prompt such as the progress bar at the top of the page is added [Thinking about it]

$ npm install @inertiajs/progress

Copy after login

After the installation is completed, introduce and initialize, open /resouces/js/app.js, clear and overwrite the following code

import { createApp, h } from &#39;vue&#39;import { createInertiaApp } from &#39;@inertiajs/inertia-vue3&#39;import { InertiaProgress } from &#39;@inertiajs/progress&#39;createInertiaApp({
    resolve: name => import(`./Pages/${name}`),
    setup({ el, app, props, plugin }) {
        createApp({ render: () => h(app, props) })
            .use(plugin)
            .mount(el)
    },})InertiaProgress.init()

Copy after login

3.4 Step 4 Use the following webpack configuration to force browsing The server loads new resources after the file is updated instead of using the cache.
Open webpack.mix.js, clear and overwrite the following code

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

Copy after login

4. Install VUE

First step Use the npm command to install the latest stable version of vue

$ npm install vue@next

Copy after login

Step 2 Add .vue() to webpack.mix.js

const mix = require(&#39;laravel-mix&#39;);mix.js(&#39;resources/js/app.js&#39;, &#39;public/js&#39;)
    .vue()
    .postCss(&#39;resources/css/app.css&#39;, &#39;public/css&#39;, [
        //
    ]);mix.webpackConfig({
    output: {
        chunkFilename: &#39;js/[name].js?id=[chunkhash]&#39;,
    }});

Copy after login

Step 3Run through npm command

$ npm run watch

Copy after login

If an error is reported

laravel怎么安装inertia vue3的版本

Solution: upgrade vue-loader, execute

$ npm i vue-loader

Copy after login

If an error is still reported

laravel怎么安装inertia vue3的版本

Solution: Add a Pages folder under the resources/js directory.

Success Status

laravel怎么安装inertia vue3的版本

The above is the detailed content of How to install inertia vue3 version in laravel. For more information, please follow other related articles on the PHP Chinese website!