search

Home  >  Article  >  Web Front-end  >  How to install inertia vue3 version in laravel

How to install inertia vue3 version in laravel

WBOY
WBOYforward
2023-05-15 10:31:051071browse

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

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>

2.3 Step 3: Execute the artisan command and add middleware

$ php artisan inertia:middleware

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,],

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

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)
  },})

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

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()

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;,
    }});

4. Install VUE

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

$ npm install vue@next

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;,
    }});

Step 3Run through npm command

$ npm run watch

If an error is reported

laravel怎么安装inertia vue3的版本

Solution: upgrade vue-loader, execute 

$ npm i vue-loader

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!

Statement：
This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete
Previous article：Methods for communication between Vue3 parent and child components and two-way binding between componentsNext article：Methods for communication between Vue3 parent and child components and two-way binding between components

Related articles

See more