Open27

nativephp

mbsmbs
$ composer create-project laravel/laravel test-nativephp
$ composer require nativephp/electron

$ php artisan native:serve

mbsmbs

window定義は
app\Providers\NativeAppServiceProvider.php に書くみたい

        MenuBar::create()
            ->withContextMenu(
                Menu::new()
                    ->label('My Application')
                    ->separator()
                    ->link('https://nativephp.com', 'Learn more…')
                    ->separator()
                    ->quit()
            );

ほう

mbsmbs

inertia入れるのがいいのかな？
livewireがいい？

inertia入れる！vue入れる！
react?知らない子ですね...

mbsmbs

https://inertiajs.com/

汚染されるので手動で入れるよ

$ composer require inertiajs/inertia-laravel
$ php artisan inertia:middleware
resources/views/app.blade.php
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js')
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\HandleInertiaRequests::class, // add
        ],
    ];
mbsmbs

https://github.com/laravel/jetstream/tree/3.x/stubs/inertia

$ npm install @inertiajs/vue3
resources\js\app.js
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

これで同ディレクトリの Pages を見てくれる

mbsmbs

つなぐ

resources\js\Pages\index.vue
<template>
  <h1>Hello!</h1>
</template>
routes\web.php
<?php

use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('index');
});
mbsmbs

あれ

あ、 $ npm run dev してないとだめだわ

$  npm install -D @vitejs/plugin-vue
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue(),
    laravel({
      input: ['resources/css/app.css', 'resources/js/app.js'],
      refresh: true,
    }),
  ],
});

できた

mbsmbs

ts にする

https://advanced-inertia.com/blog/typescript

$ npm install -D typescript @vue/tsconfig
tsconfig.json
{
    "extends": "@vue/tsconfig/tsconfig.dom.json",
    "include": [
        "resources/**/*.ts",
        "resources/**/*.d.ts",
        "resources/**/*.vue"
    ],
    "compilerOptions": {
        "baseUrl": ".",
        "types": ["vite/client"],
        "paths": {
            "@/*": ["resources/js/*"]
        }
    }
}
resources\js\app.ts
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import type { DefineComponent } from "vue";

createInertiaApp({
  resolve: (name) => resolvePageComponent(
    `./Pages/${name}.vue`,
    import.meta.glob<DefineComponent>("./Pages/**/*.vue")
  ),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

と、app.blade.php vite.config.ts の js を ts にする

mbsmbs

コンポーネント自動読み込み

https://reffect.co.jp/vue/unplugin-import/

$ npm install -D unplugin-vue-components unplugin-auto-import

    "include": [
        "*.d.ts"
    ],
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from "@vitejs/plugin-vue";
import Components from 'unplugin-vue-components/vite';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dirs: ['resources/js/components'],

    }),
    AutoImport({
      imports: ['vue'],
    }),
    laravel({
      input: ['resources/js/app.ts'],
      refresh: true,
    }),
  ],
});

ignore追加しとく

/auto-imports.d.ts
/components.d.ts
mbsmbs
.eslintrc.json
{
    "env": {
        "node": true,
        "commonjs": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-recommended",
        "./.eslintrc-auto-import.json",
        "standard"
    ],
    "parserOptions": {
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "rules": {
        "comma-dangle": ["warn", "only-multiline"],

        "no-unused-vars": "warn",
        "@typescript-eslint/no-unused-vars": "off",
        "vue/no-unused-vars": "off",
        "require-await": "warn",
        "no-unreachable": "warn",

        "vue/multi-word-component-names": "off",
        "vue/no-v-model-argument": "off"
    }
}
vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
import eslint from 'vite-plugin-eslint'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'

const isProd = process.env.NODE_ENV = 'production'
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    Components({
      dirs: ['resources/js/components'],
    }),
    AutoImport({
      imports: ['vue'],
      eslintrc: {
        enabled: true,
      },
    }),
    !isProd && eslint({
      lintOnStart: true,
      include: 'resources/js/**/*.{js,ts,vue}',
      fix: true,
    }),
    laravel({
      input: ['resources/js/app.ts'],
      refresh: true,
    }),
  ],
})
mbsmbs

ziggy は ziggy-js 経由で入れた

auto import にかます

mbsmbs

postcss は cjs じゃなきゃだめ

mbsmbs

全ファイルにアクセスするとき

        'local' => [
            'driver' => 'local',
            'root' => "/", //storage_path('app'),
            'throw' => false,
        ],
mbsmbs

sass

npm install -D sass

あと .css を .scss に置き換える