Laravelでviteのビルドに苦戦した話。

2024.02.29

Logging

おはようございます。laravel-mixからviteに変わっていたのは知っていたのですがビルドしたvue3をbladeファイルで呼び出しても動かなかった事で一日かかった馬しかです。 結論から言えば、vueを参照するじゃなくてvue/dist/vue.esm-bundler.jsで参照する。 これで@vite(‘resources/js/app.js’)呼び出せばビルドした先の参照ファイルを呼び出せる。 尚、ビルドしたファイルはパブリックディレクトリの中にあります😅。

import { createApp } from "vue";//ビルドしてもLaravel側で動かない
import { createApp } from "vue/dist/vue.esm-bundler.js";//こうするとビルドすると動く。
//ブレイド側の呼び出しは@vite('ビルドしたファイル名')
//ビルドするファイルの設定はルートディレクトリにあるvite.config.jsを変更すると良い。

知っている人に取っては簡単な話ですが、そこまでたどり着くのにかなりググりました、因みにchatGPTもGeminiもあまり良いヒントは与えてくれなかったです。

明日へ続く。

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

タグ

app.js, bladeファイル, chatGPTもGemini, createApp, dist, import, Laravel-Mix, Laravel側, quot;vue, quot;vue&quot, resources, vite, vite.config.js, vue, vue.esm-bundler.js, vue.esm-bundler.js&quot, vue3, パブリックディレクトリ, ルートディレクトリ, 馬しか,

Laravelのbladeにはloop変数が用意されている🙄 #loop

2022.12.23

Logging

おはようございます、今年もあと数日ですね_(:3」∠)_。

Laravelのbladeにはloop変数が用意されています、 ワードプレスでいう$postとは考え方が違います。$loopはbladeファイルの@foreach内だけで動作するように設計されています。なので@foreach外でしようする{{$loop}}とは別ものです。

逆に$loop変数を@foreach内で表示しようとすると$loopはオブジェクトなので表示できませんとエラーが発生して怒られます。ややこしいいっその事、使用できないようにして欲しいですよね。

ErrorException
htmlspecialchars() expects parameter 1 to be string, object given

$loop変数の他に$attributes(属性)という変数もあるそうです。使いどころがイマイチ分からないですがあります。最後に予約語の一覧を抜粋して記載ときます😄。

  • data
  • render
  • resolveView
  • shouldRender
  • view
  • withAttributes
  • withName

追伸:laravelで独自関数を使用したい場合やbladeで使用したい場合などはこの方法で定義することで使用可能となります。Qiitaのリンクを参照ください。

https://qiita.com/kuroshun960/items/13a792ceabfec454cf21

著者名  @taoka_toshiaki

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます.たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅.
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

タグ

attributes, blade, bladeファイル, data, ErrorException htmlspecialchars, foreach外, Laravel, loop, loop変数, object given, qiita, render, resolveView, shouldRender, withAttributes, withName, 変数, 追伸,