vue.js アーカイブ - inokawablog

【サンプル付】Vue.jsでComponentを作成する！ 正しくpropsを使おう！

公開日:2020/03/14 最終更新日:2020/03/15

vue.jsは自由度が高いので、型などを意識せずともそれなりのものを作ることができます。しかし、エラーや保守性を考えた場合、型定義や必須項目の設定をしておかないと後々面倒になるのでしっかりと理解しておきましょう！ vue.jsでコンポーネントを作成する時に注意するポイントがあります。 型の安全性 必須項目の設定 デフォルトの設定 それぞれを見ていきます。 型の安全性 変数名によっては解釈の余地があ […]

【随時更新】vue.jsでよく使うフィルター

公開日:2019/12/30

vue.jsには便利なフィルターという機能がある。   以下のような形で書かれ、“パイプ(‘|’)” 記号を使用する <!– mustaches –> {{ message | capitalize }} <!– v-bind –> <div v-bind:id=”rawId | formatId”></div>   コン […]

【Service Worker】Laravel + vue のSPAサイトをPWA化させてWebPushまで実装

公開日:2019/12/25

  簡単なサンプルと、NativeとPWAでできることの説明などはこちらが綺麗にまとまっています。 Androidは大抵の機能が使えるのですが、iOS は全然ダメです。肝心のWebPushが使えないです。 アイコンのバッジとWebPushがiOSで対応したら一気に広まるとは思うのですが、今の所は機能面ではNativeに軍配が上がります。   PWA化させるだけなら Localh […]

Vuetifyでのバリデーションまとめ

公開日:2019/11/10 最終更新日:2020/03/10

Vuefityでのバリデーションをまとめる。 最初にバリデーションの一連の流れを紹介し、その後それぞれのフィールドのバリデーションを確認する。 バリデーションの流れ vuetify rulesメールアドレスのフィールドを例にする template <v-form ref="form" v-model="valid" lazy-validation&gt […]

laravel + vueで多言語サイトを作ったときのポイントをまとめておく

公開日:2019/11/09

多言語対応サイトをlaravelとvueで作ったのでその時のポイントをまとめておく。 対応言語を一つ増やすと1.2倍くらい労力がかかるイメージだった   言語は絞った方がいい treeで紹介されている通り、世界中では現在7,099の言語が話されています。もちろんそんなにカバーするのは不可能だし、facebookですら現在48言語です。基本的には英語と日本語の２つで大丈夫だと思いますが、世 […]

Vuetifyでレスポンシブのテーブルを作る

公開日:2019/09/12 最終更新日:2020/03/02

Vuetifyを使ってデータを表示するレスポンシブのテーブルを作成します。 vuetifyを使えば、簡単にすばやくサイトを作成できます。最近はテーマなども充実してきて、特に凝ったデザインでない限りはvuetifyを使った方がいいという感じです。 最近だとVuetifyのストアでグッズとかも結構出てるんですけど、あんまりおしゃれなものがないのでもう少ししっかり作ってくれたらなって感じはします（笑）。 […]