【Nuxt.js v2】middleware内で使えるものまとめ
export default function ({ store, route, from, params, query, isDev, redirect, error }) { // store // store内のstateの参照やactionsの呼び出しなど if (!store.state.auth.isLogin) { store.dispatch('auth/login') } // route // URLのパスやパラメータを取得する if (route.path === '/') { // ・・・ } // from // 遷移元のrouteオブジェクト // 遷移元と遷移先のパスが同じ場合は、画面遷移ではなくリンク直アクセスだと判断できる。 if (from.path === route.path) { // ・・・ } // params // route.params
nuxt-serverlessを使いサーバーレスで安定した環境を作るTips - blog.potproject.net
いいタイトルが思いつかない 最近Nuxt.jsとServerless Frameworkを使ってそこそこのアクセスが見込まれるであろうものをちゃんと本番までもっていったので、その知見。 Serverless Frameworkとは Serverless Frameworkは、オープンソースのサーバーレスアーキテクチャのためのフレームワークです。 特定のサービスだけではなく、AWS/GCP/AzureなどのいろんなFaaSに対応していますが、今回はAWS(Lambda)を前提の話として書いています。 AWSの場合は、デプロイを行うsls deployコマンドを実行するとこのように動作します。 パッケージ処理としてserverless.ymlというyamlで書かれた設定ファイルより、AWS CloudFormationのテンプレートの作成及びZIP圧縮したソースコードを生成。 デプロイ処理とし
HapiCode
spa で作ったプログラムを universal に切り替えて SSR で HP 速く表示することを目指しました。 SPA モードでは問題なく動いていたプログラムが localStorage is not defined エラー localstorage はブラウザ側しかないのに、サーバーレンダリングされたことが原因 はわかるけど SPA に切り替えてれば、動くこともわかるけど SSR 使いたい！ SSR 使いたいから SPA からわざわざ切り替えようとしているから # window document が undefined これは、サーバーサイドのレンダリングに起因します。 クライアントサイドでのみリソースをインポートしたい時は process.client 変数を使用する必要があります。 process.clientで if 判断
Nuxt.js | Yuuniworks Note
API https://nuxtjs.org/api 方針を決める Nuxt のプロダクション環境での使い方は 3 つある。 Universal Mode(サーバあり) mode: 'universal' デプロイ方法 --- Node.js サーバにソースをクローンしyarn startする。サーバが必要。 非同期データは、 初回リクエスト時はサーバ側で取得する（常に最新） ページ遷移時など、2 回目以降はクライアント側で取得する Universal Mode(サーバなし) mode: 'universal' デプロイ方法 --- nuxt generateで生成された静的ファイルを単に配布する。サーバが不要。 非同期データは、 初回リクエスト時は、ビルド時に取得したデータで固定される（＝疑似的な SSR と考えればよい）。このため、動的データに変更があったときは再ビルド・再デプ
Nuxt.js の context をおさらいする - ROXX開発者ブログ
こんにちは、 ROXX の匠平@show60です。 Nuxt.js の context は色々な機能を内包してくれているためそれとなく使えている感覚でしたが、そもそも中身どうなってんの？と気になったので調べてみることにしました。 そもそも context とは JavaScript では this という呼び名の context ですが、直訳すると 文脈、脈絡、前後関係 という意味となります。 日常では曖昧な使い方をされてしまうため一層理解に戸惑いますが、 MdN では outside of any function (どの関数の外側にもある) と説明されています。 Global context In the global execution context (outside of any function), this refers to the global object whethe
Nuxt.jsで使うAxiosにリクエストのキャッシュ機能を組み込んでみる | DevelopersIO
Nuxt.js製のアプリで利用しているaxios-moduleでリクエストのキャッシュをしたかったので、Axiosを拡張してそれをできるようにしてみました。 なお、今回試したソースコードの一式はこちらにあります。 https://github.com/shoito/try-axios-cache create-nuxt-appでベースとなるNuxt.jsアプリを作る ここではcreate-nuxt-appコマンドで、try-axios-cacheという名前のアプリを作ります。 $ npm i -g create-nuxt-app $ create-nuxt-app try-axios-cache ここで重要なのが、create-nuxt-appでNuxt.jsアプリの雛形を作る際に、モジュールの選択で Axios を選択することです。 $ create-nuxt-app try-axios
Nuxt.jsを用いたプロダクト開発を通して得た知見
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「Nuxtjsでプロダクトを開発して得た知見」に登壇したのは、株式会社ITプロパートナーズの米川桂氏。講演資料はこちら Nuxtjsでプロダクトを開発して得た知見 米川桂氏：はじめまして。株式会社ITプロパートナーズの米川と申します。本日はNuxt.jsを使ってプロダクト開発して得た知見等を発表していきたいと思っています。 今日のアジェンダなんですが、簡単に自己紹介したあと、Nuxt.jsを導入したことによるメリット・デメリット、あとはNuxt.jsを作って工夫した点やまとめ等を発表していき
Nuxt.jsで参考になりそうな事例や実装例を調べてみた - りまりまだんの本拠地
こんにちは。りまりま団のもふもふです。これはNuxt.js Advent Calendar 2018の17日目の記事です。 本当はVue.jsのKUSOアプリをNuxt.jsに書き換えて比較しようと思っていたのですが、スマブラで全キャラクターを出すのに注力しすぎたコミックマーケットの原稿で力尽きたため、予定を変更してお送りします。 なぜこのエントリを書くのかというと、Nuxt.jsはVue.js以上に実装例が少なく、いざプロジェクトを作成しよう！というときに色々参考にできるものがあると嬉しいなと思ったからです。特にディレクトリ構成は気になりますよね。Nuxt.jsはディレクトリ構成を参照してルーティングを行なってくれるためです。 実装例 hackernews github.com ニュースサイトをNuxt.jsで実装したリポジトリです。リンクから実際のサイトを見ることもできます。 nuep
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue/Nuxt】sanitize-htmlのインストールと使い方 - Awesome Blog