最近のJavaScriptのフレームワークを勉強したての人の場合、Vue.jsなどはすぐ理解できても、Fluxの概念やVuexのStore等でわからなくなってしまうことはありませんか？ そういう場合、Nuxt.jsを触りつつNuxt.jsのマニュアルを見ると非常に簡潔で理解しやすいです。 具体的には下記のページです。ここを参考にしながら説明していきます。先にリンクの説明を見たい場合は「モジュールモード」の方を見るとより分かりやすいと思います。当記事の内容もそちらをベースに進めていきます。 Vuex ストア - Nuxt.js そもそも何に使うものなのか？ Storeはアプリケーション全体の状態を管理してくれるものです。具体的にはログインしているユーザーの情報などが一番わかり易いと思います。 具体的にどうやって使うのか Nuxt.jsの場合、まず store/index.js に状態の定義を

build: { extend(config, { isDev, isClient }) { const vueLoader = config.module.rules.find((rule) => rule.loader === 'vue-loader') vueLoader.options.transformToRequire['v-card-media'] = ['src'] } }

Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と

この記事はVue.js #2 Advent Calendar 2017の21日目の記事です。 去年も参加させていただいたのですが、今年は４つもカレンダーが作成されてVue.jsの勢いすごいですね。 今回、自分がこの記事で書く内容は特にテック的なことではなく、Nuxt.jsへの感想記事や思い出記事みたいなのになりますので、Nuxt.jsの技術的な内容を期待していた方はすみません。こういった人間もいるのか程度にご覧いただけたら、という感じです。 テンプレートエンジン・プリプロセッサの多様化 いきなりVue.js、Nuxt.jsという主題から脱線してしますがご了承ください。 Node.jsというものが世に出てから、おそらく、宗教上の理由などを抜きにすれば、HTMLやCSSを素で書くことはなくなったと思います。いわゆるテンプレートエンジン・プリプロセッサの時代。 人々はHTMLをPug(Jade)

RouterインスタンスとRouteオブジェクト $routerと$routeについて、名前が似ているが別のもの。 $router Routerインスタンスを表す。 RouterインスタンスはWebアプリケーション全体に1つ存在し、全体的なRouter機能を管理している。 プロパティ／メソッド名 説明

Vue.js を触って早数週間経過します。 最も理解に時間がかかった コンポーネントの連携 についてまとめてみます。 理解が怪しいところはマサカリをお願いいたします。 ゴール 子コンポーネントから親コンポーネントの関数を呼び出す 環境 Node.js 7.7.1 npm 4.4.2 Vue.js 2.2.4 propsでデータを渡す props とは「 親コンポーネントからデータを受け取るためにエクスポートされた属性のリスト/ハッシュ 」です。 Vue.js > API > props https://jp.vuejs.org/v2/api/#props 最もシンプルな例を見てみましょう。 呼び出し元

はじめに 2018/8/10に待望のVue CLIのバージョン3.0.0がリリースされましたので、早速アップデートして使ってみたいと思います。 今回のバージョンは、大きなアップデートとなっており、パッケージ名についても今までの「vue-cli」から「@vue/cli」に変更となっています。 今までのVue CLIとの違い vue.js開発者「Evan You」からの発表コメント( https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb )からポイントを抜粋し意訳しました。 詳細を確認したい方はリンク先のページをご確認ください。 今回のアップデートのには２つの目的があります。 1. 複数のツールを組み合わせるフロントエンド開発用ツールを簡単に使えるようにする。 2. 全てのVueアプリケーションのデフォルトになるよう