Nuxt3 + GitHub Pages でホームページ兼ブログを作成してみた
はじめに 簡易的なホームページ兼ブログを作成しました。作りながら以下のスクラップに雑にまとめていたので、少しだけ整理して記事にしてみました。 実際の手順はスクラップに記載しているので要点だけ書きたいなと思います。 構成 とにかく手をかけずに作成したかったので以下の様な構成にしました。 フレームワーク Nuxt3 (ホームページを作成開始した当時 3.0.0-rc.6) https://v3.nuxtjs.org/ ブログコンテンツ管理 @nuxt/content (2.0.1) ホスティングサービス GitHub Pages そろそろ Nuxt3 が正式リリースされる？などの噂を耳にしていましたが、気になっていたので試してみることにしました。また、コンテンツ管理は CMS を導入するほど大袈裟にしたくなかったので @nuxt/content に決定しました。 実際のコードは以下のリポジトリ
CloudWatch RUM を使って NuxtJS アプリのクライアント側のエラーをモニタリングしてみた | DevelopersIO
はじめに プロフィールビューアーサービス Proflly（プロフリー）の運用にて、エラーが発生している原因を調査することがあります。その際に再現性があるエラーの場合は、原因を突き止めやすいのですが、再現性がないエラーの場合、調査して原因を突き止めるのが難しい場合があります。 そういった場合に、クライアント側のエラー(Javascript のエラーなど)をモニタリングできると、エラー時の挙動がより調査しやすくなるので、CloudWatch RUM を実際に触って試してみました。 やってみること CloudWatch RUM にアプリケーションモニターを作成 NuxtJS アプリ(Single Page Application)に Amazon CloudWatch RUM Web Client を組み込む NuxtJS アプリでエラー（例外）を発生させる エラー内容をアプリケーションモニター
Nuxt 3がパブリックベータ版になったので新機能の紹介や所感など
本記事で書かれている内容は 2021/10/21 時点の内容になります。 ベータ版のため、今後記載方法の大きな変更の可能性があります。 最新情報は Nuxt 3 公式ドキュメントでご確認ください。 はじめに 2021/10/12 Nuxt.js 3（以下 Nuxt 3）がパブリックベータ版に移行しました 🎉！ これによって誰でも触れるようになったというわけで、今回早速試してみました的な記事です。 （そしてなぜか Zenn ではあまり話題になってない…） Nuxt 3 の主な新機能 主な新機能は以下の通りです。 Nitro Engine による高速化/軽量化および Nuxt 内部での API 作成への対応 トップページの記載によれば、75 倍の軽量化が実現したそうです。 高速化に関しては数値まで公表されていないですが、実際にアプリを作成したところバージョン２とは別物レベルで早くなっていまし
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
Nuxt.jsでjestとcypressでテストしまくる。with Typescript | Rhyztech blog
Typescript を使って Nuxt.js で開発をしながら、各々のコンポーネントのテストを jest で、e2e テストやインテグレーションテストを cypress で行う方法を紹介します。 jest と cypress の型情報のバッティング部分に罠があるのでその辺りを特に解説します。 サンプルは Github で公開しています。 https://github.com/rhythm191/nuxt-typescript-jest-cypress 準備 npx create-nuxt-app で Typescript・jest を使う Nuxt.js アプリケーションを作成しましょう。 その後、cypress のセットアップをします。 npm i -D cypress @types/cypress eslint-plugin-cypress その後、npx cypress openで
Nuxt.jsで作ったアプリでMarkdownをレンダリングしてみる | DevelopersIO
Nuxt.jsでSPAを作っていて「ここのテキスト表示領域、Markdownで書けるとイイなー」というようなリクエストがあったので@nuxtjs/markdownitを使ってMarkdownのレンダリングを試してみました。 こんにちは。 プロダクトグループのshoitoです。 Nuxt.jsでSPAを作っていて「ここのテキスト表示領域、Markdownで書けるとイイなー」というようなリクエストがあったので、@nuxtjs/markdownitを使ってMarkdownのレンダリングを試してみました。 @nuxtjs/markdownitとは markdown-itというMarkdownパーサーライブラリのNuxt.jsモジュール提供版です。 markdown-itについては、GitHubのREADME.mdにもリンクがありますが、 デモページを見ると、Markdownをどのようにレンダリング
【Nuxt.js入門】Nuxt.jsとは？ローカル環境でNuxtアプリを立ち上げてみよう！ | FromsBlog
2019-10-25 【Nuxt.js入門】Nuxt.jsとは？ローカル環境でNuxtアプリを立ち上げてみよう！ #nuxt.js#vue.js#node.js#npm#webアプリ#javascript 概要 以前の記事「Firebase & Contentful & Nuxt.jsってなに！？」でも軽く触れているNuxt.jsについてのもう少し詳しい解説と、Nuxt.jsプロジェクトの立ち上げ方を解説していきます。 ぜひ、最近フロントエンド界隈で人気のNuxt.jsについての知識を深めていただければと思います！ ちなみに、このブログ・ポートフォリオサイトもNuxt.jsを使って作成しています！ Nuxt.jsは、JavascriptのフレームワークであるVue.jsのアプリケーションを構築するためのフレームワークです。 Vue.jsは、容易に「SPA(Single Page Appli
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.js + Ruby on Rails + AWS Fargate の開発・デプロイチュートリアル