LaravelでReact/VueをSSRする
ReactやVueのサーバーサイドレンダリングといえばExpressなどを使ってNode.jsベースでやるのが一般的かと思います。LaravelでSSRまでカバーしようとすれば、通常は回りくどいやり方が必要になるのでハードルが上がってしまいます。 ですがこのたびlaravel-server-side-renderingを試してみたところ、とても簡単にSSRが実現できてしまいました。JavaScript処理系としてPHP拡張のV8Jsを使った場合や、Windowsでの実行も試してたので、導入の簡単な流れと、そこでわかったことをまとめてみます。 Laravelを準備 $ composer create-project --prefer-dist laravel/laravel ssr-app "5.5.*" $ cd ssr-app $ php artisan preset react //
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
Nuxt.js を GitHub Pages で使う
Nuxt.js は Vue.js の Framework で Webpack, Babel 等の設定や、ルーティング、SPA、サーバサイドレンダリングの実装をシンプルなものにしてくれます。 Nuxt.js には静的なページを生成する機能もあるので今回はこれを利用して、GitHub Pages を作成します。 `nuxt-sumple` というリポジトリ名で作成しました。 今回使用したコード、作成したページは以下になります。 https://github.com/fiahfy/nuxt-sample https://fiahfy.github.io/nuxt-sample/ ###Install requirements yarn, vue-cli を使用します。 インストールしていない場合はインストールします。 ```bash $ npm i -g yarn vue-cli ``` ###
Laravel+Vue.jsでトークン認証してデータを取得する
Posted: 2018.01.18 / Category: PHP / Tag: Laravel, Vue LaravelのAPI認証はPassportやJWTなどがありますが、ちょっとVue.jsを使いたいといったときは大げさな気がします。そこでトークン認証でVue.jsを使用してみたいと思います。 Laravel 5.4 laravelcollective 5.4 を使用します。 基本のユーザー認証機能を作成 make:authで基本となるユーザー認証関連のファイルを作成します。 $ php artisan make:auth デフォルトである、ユーザーテーブルのマイグレーションファイルにapi_tokenカラムを追記します。 database/migrations/xxxx_xx_xx_000000_create_users_table.php Schema::create('us
「JSX キモい」に反論してみる - Qiita
《2020 年 10 月 1 日追記》 この記事の内容をさらに練った上で総括したものを『りあクト！ TypeScriptで始めるつらくないReact開発 第3版【Ⅱ. React基礎編】』の「第5章 JSX で UI を表現する」に収録しています。 ほぼ 3 年越しのセルフアンサー本です。リンク先の無料サンプルで読めます。 プロローグ 本来「キモい」という主観の表明に正しいも間違っているもないので反論などは成り立たないとは思うのですが、世界での DL数では他のフロントエンドフレームワークを圧倒し、もはや jQuery さえ凌駕する React に対して、食わず嫌いの正当化のための言説に用いられている感すらあるので、一度ちゃんと論じておきたいテーマでした。 なお想定する対象読者は React を本格的に使ったことのないエンジニアですので、バリバリ React を使っている人には当たり前すぎ
Nuxt.js+Firebase HostingのサイトをPWA化してLighthouseで(ほぼ)100点満点を目指す - razokulover publog
1年くらい前に仕事でNuxt.jsをいじる機会があったんだけどそれ以来使ってなかった。 ただ、GW中にNuxt tech bookを読んだところ久々にいじりたくなってしまい。 そこでちょうどFirebase HostingとPWA化に関して調べてたとこだったので、Nuxt.jsのサイトをPWA化してFirebase Hostingで動かす手慣らしでもしておこうかと思いやってみた。 ただ、普通にやっても面白くないので一応Lighthouseのスコアを満点にすることを目指してみることにした。 コンテンツはNuxtのスターターキットの初期生成されるページ。このページを対象に行う。 以下、Firebase Hostingの設定・Nuxtのプロジェクト作成・PWA設定・Lighthouseのスコア上げの流れで説明してます。 一応ソースはこちらで。 nuxt-firebase-hosting-samp
Vue.jsの書き方実例集(随時追加)※逆引きリファレンス的な - Qiita
Vue.jsで色々書き方のルールがあるようで、備忘録として実際に使ったものをここにまとめていきます。 最初は少ないですが随時追加していく予定です。 1.propsで受け取った変数の中身を表示 {{ }}を使う <template lang="html"> <div> <p>{{ message.message }}</p> <small>{{ message.user.name }}</small> </div> </template> <script> export default { props:["message"] } </script> <template lang="html"> <div> <img v-bind:src="message.user.img_path"> <!--<img :src="message.user.img_path">--> </div> </te
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Laravel 5.5 + Vue.js 2 + JWT Auth 1.0.0-rc.1 · Issue #1355 · tymondesigns/jwt-auth
http://chibinowa.net/note/vuejs/vue-11.html