Vue.jsでFormの各要素をComponent化する際の覚え書き - Qiita
2020/04/10 追記 Vue-Composition-API版を書きました。 ↓の記事のv-bind.syncを使うほうが実用的です。 Vue.jsでForm要素のラッパーコンポーネントを作る際の2つの方法（v-bind.sync, v-model） - Qiita Vue.jsでFormの各フィールドをcomponent化する際の実装例です。 コンポーネント化することで、デザイン、バリデーションなどが全Formで共通化できます。 流行りのAtomicデザインを適応する際などに良いかと思います。 以下コードは、全てこちらのリポジトリにあります。 https://github.com/kawamataryo/Vue-atomic-form Input まず基本のinputのcomponet実装例。 フィールドの値は、@inputで変更を監視して、$emitの'input'を利用し親コン
Nuxt color-mode + tailwindcssでテーマ切り替え - Qiita
最近多くなってきたスマホやPCのダークモード対応 このQuick way to add darkmode in Nuxt.js & Tailwindcss project— Corona Virus Trackerを参考に。 まず yarn add -D @nuxtjs/color-mode tailwindcss-dark-mode します。 そして nuxt.config.js export default { ... buildModules: [ ... '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', ... ], ... purgeCSS: { whitelist: ['dark-mode', 'system', 'light-mode'], }, } Nuxt also includes purgeCSS when we install
Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにする - Qiita
Nuxt.js: コンポーネントのファイル名にsuffixを付けるだけで、コンポーネントをどこからでも呼び出せるようにするComponentNuxt よく使うコンポーネントは、いちいちimportして使うのは面倒なので、どこからでも呼び出せるようにしたい、 これまでは、pluginsディレクトリにコンポーネント登録用のファイルを置いて登録していたのだけれど、どのコンポーネントを追加したのか忘れてしまい、登録用のファイルを開いて確認する作業が地味に手間だった。 Githubをサーフィンしていたところ、コンポーネントのファイル名に「global」というサフィックスを付けるだけでどこからでも呼び出し可能にするプラグイン（@nuxtjs/global-components）が目に留まったので、試してみたところ非常に便利だったので紹介したい。 使い方は以下のとおり。 @nuxtjs/global-c
Nuxt.js passport、vuex-persistedstateを使ったログイン認証でリロードするとミドルウェア時に読み込めていない
質問をすることでしか得られない、回答やアドバイスがある。15分調べてもわからないことは、質問しよう！新規登録して質問してみよう
【Vuex】stateの変更を監視する3つの方法 | kawadeblog
現在バージョンアップ作業している所得税・住民税・事業税・国民健康保険計算シミュレーションは、Vuexを使用しています。その際に、stateの変更を監視したいケースが出てきたのでその方法をご紹介します。 今回の想定は、都道府県のセレクトコントロールがあり、その値をVuexのストアで管理しているケースです。画面はこんな感じのコントロール。いたって普通。 Vuexのstoreの中身はこちら。 const store = new Vuex.Store({ state: { prefecture: null }, getters: { prefecture(state) { return state.prefecture } }, mutations: { setPrefecture(state, payload) { state.prefecture = payload.prefecture }
computedを利用してVuexのstoreをwatch - 親バカエンジニアのナレッジ帳
storeの変更を検知したいパターン computedを利用するやり方 storeの変更を検知したいパターン Vue.jsでは状態を管理するのに便利なVuexのstoreですが、storeの値が変更されたタイミングでイベントを実行したくなる場面はありませんか？ 例えば別なコンポーネントで、非同期で値を取得するAPIを実行し、その結果をstoreに格納するパターンなどがありますね。 そのような時にどのように実装すれば良いのでしょうか。 computedを利用するやり方 僕の中ではcomputedを利用してstoreをwatchするやり方が一番扱いやすいかなという感想です。 記述は増えますが、シンプルな実装ができますね。 以下のようになります。 今回は例としてmoneyと定義したstoreを使います。 ※色々記述を飛ばしてcomputedとwatchしか書いてません笑 computed: {
NuxtJS + Vuexでいい感じのTypescript環境をあまり頑張らないで構築する - Qiita
はじめに Nuxt（Vue）の Typescript 環境構築は、確立された手法が存在しません。 よって、いろんな人が、いろんなやり方で、環境を構築されています。 ここで紹介するのは、僕が色々な手法を試した中で、 一番楽で、一番使いやすいと感じた環境構築の手法です。 型推論が 100% 完璧ではなかったりしますが、完璧を目指すと大変です。 ある程度妥協して、まぁこんくらいなら十分かなと思えるような環境を構築します。 完璧を求める方は、他の方の手法をお試しください。 それでは、構築していきましょう。 追記：あまり頑張らないために重要なこと 2020年4月に、nuxtの環境構築コマンドcreate-nuxt-appが改良され、 Typescript環境を簡単に構築できるようになりました。 この記事の前半の内容は、このコマンドによって代替できますので、 こちらを利用することを推奨します。 cre
Vuex and Typescript
Lately, Typescript is becoming more popular in the Javascript ecosystem and, by this post, I don’t want to dive deeply into Typescript but I would like to show a basic approach to integrate Vuex within a Vue application with a Typescript codebase. At this point, I assume you are familiar with basic Typescript approaches and how to use the language in a Vue application. In case you’d like to have a
TypeScriptでVuexを使うときのスタンダードっぽいやりかたを調べてみた - Qiita
この記事は オープンストリーム Advent Calendar 2018 の11日目の記事です。 うっかり期限を勘違いしていて前日に慌てて記事を書いています！間に合え！！ やりたいこと 最近やっと TypeScript と Vue.js を使い始めたので Vuex も一緒に使ってみたい。 とりあえず vue-cli でプロジェクトを作成すると、 store.ts ってファイルがぺろっと一つ追加される。けど、できれば1ファイルにべた書きするんじゃなくて、いいかんじに分けて書きたい。けど何をどう書けばいいのかよくわからない あとたぶん別の言語やって1ヶ月もしたら内容をすっぱり忘れるので、備忘録もほしい というわけで、調べてみた。 結論 ここにぜんぶ載ってた。すてき。 https://codeburst.io/vuex-and-typescript-3427ba78cfa8 ……なのですが。これ
nuxt.ts(nuxt.js+Typescript)でfirebaseをインジェクションしたい。 - Qiita
前書き nuxt.jsとFirebaseの組み合わせでなにか作るというのは結構ポピュラーらしく、qiitaでも検索するといろいろな記事が出てきます。私も大変お世話になりました。 nuxt.jsでFirebaseSDKを使う場合、多くはpluginディレクトリ内でfirebase.jsを用意してFirebase SDKを初期化し、各々のVueファイル内でimportするというのが定番のようです。 一方でnuxt.jsのインジェクションという機能を使うことで、いちいちvueファイル内でimportせずにFirebaseを呼び出せるようにする方法もあります。importの方がどこで何を使っているのか明示されてわかりやすいのですが、私は横着なのでインジェクションを使っています。 今回はそれをTypeScript導入済みのnuxt.jsでやってみようと思い、（警告が出ていますが）実際に動作させること
Firebaseで業務アプリケーションを構築しよう 1:Nuxt.jsのセットアップ - takeda_san’s blog
目的 Firebaseを使って業務アプリケーションを作りたい。 背景 普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。 ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。 FirebaseのCloud Functionとhostingで代用できるかも…？ バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。 バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？ ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。 やること FirebaseのCloudStore/Functions/Hostingを使う Nuxt.
Nuxt + Firebase Authentication | shimar's blog
最近、個人でFirebaseをバックエンドとしたNuxtによるWebアプリケーションの開発をしています。その中で、Firebaseの機能の1つであるFirebase Authenticationを使用してユーザーの認証機能を実装してみました。この記事では、NuxtアプリでFirebase Authenticationによるユーザー認証機能を実装する方法について書いてみたいと思います。 はじめに ここで検討するアプリケーションは、次の仕様を前提としています。 Googleアカウントで利用可能である。 次のページを持つ。 ルートページ (/) ログインページ (/login) 認証されていないユーザーがルートページ(/)にアクセスした場合、ログインページ(/login)にリダイレクトする。 認証済みのユーザーがログインページ(/login)にアクセスした場合、ルートページ(/)にリダイレクトす
Nuxt.jsのパフォーマンス向上テクニック - Qiita
Nuxt.jsのプロジェクトで使用しているパフォーマンス向上のためのテクニックです。 .nuxt/dist と static ディレクトリはNginxから直接配信する 静的ファイルはNuxt.jsのサーバを使わずにNginxから配信します。CDNなどを使うともっと効果的でしょう。 location / { root /path/to/nuxt/static; try_files $uri @proxy; } location @proxy { proxy_pass http://127.0.0.1:3000; } location /_nuxt { alias /path/to/nuxt/.nuxt/dist; } APIエンドポイントをサーバーとクライアントで分ける SSRのサーバとAPIサーバが同一LAN内の場合は、余計なネットワークコストを発生させないように、SSR時はLAN内で通信
Vue.jsのSSRではcreatedが2回実行される!?
Nuxt.jsなどのフレームワークを使えば、Vue.jsを用いたSSR（サーバーサイドレンダリング）のアプリケーションを簡単に作成することができます。ただし、どこまでがサーバーで実行され、どこからクライアントで実行されるのかを正しく理解しておかないと、期待通りのSSRにはなりません。タイトルでネタバレしていますが、今回はここを少しだけ掘り下げてみたいと思います。 Vue.jsのcreated、mounted、dataNuxt.jsの話の前に、そもそもVue.jsのライフサイクルフックとして用意されている created と mounted 、およびデータをリアクティブにする dataプロパティについて簡単に触れます。 created は、Vueインスタンスが作成された直後に呼ばれる関数で、Vueインスタンスの各種プロパティ、メソッドは利用できますが、レンダリングが完了していないため、エレメ
Nuxt.jsにおけるサーバーサイドレンダリングの挙動とライフサイクル - nazolabo
Nuxt.jsというかSSR関係を触る際にまず疑問になるのは「どこまでがサーバーサイドレンダリング (SSR) でどこからがクライアントサイドレンダリング (CSR) なの？」ということだと思います。 基本 サーバーからロードされる時はサーバーサイドレンダリング ロードされた以降はクライアントサイドレンダリング 簡単に言えば、ブラウザでURL直接指定で開けばSSR、それ以降はCSR、ということになります。 当たり前ですが、サーバーサイドレンダリングはサーバーでの実行なので、windowオブジェクトも存在しないし、そこから外部サーバー（APIサーバーなど）にアクセスする際はそこからのアクセスになります。そのままではブラウザのcookieも利用できません。 axios-moduleは何をしているのか 上記の通り、SSRになった場合とCSRになった場合は通信経路も変わるしcookieの取扱も変わ
Netlify Functions を使って CORS エラーを回避する - Qiita
はじめに 現在 Web アプリを Nuxt で開発していて、nuxt generateで静的コンテンツを作成し、Netlify にホスティングしている そのアプリでは、別ドメインの API にリクエストを投げてデータを取得しているので、CORS ポリシーでブロックされないようにproxy-moduleを使って API と同一ドメインになるようにプロキシしている modules: ['@nuxtjs/axios', '@nuxtjs/proxy'], proxy: { '/atnd': { target: 'http://api.atnd.org/events', pathRewrite: { '^/atnd': '/' } }, '/connpass': { target: 'https://connpass.com/api/v1/event', pathRewrite: { '^/con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsでvue-form-wizardを使ってステップフォームを実装してみました。 - Qiita
https://hafilog.com/execution-order
Dynamically get image paths in folder with Nuxt
Async data in layout? · Issue #1740 · nuxt/nuxt