[ Vue.js ] どこからでも呼び出せるモーダルの実装方法 | nitd Inc.
フロントエンドのフレームワークを新たに使い始めるとき、ちょっとつまづくのがこの「モーダルの実装」じゃないでしょうか。 特に、コンポーネントに切り出してどこからでも関数一つで呼び出せるようにするところまでやるのって、意外とサンプルもなくて手間だったりします。 それをVue.jsで実装する方法をご紹介します。 モーダルのコンテナdivを用意 <template> <div> <div class="wrap-all"> <div class="wrap-all-inner"> <div class="container-contents"> <div class="content wrap"> <router-view></router-view> </div> </div> </div> </div> <div id="modals"> <component v-for="(modal, i
![[ Vue.js ] どこからでも呼び出せるモーダルの実装方法 | nitd Inc.](https://cdn-ak-scissors.b.st-hatena.com/image/square/d353661f29562ecf69b42a0d5274b69998e4f27d/height=288;version=1;width=512/https%3A%2F%2Fnitd.co.jp%2Fwp-content%2Fuploads%2F2018%2F06%2Fnitdlogo3.png)
Vue.js で簡単なログイン画面 (トークン認証) を作ってみた - Qiita
ログインに成功すると token を取得できて 以降、認証が必要な API と通信する際は header に token をセットする、という想定です ちなみにバックエンドの API は Rails で作っています。 Rails でトークン認証 API を 15 分で実装する ディレクトリ構成 store の使い方が肝でしょうか うーん、状態管理って難しいですね src/ ├── App.vue ├── assets │ └── logo.png ├── components │ ├── error.vue │ ├── login.vue │ ├── logout.vue │ ├── menu.vue │ └── top.vue ├── lang │ ├── index.js │ └── messages.json # エラーメッセージ等、文言をここに ├─
Vue.jsでのAPIリクエストをaxios＆RepositoryFactoryパターンで実装する
公開日 2019.5.29更新日 2019.5.30カテゴリ：Vue.jsタグ：JavaScript,Factory,Vue,API,Repository,axios
Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる - Qiita
ブロック要素に内容を表示するだけの簡単なコンポーネントを作ったとします。 この要素幅や背景色を属性で指定したい場合、CSS変数を使うと以下のように実装できます。 <template> <div class="box" :style="styles"> <!-- computedなstylesプロパティをstyleにバインド--> <div class="message"> <slot></slot> </div> </div> </template> <script> export default { name: 'box', props: { color: {}, width: {} }, computed: { // バインドするスタイルを生成 styles () { return { '--color': this.color, '--width': this.width } } }
Vue CLI 3 で PWA チュートリアル（Service Workers / Add to Home Screen / Push Notifications） - Qiita
Vue CLI 3 で PWA チュートリアル（Service Workers / Add to Home Screen / Push Notifications）Vue.jsFirebasePWAFirebaseCloudMessagingvue-cli オリジナル記事 https://blog.n11sh1.com/vue-pwa-tutorial-ja/ PWAとは？ PWA（Progressive Web App） の一部に以下のような機能があります。 Service Workers Add to Home Screen Push Notifications これにより Webアプリ として開発しても Nativeアプリ 同様のUXをユーザーに提供できます。 ここらへんを Vue を使って試していきます。 Ref. Progressive Web Apps | Web | Goog
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js スタイルガイド早見表 🎄✨ - Qiita
