タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
WP REST API × NuxtJS で SSG するサイト作り｜TechRacho by BPS株式会社
ebi です。定期ネタの WordPress 芸をやっていきます。 今回は一度やってみたかった WP REST API を利用したサイトに少し手出してみます。 React より Vue.js の方がまだ触ったことあるので NuxtJS を使ってみます。 また、 SSR だとホスティングするサーバをどうするかの問題が出てくるので SSG 前提のサイト構成にしてみようと思います。 そんなわけで実験がてらこう言う構成のサイト作りをやってみることにしました。 GitHub にコードも晒しておくので最終的なコードの細かい詳細見たい方は後で確認してください。 CMS として WordPress を採用している理由 正直自分自身にとって馴染みがある以外の理由は特にないです。 近年、 ContentFul や microCMS などのヘッドレスCMSが台頭してきているので、好みでそう言う CMS を選
こんにちは ebi です。 前回の記事で NuxtJS と WordPress を組み合わせるようなサイト構成の検証を軽くやったんですが、あまり真面目なコーディングをやらず仕舞いでした。 WP REST API × NuxtJS で SSG するサイト作り 今回は NuxtJS 環境をベースでやる LP や Web サイトのコーディングに少しチャレンジしてみたいと思います。 Next.js も触りたかったんだけど、前回があまりにしょぼい内容しかやってなかったので次回以降にお預けと言うことで今回も NuxtJS です。 検証用のコーディング題材 って皆さん滅茶苦茶困りませんか？ デザインスキルとかまるでないし、かと言って既存サイトをそのまま真似するのもあれだし、と無駄なプライドを持って作業を進めたところでまともなコーディングにならなくて、CSS フレームワークの適当なパーツを組み合わせたとこ
正直、無料プランで十分です。 使い方 ツールはどうこう言う前に一回触ってみるのが大切なので早速触っていきます。 どんなもんか見たいという人はここからウェブサイト見れます(ウェブサイトもノーコードで作られてるっぽい) サインイン/サインアップ 下記のページからGoogleアカウント、GitHubアカウント、メールアドレスで登録することができます。 エクスポートとかがしたいのであればGitHubアカウントで登録しておくと後々楽です。 プロジェクト作成 サインアップが完了すると、このようなページに飛ばされます。 ここがダッシュボードでプロジェクトの管理や作成が可能です。 真ん中にある「Start Building」と書いてある黒いボタンを押してプロジェクトを作成します。 黒いボタンを押すと「1から作るか」「テンプレートを利用するか」を選ぶことが可能です。 今回は試しなのでなにか良さげなテンプレー
サーバーサイドレンダリング（SSR）が必要な理由まとめ！NextJS ・ NuxtJS導入を検討している方は必見です | Ragate ブログ
サーバーサイドレンダリング（SSR）が必要な理由まとめ！NextJS ・ NuxtJS導入を検討している方は必見です こんにちは！ 近年の Web アプリケーションの世界は急速に進化しつつあり、 これまでは単純な HTML の配信だったものが、 現在ではマルチメディアコンテンツでインタラクティブな体験が当たり前となってきました。 特に JavaScript フレームワークの開発や検索エンジンの最適化が急速に進むことになり、よりユーザーにとって Web の世界が親しみやすいものになったと考えます。 今回は JavaScript フレームワークによる各配信手法の説明や、 その中でもサーバーサイドレンダリング（以下：SSR）というものが必要な理由について解説したいと思います！ はじめに JS フレームワークを用いて開発したことがある人ならクライアントサイドレンダリング（CSR）やサーバーサイドレ
アドベントカレンダー１日目：NuxtJS で検索フォーム画面を作りながら学ぶ「GET クエリとの付き合い方」 - 虎の穴ラボ技術ブログ
この記事は、 虎の穴ラボ Advent Calendar 2020の 1 日目の記事です。 qiita.com もうすぐ年末ですね。年の瀬を如何お過ごしでしょうか？ 気が付けば今年の思い出はほとんど自宅のおっくんです。 今回は NuxtJS で作る検索フォームを題材に、NuxtJS の環境設定から、GET クエリを利用した実装までを紹介したいと思います。 実行環境 OS:macOS Catalina 10.15.5 Chrome 85.0.4183.121 Node.js: v14.15.1(nodenv による導入) NuxtJS: 2.14.6 構成 初めに今回作成する検索フォーム画面の全体の構成を紹介します。 クライアントからアクセスする先は NuxtJS の loalhost:3001 になります。 API へのアクセスは、二通りあります。 NuxtJS[localhost:300
はじめに composition-apiがリリースされて時間が経ちました｡ Nuxt.jsで使う場合はpluginsで Vue.use(VueCompositionApi) を読み込むやり方が主流だったのではと思います｡ そんな中､ @nuxtjs/composition-api がリリースされていました｡ @vue/composition-apiと比べてNuxt特有の機能(UseAsync)などをサポートしているのが特色で､@vue/composition-apiをラップしているのでcomposition-apiの機能はもちろんNuxt特有の機能が揃っている｡というものです｡ なのですが個人的には以下の1点のみが気に入ってます｡
authモジュールはNuxt.jsで利用できる認証モジュール authを使うことによって非常に簡単にログイン・ログアウト等の機能を実装できる Auth moduleはVuexを使用して、ユーザの認証情報を管理しま セットアップ 以下実施 authおよびaxiosモジュールを追加する 認証ミドルウェアをセットアップする ローカルスキームを構成する オプションをカスタマイズする https://auth.nuxtjs.org/schemes/cookie $authサービスを利用する authおよびaxiosモジュールを追加 インストール
CloudWatch RUM を使って NuxtJS アプリのクライアント側のエラーをモニタリングしてみた | DevelopersIO
はじめに プロフィールビューアーサービス Proflly（プロフリー）の運用にて、エラーが発生している原因を調査することがあります。その際に再現性があるエラーの場合は、原因を突き止めやすいのですが、再現性がないエラーの場合、調査して原因を突き止めるのが難しい場合があります。 そういった場合に、クライアント側のエラー(Javascript のエラーなど)をモニタリングできると、エラー時の挙動がより調査しやすくなるので、CloudWatch RUM を実際に触って試してみました。 やってみること CloudWatch RUM にアプリケーションモニターを作成 NuxtJS アプリ(Single Page Application)に Amazon CloudWatch RUM Web Client を組み込む NuxtJS アプリでエラー（例外）を発生させる エラー内容をアプリケーションモニター
TypeScript を採用している Nuxt.js プロジェクトで @nuxtjs/storybook を導入してハマったポイント - odan blog
TypeScript を採用している Nuxt.js プロジェクトで @nuxtjs/storybook を導入してハマったポイント 追記: 2020-11-20 v3.2.0 のリリースでこの問題は解決されました。 @nuxtjs/storybook とは Storybookを簡単に使うための Nuxt.js のモジュールです。 従来は nuxt.config.js とは別に、Storybook 用の webpack.config.js を別でメンテする必要がありましたが、このモジュールが nuxt.config.js から Storybook 用の webpack.config.js を生成してくれるので、不要になりました。 yarn nuxt storybook build がエラーで失敗する このモジュールがリリースされて、真っ先にこのブログに導入しました。しかしドキュメントの通り
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NuxtJS で構築する LP・サイトコーディング開発環境｜TechRacho by BPS株式会社
TeleportHQでノーコードウェブサイト開発してみた(NextJS・NuxtJS・Gatsbyにエクスポート)
nuxtjs/composition-api の意外な利点と使い方
【ログイン機能】nuxtjs/auth-nextメモ
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp
news.yahoo.co.jp