Laravel8でvue3を利用するスタート

https://dev.to/rjzauner/getting-started-with-laravel-8-vue-3-and-tailwind-5gm9

tailwind.config.jsは以下のようにしました。

module.exports = {
  content: [
    &quot;./index.html&quot;,
    &quot;./src/**/*.{vue,js,ts,jsx,tsx}&quot;,
  ],
  purge: [&quot;./resources/**/*.vue&quot;],
  theme: {
    extend: {},
  },
  plugins: [],
}

参考

https://github.com/tusharmangle/laravel-vue-tailwind-starter

Vueのドキュメント

https://v3.ja.vuejs.org/guide/introduction.html

Vue3について

https://v3.ja.vuejs.org/guide/migration/introduction.html

コンポーネントを読みこんで表示する

App.vueからSample.vueを読み込む例

<template>
    <div class="flex justify-center mt-24">
        <Sample />
    </div>
</template>
<script>
    import Sample from './components/Sample.vue'
    export default {
        components: {
            Sample,
        }
    }
</script>

Jetstream

参考

Socialite

https://readouble.com/laravel/8.x/ja/socialite.html

上記の例ではgithubで決め打ちしているので、以下のようにproviderを取得すると応用が利きます

$provider = $reqeust->provider;
$snsUser = Socialite::driver($provider)->user();

emailについてはAPIの状態によっては取得できない（Twitterの場合は設定が必要）それだけでなくSNS側でメールアドレスを変更した際に不具合が出るため、コントローラーではID情報を利用するのが良さそう

$user = User::where('social_id', $sns_user->getId())->first();
if ($user) {
トークンの設定
}else{
新規登録
}

emailについてはnull許容しておきます。

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name'); 
            // social_id
            $table->string('social_id');
            //$table->string('email')->unique();
            $table->string('email')->unique()->nullable();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->foreignId('current_team_id')->nullable();
            $table->string('profile_photo_path', 2048)->nullable();
            $table->timestamps();
        });
    }

ついでにsocial_idに値を入れるためUserモデルを修正する必要があります。

protected $fillable = [
        'name',
        'email',
        'social_id', //追加
        'password',
    ];

この場合は既存の認証処理をほぼSocialiteで書き換えてしまうので、別途用意したいなどの場合は別テーブルや別モデルを準備する。

CKEditor

この後で紹介するTinyMCEより直感的なので好きだが、jqueryが必要なので使う際は注意が必要です。いろいろ解説サイトがありすぎたので、一旦まとめます。

以下のコマンドを実施

webpack.mix.jsを修正

mix.js('resources/js/app.js', 'public/js')
    .copyDirectory('vendor/ckeditor/ckeditor', 'public/js/ckeditor')//追加
    .copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

以下コマンドを実施

ckeeditor-config.blade.phpを修正cdnでjqueryを読み込んでいます。必要に応じてここをローカルに取り込んだjqueryに修正できます。

<div>
    <!-- Nothing in life is to be feared, it is only to be understood. Now is the time to understand more, so that we may fear less. - Marie Curie -->
</div>

<script src="{{ asset('js/ckeditor/ckeditor.js') }}" referrerpolicy="origin"></script>
<!-- cdnを使っていますが必要に応じて変更します -->
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script src="{{ asset('js/ckeditor/adapters/jquery.js') }}" referrerpolicy="origin"></script>
<script>
    $('textarea').ckeditor();
</script>

cke-editor.blade.php

<div>
    <form method="post">
        <textarea id="mycke">スーパースター！</textarea>
    </form>
</div>

表示する。例としてwelcome画面から表示します。設定系の読み込みはbodyの閉じタグ以降に記載します。

<!-- フォームの表示 -->
<x-forms.cke-editor/>
    
</div>
    </body>
    <!-- 設定系の読み込み -->
    <x-head.ckeeditor-config/>

TinyMCE

https://www.tiny.cloud/docs/integrations/laravel/laravel-composer-install/

上記のサイトwebpack.mix.jsは以下のように私の場合では以下のようになった

mix.js('resources/js/app.js', 'public/js')
    .copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

参考サイト通り進めると以下のように表示される

解説サイトによってはjsで読み込むという手法なのだが（これも実質そうなのだが）コンポーネント化してるのでlaravelっぽい記載になる。

Laravelメモ