Nuxt と firebase で個人開発できるくらいにはなったのでどのように勉強したかを残しておきます。 もともとVueは仕事で使っていてNuxtが初めてという状況でした。 step1. Nuxt.js - Vue.js on Steroids learning.oreilly.com これをChapter2まで終わらせる。 step2. Build a News Feed with Nuxt 2 and Firestore learning.oreilly.com これを最後まで写経。3時間で終わるかと思ったら結構時間かかった。ビデオの人のタイピングも説明も早い。 step3. 個人開発する Nuxt + firebase で connpass みたいなものを試しに作った。 SSRでやったので細かいところは適宜ぐぐった。 （しかしSPAでも最近はSEOに乗ったり広告はれたりするようなの
morishitaです。 SPAモードで動作するNuxtアプリケーションでネストした動的ルーティングの動作が思ったのと違ったので調べてみました。 やりたかったこと Railsのノリで次のようなパス階層をNuxt.jsでやりたいと思いました。 パス 説明 / サイトトップ。 /groups/:group :groupに対応したグループの詳細。 実際には所属メンバーの一覧 /groups/:group/members/:member グループ:groupに所属する メンバー:memberの詳細。 ※ :group、:memberはそれぞれのID（自然数）です。 複数のグループが存在し、そのそれぞれに所属するメンバーがいるというよくあるアプリケーションです。 期待したこと 公式ドキュメントの動的でネストされたルートを参考に次のようなファイル群を作りました。 pages/ ├── index.vu
この記事は、「Nuxt.js ってなんですか？」な状態の人間が、やりたいことを盛り込んで作成したポートフォリオについて書いたものです。 https://tayuta.github.io/portfolio/ GitHub Pages で公開しています。 https://tayu.netlify.app/ 現在は、Netlify で公開しています。 https://github.com/tayuta/portfolio ソースコードです。 作成に至った動機 ポートフォリオを作成することになったのは、社内でポートフォリオ部（正式名称：そうだポトフを作ろう！ 略称：ポトフ）が発足されたことがきっかけです。 もともと業務では、JavaScriptやHTML、CSSなど、フロント系はほとんど触れあったことがなかったので、勉強になるかと思い、入部しました。 プロジェクトの作成 ポートフォリオの研究 ポ
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
FROM node:11.1 # locale & timezone (Asia/Tokyo) # https://github.com/moby/moby/issues/12084 ENV LANG C.UTF-8 ENV TZ Asia/Tokyo # system update RUN apt-get update && \ apt-get install -y vim less WORKDIR /root # install yarn command. # - https://yarnpkg.com/lang/ja/docs/install/#alternatives-stable # - https://github.com/yarnpkg/yarn/releases ARG CMD_YARN_VERSION=1.13.0 RUN npm install --global yar
Github Actions で Nuxt.js のSPAにJestとESLintを実行してみた - アクトインディ開発者ブログ
morishitaです。 毎月第3土曜日にお得クーポンを配布しているいこーよ こどもBIRTHDAYはいこーよの中にありながら、このコーナーだけ独立したNuxt.jsのSPAとなっています。 https://birthday.iko-yo.net/birthday.iko-yo.net 次の記事で紹介したようにJestでテストしており、ESLintを使ってチェックもしています。 tech.actindi.net これまでは実装していたのが主に私とデザイナーの二人だけだったのでCIを用意しておらず、ローカルでJestとESLintを実行してチェックしていました。 ちょうど Github Actions が使えるようになったので、これを使ってCIをやってみました。 Jest まずはJestによるテストの実行。 次のような内容のYAMLファイルを .github/workflows/jest.y
はじめに nuxt.jsでvue-form-wizardを使って簡単にステップフォームを実装してみました。 目次 NPMパッケージをインストール vue-form-wizard呼び出し component登録 ステップ登録 終わりに 1. NPMパッケージをインストール
2020年3月25日 更新 【超高速！】NetlifyCMSでJAMstackなブログを作ろう【Nuxt.js】 NetlifyNuxt.jsCMS初心者向け 前回は、Netlifyへのデプロイ手順を説明しました。 そして今回はNetlify CMSの導入方法を説明いたします！ CMSとは、Contents Management Systemの略で「コンテンツ管理システム」の意味です。 ブログなどの原稿を作成したり編集できる仕組みのことを言います。 代表的なものだとWordPressが有名ですね。 耳にした事がある人も多いのでは無いでしょうか？ なんと世界のCMSシェアの約6割がWordPressです。 しかしWordPressは動的にページ生成するためページの表示速度が遅くなる傾向があります。 そこで登場した概念がJAMstackです。 JAMstackは、あらかじめデータを取得しビルド
Nuxt.js + microCMS + Firebase + GitHub Actions で JAMstack なブログに移行した | RYO620 Design & Development
Nuxt.js + microCMS + Firebase + GitHub Actions で JAMstack なブログに移行した 長く取り組んでいたブログ移行がようやく終わったのでその一発目の記事です。 Nuxt.js + microCMS の JAMstack なブログを TypeScript で書いて GitHub Actions で Firebase に自動デプロイできるようにしました（なんかラノベのタイトルみたい）。 ここ1年くらいでよく見かけるようになった構成でしょうか。これまで Wordpress + レンタルサーバ構成でしたがほぼほぼ JavaScript で完結するのでだいぶスッキリしました。 Nuxt.js は v2.14.0、TypeScript で書きました。 ブログを Markdown で書く WordPressのpタグ自動挿入も便利なのですが、今後記事リソー
Nuxt.js×Axios×RepositoryFactoryのオレオレベストプラクティス - Qiita
はじめに 今回はNuxtのAPI設計をRepositoryFactoryパターンを適応して実装して 昔と比べてかなりスッキリした設計にできたかなと満足できたので、そちらの構成の紹介をしていこうと思います。 ディレクトリ設計 project ├ src | ├ repositories │ │ ├ user-repository.js │ │ └ post-repository.js │ ├ factories │ │ └ api-repository-factory.js │ ├ store │ │ └ post.js │ └ plugins │ ├ axios.js │ └ api.js │ └ nuxt.config.js Repositoryの作成 まず大本となるRepositoryをVue.jsなどであれば作成するのですが、 Nuxtの場合は@nuxt
Nuxt.js を使うことで簡単に PWA なアプリを作ることができます。そのアプリを作る際に TypeScript を使うとコードの品質を高めることができ、また複数人やチームでの開発生産性を向上させることができます。今回は Nuxt.js で作ったアプリに TypeScript を導入する方法を紹介します。 前回Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作るで、Nuxt.jsを使ったPWAのベースアプリを作りました。そのまま JavaScript で開発を進めることができますが、TypeScript を導入することで変数や関数に型定義が行えるようになり開発生産性や保守性を向上できます。今回のベースアプリはゼロから作っているので最初から入れてしまうのがよいでしょう。また TypeScript の関連モジュールを導入したとしても、必ずしも Typ
Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（inject編） - Qiita
異なるコンポーネントから共通で利用できる関数を定義したかったので、試してみました。 以前の記事ではmixinを使って実現しましたが、この方法では asyncData や fetch 内で共通の関数を利用できませんでした。 そのため、今回はinjectを使って実現しています。 この方法では、 asyncData や fetch 等のSSR時も関数を利用できるため、こちらの方が良いかもしれません。 共通の関数を定義する plugins/ 内に utils.js というファイルを作成し、ここに関数を定義していきます。 今回は例として hoge() と fuga() という、2つの関数を定義するものとします。 使用する際は this.$huga() のように記述します。
Nuxt.js+Herokuを使って布団の温度をLINE LIFFで見る #SleepTech - Qiita
はじめに 前回、寝床内気象（布団内の温度・湿度）を測定する装置を作り、データをAmbientというサービスを使って可視化していました。 しかし、毎回 Ambient にログインしてグラフを見るのが面倒になってきたので、 以前に作成した気温に応じておすすめのおふとんを教えてくれるBOTで見れるようにしていきます。 作ったもの リッチメニューの右側をタップすると、LINE LIFF 上にグラフが表示されます。 これで手軽に布団の温度が確認できるようになった！ #protoout #sleeptech pic.twitter.com/KBNQdb1dNd — Takahiro Mitsuoka (@t_mitsuoka) November 27, 2019 アプリ構成 前の記事で温度を測定する部分を作成したので、今回は LINE で表示する部分を作っていきます。 システム構成 バックエンドは前回
はじめに Vue.jsのSPAだとTwitterのサムネイルに使うOGP等が指定できないと以前記事を書いたのですが、コメントの中にNuxt.jsやNext.jsを使うと良いよ、とありました。コメントありがとうございました。 ただ、既存のアプリを違うFWに移行させるのはちょっと面倒だと思いPrerender SPA Pluginとかを使って、下記あたりを参考にVue.js＋プリレンダリングで出来ないかと頑張ってみたけど諦めた、という記録になります。 具体的にはビルド時にAPI呼び出しをしてるのに、ブラウザで表示するタイミングで値が初期化されてしまう 「APIが2回呼び出される問題」 を解決できなかったので。Nuxt.jsなら簡単に出来たので素直にそっちを使うことにしました。 この記事では他の誰かあるいは過去を忘れた未来の自分が同じ過ちを繰り返さないように、「Vue.js + Prerende
【Nuxt.js】アプリ開発基礎編：Nuxt + Vuex + firebaseでシンプルToDoリスト - Qiita
前置き 本格的なTODOリストを作っていきます！ すっごく簡単なTODOリストは以前やりましたが、 一時的な物なのでリロードしたら消えます💥😲 https://qiita.com/aLiz/items/7d9e907850c15cc546a6 今回はfirebaseとVuexで 本格的TODOリストを作成します✨🎈 ・firebaseでデータ管理 ・Vuexで状態を保持 内容が濃いのでお知らせした通り、 有料記事になりました💰 https://note.com/aliz/n/n8411db2c9a20 まずは基本のTODOリスト、 次回以降のカスタマイズとして ・ログイン機能の追加 ・リストに画像機能の追加 も公開していきますよ！ CSSも追加したりして 自分好みのリストにしてみてください💕🥤☺️ Stepについて いつも通り超簡単なところから だんだんと肉付けをしていきます。
概要 vue.jsのサーバサイドレンダリングで行うNuxt.jsをAWS Lambda上で動かしてみます．あくまでも試験的に試すことが目的の記事です．もし，本番サービスでの導入する場合には慎重な議論をお願いします． TypeScriptでも試してみました。Nuxt.jsをAWS Lambdaで動かす。【TypeScript編】 構成 AWS Lambdaでnuxt.jsを可動させる API Gateway経由でWebブラウザ等からアクセスする． 前提 yarn, npx, nodeといったnuxt.jsを開発する環境がある． AWSアカウントを取得しaws-cliがインストール済みで実行できる状態である． node.jsとexpressでWebサーバを作ったことがある． AWS LambdaやAPI Gateway, CloudFormation, S3などAWSのサービスを使ったことがあ
Nuxt.jsでもVue.jsで同様にaxiosを利用することで外部からデータを取得することができます。外部からのデータ取得はアプリケーションを構築する上で表示に重要な部分なので本文書ではNuxt.jsにおけるaxiosの使い方とasyncDataの使い方について説明を行っています。 Nuxt.jsではサーバサイドでデータを取得する際はasyncData Hookまたはfetch Hookの中にデータを取得する処理を記述します。クライアントサイドでデータを取得する際にはmounted Hookの中にデータを取得する処理を記述します。 fetch HookはJavaScriptのfetch関数とは異なります。また本文書ではfetch Hookについての説明は行っておりません。
タイトル通りですが、対象読者はNuxt.jsにVuetify（@nuxtjs/vuetify）をインストール後、VuetifyのSASS変数を変更するためにvariables.scssを作成したけど反映されずに困ってる方です。 結果的には@nuxtjs/vuetify のページをじっくり読めば問題なかったのですが、要点だけ書いておきます。 1. customVariablesの設定 nuxtjs/vuetifyのcustomVariables部分を読むと、customVariablesオプションについて以下のように書かれてます。 Provide a way to customize Vuetify SASS variables. 一例として以下のようにサンプルが載ってます。 ※ customVariablesはNuxt.jsをインストールする際、テンプレートにVuetifyを選択すると最初
これは、Nuxt.js Advent Calendar 2019 1日目の記事です。 今の職場では、Vue Fes 2018で発表した 1年間単体テストを書き続けた現場から送る Vue Component のテスト の通り、Storybook + reg-suit を利用したVisual Regression Testingを今でも継続してやっています。 Storybookの本来の用途である、いわゆるcomponentのカタログとして使うよりも、pageなど大きな粒度のcomponentの見た目のテストのためにStroybookを利用しています。これはテストに利用するということを考えると、設計の可動域を確保し今後のリファクタリングなど変更のしやすさを考えると、より大きな粒度のテストにしておいたほうがよいだろうという判断をしています。(もちろん、それだけで全てのテストケースを網羅するのではな
Nuxtでコンポーネントをグローバルに使いたい。 意外と記事が出てこない。 ファイルの指定の仕方忘れてる。 というわけで、備忘録的な感じで書きます。 環境 @nuxt/cli v2.11.0 事前準備 ↓こいつをグローバルに使いたい...
エラー内容 状況としては、docker-composeを使ってイメージとアプリを作っていて、サーバーを立ち上げようとしたら、次のようなエラーが出て、立ち上がらなかった。 app_front | npm ERR! code ENOENT app_front | npm ERR! syscall open app_front | npm ERR! path /app/package.json app_front | npm ERR! errno -2 app_front | npm ERR! enoent ENOENT: no such file or directory, open '/app/package.json' app_front | npm ERR! enoent This is related to npm not being able to find a file. app_
概要 Qiitaのストックを整理するためのサービス「Mindexer(ミンデクサー)」のフロントエンドを Vue.jsで構築したSPAのアプリケーションからNuxt.jsでSSRを行うように再構築しました。 LambdaでExpressサーバーを動かし、その上でNuxt.jsを動かしています。 この記事では、今回の開発で得られたNuxt.jsに関するTipsやインフラ構成などについて解説していきたいと思います。 なお、Vue.jsからの移行に関する解説は含みません。 サービスについて 「Mindexer(ミンデクサー)」については、こちらの記事で解説しています。 バックエンドで利用している技術についても解説していますので、合わせてご覧いただけると嬉しいです。 AWS + Laravel + Vue.js でQiitaのストックを整理するサービスを作りました！【個人開発】 個人開発のインフラ
はじめに 初学者向けにNuxt.jsにおけるプラグインの導入方法を今回書いてみました。npmインストールしたけど、「あれ？動かない？」と詰まった初学者は多いはず！(あれ、私だけ？...実は公式ページにちゃんと書いてあるんですが、当時はどういうことか理解できませんでしたww 今でこそわかりやすいと感じますが....) Nuxtを新規で立ち上げて、そこにプラグインを導入する手順をハンズオン形式で進めていこうと思います。 ここでは、vue-flag-iconを例に進めていきます。
【個人開発への道①】初心者が、Nuxt.jsでFullCalendarを使ってカレンダーページ作りにチャレンジ！結果は・・・！？ - Qiita
【個人開発への道①】初心者が、Nuxt.jsでFullCalendarを使ってカレンダーページ作りにチャレンジ！結果は・・・！？JavaScriptVue.jsFullCalendarNuxtジェイソン・ステイサム こんにちは！たわちゃんです 私は３ヶ月前からプログラミングを学び始めた初心者ではございますが、 プライベートでサービス開発にチャレンジしようとしております・・・！ その開発までの道のりを、これからQiitaにちょこちょこ書いていこうかなと思うので、 さりげな～く応援よろしくお願いします！ 構想中のサービス 現在、考えているのがこちらのサービス！ 私の兄はマジシャンをしているのですが、常日頃から告知や宣伝活動に困っているのを見てきました。 そこで、兄のような芸人さん、さらには個人経営の店主さんを対象に 告知専用サービスを作ろうと考えました！ 主な機能は３つ （１）スケジュールの管
Webアプリケーションフレームワーク「Nuxt.js 2.15.0」がリリース、「Node.js 12.0.0」以降をサポート
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
【Nuxt.js】asyncDataの引数はContextというオブジェクトです - Qiita
asyncDataの引数について Nuxt.jsでよく使われる「asyncData()」メソッドの引数には、 Contextというオブジェクトが渡されてきます。 例 export default { async asyncData ({ params }) { // ここでContextが引数に渡されてくる let { data } = await axios.get(`https://api-test/posts/${params.id}`) return { name: data.name } } } 参照：公式ドキュメント/非同期なデータ Contextとは Contextには、paramsやstore、route等の asyncData内で使用できるオブジェクトが入っています。 Contextの詳細については、公式ドキュメント/Contextに詳しく載っています。 asyncDat
Nuxt.jsはVue.jsアプリケーションを構築するためのフレームワークで、シングルページアプリケーションとして構築するか、サーバサイドレンダリングを利用するか、静的サイトとしてファイルを生成するかを設定することができます。静的ファイルを生成する場合、ページごとにvueファイルを用意し、ビルドしてHTMLファイルを生成するのが基本ですが、ルーティング機能をうまく使うことで1つのvueファイルから複数のHTMLを作成することもできます。 Vue I18nはVue.js用に最適化されて作られた国際化対応用のライブラリです。今回はこの2つのライブラリを使い、多言語サイトの静的サイトジェネレータとしてNuxt.jsの開発環境を整えてみます。 前提 今回作成するサイトは下記のようにホスティングすることを想定して作ります。 https://example.co.jp/ja/（日本語） https:/
これはなに Nuxt.jsでのaspidaを使ったAPI通信について、 API呼び出し箇所でエラーハンドリングするのではなく、共通的にエラーハンドリングする方法を記載します。 また、一部のAPI呼び出しにおいて、例外的に共通のエラーハンドリングを実行しないようにする方法も記載しています。 生のaxiosを使っている場合どうやるかは記載してません。 先に結論 pluginsにてaxios.onError()を設定することで共通のエラーハンドリングをかける API呼び出し時のconfigに独自の値を入れることで、共通のエラーハンドリングで処理を分岐できる configに独自の値を入れるために型を拡張する必要がある やり方 nuxt.config.js axiosモジュールの追加と、後述するpluginの読み込みを追加します。 const nuxtConfig: Configuration =
Nuxt.jsでpluginを使ってみた（郵便番号検索）
前回はaxiosをnuxtに導入して、郵便番号apiやqiita apiを動かしてみました。 今回はnuxtで郵便番号検索プラグイン作ってみたので、自作プラグインの作り方を書いています。 公式のこちらのドキュメントを参考に作ってみました。 プラグインファイルを作成する plugins/ 配下に作りたいプラグインのjsファイルを配置します。 plugins/zipcode.js という名前で作成しました。 ファイルの内容は下記です。 export default (context, inject) => { const zipcode = async function(zipcode) { return await this.$axios.get(`/zipApi/api/search?zipcode=${zipcode}`); } inject('zipcode', zipcode); c
WP REST APIを元にNuxt.jsのgenerateで記事ページを自動生成してみる（いわゆる動的ルーティング） | ARAKAZE NOTE
せっかくREST APIの情報を元にページを作るならgenerateするファイルは自動で出力したいですよね。 公式ドキュメントのところでいう「動的ルーティング」を使って実現してみましょう。 うまくいけばREST APIを元に自動でディレクトリ構造やhtmlファイルが生成されます。 考え方 nuxt.config.jsにgenerateプロパティを記述、そこに使用するAPI情報を読み込む記述をします。 ここでは読み込んだjsonの配列の中にある、ディレクトリ構造を示す値をrouteに設定していきます。 次に自動生成されるページ用のテンプレートファイルを作成します。 ディレクトリに対して細かく設定することも出来ますがWPのパーマリンクを元にする事を考えると「pages/_.vue」というファイルを作ってしまうのが手っ取り早いかなと思います。 テンプレートファイルは頭文字にアンダースコアを付ける
やりたいこと ・外部scssを使いたい ・vueファイルで変数、mixinを使いたい 実際の運用ではVueファイルで変数を使うことも出てくることもあるので、両方設定するのがほとんどかと思います 前提条件 create-nuxt-appで環境が構築されていること 参考：https://ja.nuxtjs.org/guide/installation 外部scssを使いたい 必要なパッケージをインストールする これでscss記法を使えるようになります。
Nuxt.js + TypeScript + Vuex で簡単な Todo リストを作るチュートリアル - Toragramming
はじめに Nuxt.js + TypeScript + Vuex（ストア）で簡単な Todo リスト制作を行った際の覚書です。 完成品はこちら → https://github.com/tigrig29/todo-nuxt-typescript 2019/09/20 執筆 Nuxt v2.10.0 ～ v2.14.0 あたりが対象です（v2.15.0 は未確認です） Nuxt TypeScript 公式 も参照して、比較しながら読んで頂けると幸いです。 対象 Nuxt.js 経験あり TypeScript 試したい Vuex（ストア）も使ってちゃんと型推論（入力補完）させたい 筆者の環境 Windows10 VSCode yarn Nuxt + TypeScript の環境構築 当記事では触れません。 環境構築が必要な方は、以下の記事を参考にしてみてください。 Nuxt + TypeSci
asyncData({ app, params, store }) { const data = {key: "value"} return app.$axios.$post([URL], data ).then(res => { console.log(res) }) }, getData: function(data) { const res = this.$axios.$post([URL], data ).catch(error => { console.log(error) }) //結果 // Access to XMLHttpRequest at [URL] from origin 'http://localhost:3000' has been blocked by CORS policy: // Response to preflight request doesn't
AppSync + Nuxt.js(SSR)によるリアルタイム野球詳細ページについて - Gunosy Tech Blog
この記事は Gunosy Advent Calendar 2019 の8日目の記事です。なお、昨日は id: tomoko_tsubasa さんの 新米Gopherとしてこの１年やってきたこと - Gunosy Tech Blogでした。 はじめに こんにちは。グノシー事業部でサーバーサイドを担当している吉澤(azihsoyn)です。好きなawsのサービスはAppSyncです。 久しぶりのグノスポ記事ですが、この秋(もう冬ですが)グノスポに野球詳細がリリースされました🎉🎉🎉 (この試合を選んだ意図は特にありません) めちゃくちゃかっこいいですね！！！ 実際にアクセスして触っていただく方がわかりやすいかもしれません(そしてフィードバックをください🙏) グノスポといえばAppSyncを利用しているサービスとして有名ですが、今回初めてWebからAppSyncを利用しました。 先日の re
はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 UIフレームワークを利用したWebページでは、複数のページをURLに関連付けて切り替える「ルーティング」の機能が必要になります。Nuxt.jsでは、内部的にVue.js公式のルーティングライブラリー「Vue Router」を利用しつつ、より直感的にルーティングを実装できる機能を提供しています。 本記事では、Nuxt.jsのルーティング機能を、サンプルを挙げて説明していきます。 対象読者 Nuxt.jsで複数ページを切り替えるWebページを作りたい方 Vue.jsのルーティングをよりシンプルに利用したい方 Webページの画面切り替えにアニメーション効果を入れたい方 必要な環境 本記事のサンプルコードは、
【参考まとめ】AWS Amplify ✕ Nuxt.js ✕ stripeでのサイト制作のための記事一覧 - Qiita
はじめに Nuxt.js✕Amplifyの組み合わせでの開発にあたって、全体的に参考になった記事をまとめました。 Nuxtってなに？AWSってどうやって始めるの？決済処理どうしよう、、、の状態から参考にしている記事になるため、基礎的なことから込み入った記事まで幅広くまとまっています。 今でも何度も読み直す記事や重要な記事には「★」マークを付けてますので、ご参考までに。 AWS共通 AWSサービスを利用するにあたっての基礎記事です。 ★★AWSアカウントの初期設定 AWSアカウントを作成したら、まずはこれやる。 AWSアカウントを取得したら速攻でやっておくべき初期設定まとめ AWSリソースグループ(AWSリソース管理) テスト環境や本番環境が同一アカウントでの作業になる場合は、やりたいけどまだできていない。 [AWS]リソースグループを使って、テスト・ステージング・本番環境ごとにAWSリソー
フロントエンドのエラーを検知するのは、バグの早期発見、場合によってはリリースバージョンを切り戻しの判断をしたりする上で非常に重要です。 Sentryを使えば、かなり簡単にフロントエンドのログ収集の仕組みを実現出来ます。また、他の同様のツール(Rollbarなど)に比べてモダンなUIかつ、ドキュメントやTipsが豊富な気がします。また、nuxt-community にて sentry-module が提供されてる点もgood。 SentryにはReleaseという機能があり、運用環境へのデプロイとログを紐付けることが出来ます。また、SourceMapを一緒にアップロードしておくことで、本番環境でも stack trace を追えるようになります。 しかし、今回@nuxtjs/sentryを使ってReleaseしようとした際、公式の記述がさらっとしていてちょっと困ったので備忘録として残しておき
ReactフレームワークのGatsby.jsとNext.js、VueフレームワークのNuxt.js、これらの主要なJSフレームワークで静的サイトを構築して得た気づきをご紹介します。 【結論】どれか1つ選ぶならGatsby.js Nuxt.js、Next.js、Gatsby.jsの順番で使いました。技術レベルのブレもあるため、完全にフラットな視点で選ぶのが難しいのが本音ですが、どれか1つ選ぶならGatsby.jsにします。その後、Next.js、Nuxt.jsと続きます。 詳細は以下に続きます。 開発環境の違い Next.jsがベストです。Zero Config（ゼロコンフィグ）を謳っていて、文字通り「設定が不要」です。もちろん、拡張することもできます。 私が行った拡張はたった1つ。イメージのドメイン設定だけです。 // next.config.js module.exports = { i
【ハンズオン／初学者でも簡単！】Fargateを使ってNuxt.jsを独自ドメインでデプロイする - Qiita
はじめに 以前こちらのアプリを作成しました。 このサイトのデプロイには、ECSのFargateを採用することに決めました。 前回の記事では、ECS/Fargateを使ってデプロイしました。 ただその記事内では、パブリックIPアドレスでのアクセスとなっていました。 なので今回は独自ドメインを取得してそのドメインでアクセスできるようにしましょう！ 全ての操作画面を、添付しているので初学者でも取り組みやすいかと思います。 Nuxt.jsでのデプロイでは、Netlifyなどを使用すると思いますが、ポートフォリオにAWSが入っているとそれだけでも評価が高くなります！ ぜひチャレンジしてみてください。 アーキテクチャ ゴール 独自ドメインで、Nuxt.jsのサイトにたどり着くことが今回のゴールです。 対象読者 Nuxt.jsを勉強中の方 フロントエンドを勉強中の方 ポートフォリオのデプロイをNetli
Nuxt.js + FirebaseでWebアプリにチャット機能の導入する際に 工夫した点、感じたメリット・デメリットについてお話します。 その他には、フロント周りでボトルネックになっていた処理を調査し、高速化した話をする予定です。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.js + firebaseを習得したときのロードマップ - さめたコーヒー
Nuxt.jsのネストした動的ルーティングで困ったので調べてみた - アクトインディ開発者ブログ
Nuxt.jsで初めて作成したポートフォリオをGitHub Pagesで公開しました - Qiita
「Vue.js」でWebページを作成できるフレームワーク「Nuxt.js」最初の一歩
dockerでnuxt.jsの環境を作ってみる - Qiita
Nuxt.jsでvue-form-wizardを使ってステップフォームを実装してみました。 - Qiita
【超高速！】NetlifyCMSでJAMstackなブログを作ろう【Nuxt.js】
Nuxt.js PWA(Progressive Web Apps) のベースアプリをTypeScript対応する
レガシーおじさん、Vue.jsでSSGを頑張るのを諦めてNuxt.jsにする
Nuxt.jsをAWS Lambda上で動かす．サーバレス・サーバサイドレンダリング - Qiita
Nuxt.jsにおけるaxiosライブラリ、asyncData Hookの使い方 | アールエフェクト
Nuxt.js+VuetifyでSASS変数の上書きが反映されない場合の確認事項 - Qiita
Nuxt.jsのPage ComponentのStorybook化 | tsuchikazu blog
【Nuxt.js】グローバルなコンポーネントの設定 - Qiita
【Docker】仮想環境で、Nuxt.jsを立ち上げる時に起こるエラー【エラーNo2】 - Qiita
Nuxt.js(SSR)をLambdaで配信する【個人開発】 - Qiita
Nuxt.jsにおけるプラグイン導入方法(初学者向けハンズオン) - Qiita
Nuxt.jsとVue I18nで多言語サイトをつくろう | フロントエンドBlog | ミツエーリンクス
Nuxt.jsのAPI通信で共通のエラーハンドリングを行う - Qiita
Nuxt.jsで外部scssを読み込む - Qiita
Nuxt.jsのメソッド内で外部APIを叩くとcorsエラーが起きる - Qiita
複数のページを切り替える、Nuxt.jsのルーティング機能を学ぼう
Nuxt.js + Sentry の本番運用での設定に戸惑った - Qiita
Gatsby.jsとNext.jsとNuxt.jsを比較する
Nuxt.js + Firebaseでの開発と高速化に挑んだ話