nuxt generate + S3 + CloudFront + Lambda Edge で静的サイト構築＆ハマりポイントと解決法 - Qiita
nuxt generate + S3 + CloudFront + Lambda Edge で静的サイト構築＆ハマりポイントと解決法JavaScriptAWSgulpVue.jsNuxt Repsona LLCの@GussieTechです。「プロジェクト管理と情報共有のためのツール（プラグイン不要でガントチャート無料）」Repsonaを作っています。 前回の記事（Nuxt + Sails + TypeScript + Fargateでタスク管理ツールを作ったら快適だった話）でRepsona本体側の全体像をざっくりと書きました。今回はウェブサイトについてです。 Nuxt は静的ウェブサイト制作にも断然おすすめ https://repsona.com Repsona では本体のアプリケーションに Nuxt を採用していますが、ウェブサイトにも Nuxt を使っています。小規模なサイトをサクッと
2019年6月19日に行われたPWA Night vol.5で使用したスライドです。 リンク Nuxt.js : https://nuxtjs.org/ タムテブ : https://tamutebu-arabaki2019.firebaseapp.com/ タップ10 : https://tap10s.web.app/ Nuxt PWA : https://pwa.nuxtjs.org/ Workbox : https://developers.google.com/web/tools/workbox/ Workboxモジュールのドキュメント : https://pwa.nuxtjs.org/modules/workbox.html 【Nuxt.js】pwa-module v3におけるpreCacheの仕様変更 : https://qiita.com/gyarasu/items/1529
フロントエンドなエンジニアの皆さま、ご機嫌いかがでしょうか。 唐突な質問ですが、Internet Explorer 11というブラウザはお好きでしょうか。勿論大好きであられるかと存じ上げます。Webの歴史をまさにその身をもって築き上げてきた由緒正しきブラウザであります。唯一無二の王道です。昨今は様々なブラウザが溢れてあそばせております。しかし所詮それは一時的なこと。やがて全人類は母なるInternet Explorer 11の元へと還っていくことでしょう。 我々が目指したこと Internet Explorer 11（以下、IE11）を目にすること、操作すること、その他あらゆる接点を限りなく減らしつつ、プロダクトがIE11でも動作可能なことの検証と保証を行いたい。 これを成し遂げるエンジニアリング的な手段、つまりIE11環境でのE2Eテストを自動化することを目指します。 環境 自動化を行う
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態（入力／表示内容）を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要とな
この間、友人と焼き肉を食べていて、「Nuxt.js で Vuex の結合テスト書くのどうやってますか？」という話になったので、考えてみました。 Vuex の結合テストの定義 この記事では、アクションやミューテーション単体ではなく、 アクションをディスパッチした結果のステートやゲッターが意図通りになっているか確認するテストのことを、Vuex の結合テストと呼びます。 方針 Vuex の結合テストで課題となるのは、テスト対象の Vuex Store インスタンスの生成です。 今回は、（少し強引ですが）Nuxt.js のドキュメントのエンドツーエンドテストのサンプル( 開発ツール - Nuxt.js )をベースに Store インスタンスの生成を Nuxt.js に任せることにしました。 最初、モジュールモードの場合に Nuxt.js が内部でおこなっている Store オプションの組み立て(
Vueでキャンペーンサイトを作った話を自社の記事で投稿してしまい、同じネタを使おうとしたら、二重投稿禁止というのを知らなくて、焦りました。 似たような投稿するのもあれなので、なんか違う話題も書きます。 nuxt.js+expressのvue-cliテンプレートを使って、api+SSRのシングルページアプリケーション構成のマイクロサービスを作っています。 ちっちゃいページ+ちっちゃいAPIを使うとすごくいい感じにマイクロサービスを作ることができました。その良さを今回は語ります。 重要なものが最初から簡単に用意できる webpackの設定は自分でローダーを設定すると柔軟に設定する代わりに割と手間が増えます。 特にVueでお決まりのアプリケーションを作りたいときに、下の要件は欲しいでしょう。 シングルファイルフォーマットでの開発(vue-loaderの設定) linterの実行 シングルページで
メルペイ社で開催されたNuxtMeetup#2でNuxt.js入門してきた - #がみぶろ
こんにちは、しがないラジオのgamiです。 今日は、NuxtMeetup#2にブログ枠で参加してきたので、その模様をお伝えします！ 着席しました！ #nuxtmeetup— gami@しがないラジオ (@jumpei_ikegami) 2018年5月15日 当日は、主催の@kotamatsさんの挨拶で乾杯し、お酒を飲みながらLTを聞きました。 乾杯して始めるので来た方は一人一つ持っていってください！ #nuxtmeetup pic.twitter.com/wgK513X3YI— kotamat Laravue NuxtMeetup (@kotamats) 2018年5月15日 スポンサーLT Welcome to Nuxt Meetup @andoshin11 #nuxtmeetup スポンサーLT! pic.twitter.com/W8T4NTUDxh— kotamat Laravue
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
All slide content and descriptions are owned by their creators.
ESLint だけでもコード整形はできるようですが、Prettier のコード整形の方が優れているらしい。 Nuxt.js の公式ドキュメントの通り、併用して導入することにします。 Nuxt.js で ESLint を使う インストール $ npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier module.exports = { root: true, env: { browser: true, node: true }, parserOptions: { parser: 'babel-eslint' }, extends: [ "eslint:recommended", // htt
Nuxt.jsのプロジェクトで使用しているパフォーマンス向上のためのテクニックです。 .nuxt/dist と static ディレクトリはNginxから直接配信する 静的ファイルはNuxt.jsのサーバを使わずにNginxから配信します。CDNなどを使うともっと効果的でしょう。 location / { root /path/to/nuxt/static; try_files $uri @proxy; } location @proxy { proxy_pass http://127.0.0.1:3000; } location /_nuxt { alias /path/to/nuxt/.nuxt/dist; } APIエンドポイントをサーバーとクライアントで分ける SSRのサーバとAPIサーバが同一LAN内の場合は、余計なネットワークコストを発生させないように、SSR時はLAN内で通信
2018年4月21日、株式会社サイバーエージェントが主催するイベント「Battle Conference U30」が開催されました。30歳以下のエンジニアによる30歳以下のエンジニアのための技術カンファレンスである本イベントには、さまざまな領域で活躍する若手が登壇。企業の枠を超えて、自身の技術・事業・キャリアに関する知見を発表しました。「Nuxt.jsとGraphQLから見えたWeb開発の未来」に登壇したのは、株式会社スマートドライブの大木尊紀氏。Nuxt.jsとGraphQLを開発に用いるメリットと、今後のフロントエンドエンジニアの価値について語りました。 Nuxt.jsとGraphQLに見る、Web開発の未来 大木尊紀氏（以下、大木）：よろしくお願いします。「Nuxt.jsとGraphQLから見えたWeb開発の未来」とけっこう大層なこと言ってますけど、最後までお聞きください。 大木尊紀
nuxt-coreuiでデータサイエンスの可視化ダッシュボードを自作してみる - Lean Baseball
このエントリーは、Vue.js #3 Advent Calendar 2018アドベントカレンダー初日の記事です. 開幕投手をつとめます、@shinyorkeと申します. この記事では、「データサイエンスもいいけど自前で可視化ダッシュボード作ると面白いぞ！」っていうテーマで、 nuxt-core-ui vue-chartjs で実際作った時の勘どころやノウハウを紹介します. TL;DR データサイエンスに必要なダッシュボードを作りたくなったらnuxt-core-uiを使おうぜ！ nuxt-core-uiのグラフの動的更新はvue-chartjsのmixins.reactivePropで、API（データ）の呼び出しは普通にaxiosでやろう オレオレ分析基盤は作ると楽しい 完成イメージ データ（DBとか、何でもいい）をグラフで可視化する、Redash（の簡易版）っぽいダッシュボードの雛形をn
Nuxt is a free and open-source framework with an intuitive and extendable way to create type-safe, performant and production-grade full-stack web applications and websites with Vue.js. It provides a number of features that make it easy to build fast, SEO-friendly, and scalable web applications, including: Server-side rendering, Static Site Generation, Hybrid Rendering and Edge-Side Rendering Autom
Nuxt自体の動きを外部から変えたいと思ったことはありませんか? もちろん、ベタに nuxt.conf.js を弄るのもよいのですが、共通分に関しては切り分けて個別の部品として管理したいですよね。そんなときに、 モジュール が役に立ちます。 Nuxt モジュールができること モジュール は nuxt.conf.js で記述するようなビルドの動きを拡張することができます。例えば、ミドルウェアを追加したり、事前に特定のファイルを作成したいときなどに便利です。 一方で、Nuxt は混乱しやすい用語として プラグイン という仕組みが存在します。 プラグインは、Vue インスタンスと、サーバコンテキストから特定のオブジェクトを利用できるようにするために利用されるものです。 Nuxt モジュールからは、Nuxt プラグインを追加することができるので、使い分けとしては以下のようになります。 種類 用途
Nuxt.js 入門 - Qiita
はじめに この記事は、Vue.js Advent Calendar 2016 12日目の代打記事です。 Nuxt.jsとは？ Few hours after the announcement of Next.js, the idea of creating server-rendered Vue.js applications the same way as Next.js became inevitable: Nuxt.js was born. Next.jsのVue.js版。 特徴としては以下の点が挙げられている。 No need to write Webpack/Babel configuration No need to create a node.js server Writing *.vue files, because it rocks Creating new routes
2018 年に入ってからは Vue.js / Nuxt.js を採用した Web サイト開発に携わっています。ログイン機能がある Web サイトで、データは API サーバーを叩いて取得するという構成。最近のフロントエンド開発は、感覚としてはアプリ開発ですね。 Vue.js に加えて Nuxt.js を採用したのは SSR（Server Side Rendering）をしたいという理由に尽きます。SSR することによるメリットは、以下となります： Facebook や Twitter が OGP タグを正しく評価してくれる 検索エンジンがサイトを正しく評価してくれる 副産物として、ログインユーザー情報が描画されて返るため、クライアント側で描画されるまでの空白状態がユーザーに見えない この記事ではそんな Vue.js / Nuxt.js を採用した Web 開発で得た知見を紹介していきます。
Nuxt.js(v2)でgenerate納品する前にやっておきたい設定 Nuxt(v3)版書きました。 リリース情報確認URL Nuxt.jsのリリースノート create-nuxt-appのリリースノート node.jsのリリースノート VScodeのアップデート情報 動作確認済みバージョン Node.js(v14.8.0) npm(v6.14.7) Nuxt.js(2.14.4) create-nuxt-app(v3.2.0) macOS Catalina(v10.15.6) terminal(zsh) VScode(v1.48.2) 更新履歴 2020/9/1 nuxt.js(v2.13)から、generateプロパティーにroutesを設定しなくても大丈夫なようになっていたので該当箇所を削除。 2020/8/29 create-nuxt-app(v3.2.0)用にリライトしました。
Raspberry PI + Node.js + Nuxt.jsで30秒の間に光っているボタンが何回押せるかを競うゲームをDIYした - Qiita
作ったもの まずはこの動画を見てください。 このようなゲームを子供の頃体験しませんでしたか？30秒の間に光っているボタンが何回押せるかを競うゲームです。なかなか大きいものですし、市販されていません。なければDIYで作る。ということで作りました。 アーキテクチャ概要 全体図は上図のようになります。 まずはボタンの機構を確認してみる ボタンを開けて確認してみると、ちゃんと回路的には別になっています。 これなら好きな場所を光らせたり、押されたところを判別することができますね。 これをボタンに入れるとこんな感じ。 LEDとRaspberry PIとの通信 LEDに関してはGPIOという仕組みを利用してピンのモードを出力（OUTPUT）にし、回路の電圧をHIGHにしたりLOWにすることでLEDを光らせたり、消したりすることができます。 出力 LEDの状態
Goでの小さいweb開発について 依頼されて開発をして、3年近く小さめのwebサイトをGo + Revelで運用してきて正直そこまで恩恵を受けれなかったように感じる。ので以下のように構成変更した。 Before 言語: Go v1.9 パッケージ管理: dep フレームワーク: Revel v0.21.0 ORM: GORM ミドルウェア: なし、cacheはrevel cache DB: MYSQL 開発環境: Docker CI/CD: CircleCI こうなるまでにも3年間でいろいろしたんですが、いろいろ問題がありました。 Beforeの問題点 Revelが思ったほど盛り上がらなかった GoでのフルスタックなMVCフレームワークとして前は盛り上がってたけど・・・ Web開発のためのモジュール追加があまりなかったので自前で実装した部分がとても多かった Goの変遷がめんどかった Goを
かねてから作りたかった動体検知と画像判定を用いた猫監視アプリを作成することができたので、ご紹介です。 完成したもの FirebaseにホスティングされたPWA対応のWebアプリです。 ラズパイのカメラが猫を検知すると、画像がアップロードされ、飼い主にPush通知が飛びます。 ソースコード ソースコードは下記のリポジトリで公開しています。 機能一覧 動体検知による画像取得 画像判定 Google認証 画像一覧 PWA Push通知 モチベーション 以下のモチベーションから、本システムを開発しました。 家に不在の時、飼い猫が何をしているのか気になった WebアプリでFirebaseを使い倒してみたかった 開発工数 ざっと3人日ほどです。 会社の開発合宿を利用して開発しました。 開発合宿ってどんなものか気になる方はこちら。 採用技術 本システムで採用した技術は下記の通りです。 infra(Fir
NuxtもNextもSvelteも推し！フロントエンドエンジニアがアンドパッドでみつけた意外な夢 | ANDPAD_Engineers
2020年8月に入社したフロントエンドエンジニアの市川さんは、アンドパッドに入社後、持ち前の才能を開花させた一人です。プロダクト開発のみならず、勉強会や採用にも深く関わり、さらには組織づくりにも携わっています。「環境を変えることで、新たな技術領域にチャレンジできるだけではなく、一人の人間として、より大きな目標と出会えることもある」。そのような可能性を感じていただけるインタビューです。ぜひ最後までお読みください。 市川 夕貴（いちかわ ゆうき） 高校時代に『ブラッディ・マンデイ』（TBS）に影響されエンジニアを志す。大学時代はインターンでiOSのアプリを開発。卒業後はゲーム攻略サイトや求人メディアでフロントエンドエンジニアとして活躍。2020年8月にアンドパッドに入社。「ANDPAD」Nuxt化プロジェクトチームにジョイン。現在は「ANDPAD黒板」などのプロダクト開発やフロントエンドエンジ
こんにちわ、ななきです。 だいぶ前にVueをTypeScript化した的な記事書いたのですが、それから案件でもTS化したVueを使っていたのと最近の界隈の流れもありNuxtもTypeScript化してみました。 結果的にデコレータを使わずに、vuexもコンポーネントも型が効いており満足です。 ちなみにvuex部分にかんしてはこちらのリポジトリを参考にさせて頂きました。 コンポーネントのTS化 コンポーネントに関してはびっくりするほどやることないです。 $ yarn add ts-node $ yarn add -D @nuxt/typescript $ touch tsconfig.json $ nuxt build
はじめに これはVue.js #2 Advent Calendar 2017の16日目の記事です ぼくの前日は ykhirao - Qiitaさん、Vue.jsでv-forをネストする - Qiitaでした 本記事はぼくがWebの初心者なだけなので、そこまで初心者向けではないかもしれません 追記：2018/11/30 2017/12/27に@altさん、 2017/12/18, 2018/09/05に@khskさん 2018/10/22に@tryforthさん、 2018/11/29に@masalennonさんから修正を頂きました ありがとうございます！😊 ぼくのバックエンド ぼくがどれくらいWeb初心者かをざっくりと説明すると今までの仕事の９割はiOSで1割はAndroidです。そのうちNativeアプリ率は100%で、JSを使用した回数は0回です そんな中お客さんのWebサイトのリニ
Nuxt.jsというかSSR関係を触る際にまず疑問になるのは「どこまでがサーバーサイドレンダリング (SSR) でどこからがクライアントサイドレンダリング (CSR) なの？」ということだと思います。 基本 サーバーからロードされる時はサーバーサイドレンダリング ロードされた以降はクライアントサイドレンダリング 簡単に言えば、ブラウザでURL直接指定で開けばSSR、それ以降はCSR、ということになります。 当たり前ですが、サーバーサイドレンダリングはサーバーでの実行なので、windowオブジェクトも存在しないし、そこから外部サーバー（APIサーバーなど）にアクセスする際はそこからのアクセスになります。そのままではブラウザのcookieも利用できません。 axios-moduleは何をしているのか 上記の通り、SSRになった場合とCSRになった場合は通信経路も変わるしcookieの取扱も変わ
nuxt/content で作成した Web サイトで Markdown 内の画像を Native Lazy-loading を行う
nuxt/content で作成した Web サイトで Markdown 内の画像を Native Lazy-loading を行う2020/09/02 普段ブログや技術メモを書くとき、お手軽な画像ホスティングとして Gyazo を利用していたりします。 Patreon を開設していた頃に OSS の README に貼る GIF をサクッと取りたいという動機で Gyazo Pro を契約後、もう2,3年 Pro を継続。画像アセットの管理が結構面倒なのもあって、無限に使えてちゃんとホスティングされることが担保されていることから、このブログでも画像は全て Gyazo に載せていたり。 あと個人的に増井さんのファンなのもあって、長らく愛用しています。 Gyazo 自体は便利で愛用している一方、無計画にスクショを撮って Copy Markdown Snippet をし続けると当たり前にサイトが
これから注目されること間違いなしの CSS フレームワークです。 Tailwind CSS では、UI コンポーネントを提供するのではなく、CSS の class を提供するだけなので、用意された class を指定するだけなので簡単に複雑な UI を作成することができます。 公式ドキュメントを元に Flex の例を見てみましょう。 class を見るだけで大体なにをしているかわかると思います。 Tailwind CSS を採用した理由僕は、割とフロントエンドには自信があります。デザインもかじってる系です。 UI フレームワークだとちょっといじろうと思うと逆にコストがかかるケースが多く、コンポーネント作成や見た目はこっちでやるから class だけ提供してくれとずっと考えており、そんな中 Tailwind CSS と出会ったので採用しました。 英語もできないので正直 class 名を考える
この記事は「Nuxt.js で Markdown ベースのブログを構築する」シリーズの一部です。 Nuxt.js で Markdown ベースのブログを構築する（Markdown 編） Nuxt.js で Markdown ベースのブログを構築する（Nuxt.js 編） Nuxt.js で Markdown ベースのブログを構築する（サイトパフォーマンス編） ← ここ 今回はサイトのパフォーマンスをあげるためにやったことをまとめる。 サイト構築初期の状態 サイトを構築したばかりの頃の Lighthouse のスコアは次のような感じだった。 サイト構築初期の Lighthouse のスコア 「Progressive Web App」のスコアが低いのは、Service Worker を使っていなかったのが要因で、「Accessibility」と「SEO」のスコアが低いのは、単に自分が書いたマー
Nuxt.js + FirebaseでOGPの仕組みを完全に理解した 〜俳句をSVGで描画するサービスをリリースした話〜 - Qiita
TL;DR(要約) Nuxt + Firebase を使って俳句を作成できるサービスを作りました 俳句メーカーはこちら 簡易チュートリアルサイトのソースコードはGit Hubにあげてます 自己紹介 個人的なプロジェクト「毎月サービスリリースで技術もノウハウもうっはうは祭り」をしています、ミツダマ(@mitudama)です。 1月の時間割メーカーに引き続き2月は俳句メーカーをリリースしました！ ノウハウうっはうはになったのでシェアします！ 作ったサービス 【新サービスリリース】 ・業界のあるあるをみつけたとき ・ジェネレーションギャップを感じたとき ・ブラック企業に疲れ果てたとき その気持ちを17文字にまとめてみませんか？ 「俳句メーカー」をリリースしました！！🎉🎉🎉https://t.co/xfdJaKbbCx 俳句を気軽につくってシェアしましょう♪ — ミツダマ@500円プログラマ
Nuxt + Contentful + Firebase Hosting のJamstackを使ったサービス開発 | GiFT（ギフト）株式会社
Nuxt + Contentful + Firebase Hosting のJamstackを使ったサービス開発2019.12.13 今年はContentful芸のブログばかり書いていたら、Jamstackおじさん（通称Jamおじさん）になってしまいました。 今回は実際にリリースしたサービスでどのように実装したかを書いてみたいと思います。 最終更新 : 2019/12/16 今年はコーポレートサイトやオウンドメディアの開発には ContentfulやFirebaseを使ったサーバーレスな構成を多用させていただきました😇 2019年にContentfulを使って作ってきたものは、表に出せるもので以下のものがあります。 株式会社Neo Sports様 コーポレートサイト大崎電気工業株式会社様 farmwatch ブランドサイト弊社コーポレートサイトそれらの開発の中で知見が溜まってきたな〜とい
Nuxt Bridgeを使ったNuxt3の導入調査してみた - for Startups Tech blog
こんにちは。エンジニアの大野です。主にフロントエンド周りを担当しています。 去年の話題にはなりますが、2021年10月にNuxt3のベータ版がリリースされました。 Nuxt3beta 公式のリリーススケジュールでは、このブログを書いている2022年3月にrc版、 そして2022年6月には安定版をリリースする予定となっており、着々とバージョンアップへの準備が進められている雰囲気が伺えます。 弊社にもNuxt2の環境で運用しているプロジェクトがあるのですが、vue3のリリース直前に作成した環境であるため、Composition Api やTypeScriptは別途runtimeやbuildのモジュールを個別に入れたりしており、package.json やnuxt.config.ts の設定周りがやや煩雑になっていました。 Nuxt3ではこのあたりのモジュールが標準搭載されるということもあり、チ
Nuxt v3はどうなるのか - Qiita
2020/09/19にめでたくVue.js v3がリリースされました🎉 さて、私の関心は業務でも利用しているNuxt.jsがVue.js v3に対応するとどうなるのか、Nuxt.js v3はどうなっていくのか気になっています。 Vue.js Amsterdamで紹介されたNuxt.js v3のスライドから個人的に気になったところを抜粋して紹介します。 The State of Nuxt by Sébastien Chopin Nuxt 3 Architecture Updates by pooya parsa 詳しくはスライドを参照ください。 TypeScriptのサポート core や vue-appが型付になる @nuxt/typesやnuxt-tsが不要になる VueComponentのTypescriptサポート（SFC？） ランタイムとnuxt.configのサポート 現状はN
【WordPress脱却】APIベースなCMS「Contentful」と Nuxt.jsでブログシステム爆速構築の巻【ちゃんとSSRでSEO】
【WordPress脱却】APIベースなCMS「Contentful」と Nuxt.jsでブログシステム爆速構築の巻【ちゃんとSSRでSEO】 まず、Contentfulとは何か？ Contentful公式(英語)にある、キャッチを訳してみると… CMSがソフトウェアを出荷する途中に入ってはいけません。 Contentfulは、チームがあらゆるデジタル製品のコンテンツにパワーを与えることを可能にするコンテンツインフラストラクチャを提供します。 コンテンツインフラ！ おお！これだ！(こういうの探してたw) WordPress(PHP)が好きじゃなくて、JavaScriptだけで構築できるWordPressみたいなCMSを探してたら、Qiitaの記事がヒットして発見〜♪ ↓その記事はこちら 次世代Headless CMS「contentful」事始め 上の記事見たら簡単に開始できました！ Co
Webサイト制作のチュートリアル連載「Nuxt de Portfolio（全５回）」を始めます！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのライダーです。 2018年 秋に Nuxt v2 がリリースされたこともあり Nuxt.js（以降、Nuxt） が人気を博しています。これまで興味がなかったあなたも、その人気ぶりから少し Nuxt への興味が湧いてきたころではないでしょうか？ LIGにも着実にその流れはきており、シングルページアプリケーション（以降、SPA）やそのサーバサイドレンダリング（以降、SSR）以外のWebサイトでも、Nuxt を導入して快適コーディングする事例が増えてまいりました。 そこで今回から「ポートフォリオサイトの作成」を題材に、Nuxt を使ったWebサイト制作をチュートリアル式に進めていきたいと思います。 本連載「Nuxt de Portfolio」の目的 冒頭でも話しましたが、いま日本で、Nuxt はどんどん広まってきており、ドキュメントも充実し、Tips系の記事
こんにちは、@y_temp4 です。 自分は ALIS という会社で主にフロントエンドまわりの実装を Nuxt.js を用いて行ってきたのですが、今回はそこで得た知見について共有しようと思います👍 内容としては以前 JSer.info 400回記念イベント にて発表した Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) を元に、そこでは話しきれなかった点や、新たに得た知見などについてご紹介します。 Nuxt を選定した理由 実際の開発の話に入る前に、Nuxt の選定理由について触れておきます。 ライブラリ・フレームワークを選定するときにはさまざまな観点がありますが、ALIS が Nuxt を選定した理由は主に以下の2つです。 開発速度を重視したかった 技術選定をする際に候補として React / Next なども挙げられましたが、Vue / Nuxt を
本記事では、noteのフロントエンドについて2つトピックを紹介します。Nuxt.jsへの移行が完了した話と、見えてきた課題を踏まえ次世代のフロントエンド構築を模索している話です。 Nuxt.jsへの移行が完了noteでは、AngularJSで構築していたフロントエンドをNuxt.jsに移行するプロジェクトを2018年から進めていましたが、2021年12月、ついに移行が100%完了しました！ 最初の1年弱は移行プロジェクトを組み専任リソースを張って実装し、ページ単位で移行していました。手順の型ができて不確実性が減ってからはローコスト運用に変えて少しずつ進め、約3年で全てのプロセスが完了しました。移行の動機、Nuxt.jsの選定理由、移行プロセスなどはこちらの記事を参照いただければと思います。 移行した結果、どうなったか？Nuxt.jsへの移行により以下のような恩恵が得られました viewレイ
初めてのVue.js（Nuxt.js）開発業務を始める前に学んでよかった技術書・記事まとめ - 仮想サーファーの日常
フロントエンド開発の経験がなかったのですが、4ヶ月ほど前に始めた副業先で急にVue.js（Nuxt.js）でフロントエンド開発することになりました。 「急いでVue.jsを学ばないと！フロントエンド開発はじめてだけど何から学べば！？」 と色んな情報や学習ツールをあさりつつ四苦八苦したので、後世のフロントエンド（Vue.js）開発入門エンジニアに向けて参考になった情報をまとめておきます。 これからVue.js（Nuxt.js）で開発をしようとしている方の参考になれば幸いです。 Vue.js（Nuxt.js）の学習内容と技術書・記事 Vue.jsを業務で扱えるようになるために学習したい内容には、ざっと以下があります。 Vue.jsを業務で扱えるようになるために学習したい内容 JavaScriptの基本（Vue.jsの理解を進めやすくするために必要） JavaScriptの開発方法（JavaSc
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作るFirebasePWANetlifyJAMstackNuxt 長々としたタイトル通りのブツを作りました。 その技術内容を紹介をします。 ブログサイト STUDIO Blog | Webデザインのための、クリエイティブメディア Studio Designのマーケティングブログです。 元々Mediumを使っていたところから新規に作ることになったのですが、「じゃあ当然headless CMSでCDNでPWAなサイトですよね！？」と自分なりのフロント技術観を振りかざしてしまいました。 パフォーマンス キャッシュなしのファーストページはまあまあ及第点でしょうか。 遷移時や再訪時だとキャッシュ優先でネットワークを待たないのでより速くなります。 技術構成 まずはコンテンツのデータベースを選びます。
こんにちは！フロントエンドエンジニアの土屋 (@tutti2612) です。 いよいよ Nuxt 2 の EOL が迫ってきましたね。 nuxt.com 先日、弊社でもとあるプロダクトの Nuxt 3 への移行を完了させました。 メドピアでは既に複数のプロダクトで Nuxt 3 への移行を行ってきましたが、今回の移行では今までとは違ったアプローチを取りましたので、その詳細をお伝えしたいと思います。 これから Nuxt 3 への移行を考えている方にとって、少しでもお役に立てれば幸いです。 今回の移行の特徴 Nuxt Bridge の使用 積極的な新機能開発を行いながらのビッグバンリリース 成功の要因 Nuxt Bridge の使用 週 1 回の定例ミーティング エンジニア以外の協力を得た手厚い手動テスト 巨人の肩に乗ることができた こうすれば良かった おわりに 今回の移行の特徴 今回の移行の
GitHub - nuxt-community/python-module: Write Nuxt 2 applications using Python! [Experimental]
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
![GitHub - nuxt-community/python-module: Write Nuxt 2 applications using Python! [Experimental]](https://cdn-ak-scissors.b.st-hatena.com/image/square/827d225531b2162575f41ce639628ea205aaad02/height=288;version=1;width=512/https%3A%2F%2Fopengraph.githubassets.com%2F6dcdae9390294b44046ef292502379199b18f6c625d2aaba25c87deaf0dd49fa%2Fnuxt-community%2Fpython-module)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsのPWAモジュールは何をやっているのか
Nuxt利用プロダクトでIE11と仲良くするためのE2E - メドピア開発者ブログ
Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう
Nuxt.js で Vuex の結合テストを書く方法を考えた - kitak blog
マイクロサービスを作るのに、nuxt.jsが最高だった話 - Qiita
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
Web初心者がNuxtでサイトを一つ作るまでの技術選定.pdf - Speaker Deck
Nuxt.js で ESLint ＆ Prettier を導入する - Qiita
Nuxt.jsのパフォーマンス向上テクニック - Qiita
Nuxt.js＋GraphQLを導入してみて感じた、フロントエンドエンジニアのこれから
GitHub - nuxt/nuxt: The Intuitive Vue Framework.
Nuxt モジュールパーフェクトガイド 🍜 Nuxt.js 2.15 🍜 TypeScriptでの開発対応
Vue.js / Nuxt.js を採用した Web 開発で得た知見 | rakuishi.com
nuxt.js(v2)でgenerate納品する前にやっておきたい設定 - Qiita
GO + Revelで開発していたものをLaravel + nuxtで置き換える - Qiita
Firebase + Nuxt.js + RaspberryPiで作る猫監視システム - Qiita
Nuxtでデコレーターを使わずTypeScriptを書いてみた | Mix Design
Web初心者がVue.jsから始めてnuxt.jsでサイトを作ったときにやったことまとめ - Qiita
Nuxt.jsにおけるサーバーサイドレンダリングの挙動とライフサイクル - nazolabo
Nuxt.js + Tailwind CSS で爆速コーポレートサイト作成
Nuxt.js で Markdown ベースのブログを構築する（サイトパフォーマンス編） - jmblog.jp
Nuxt.js を用いた新規事業開発を半年以上経験して得た知見 - Qiita
noteのNuxt.jsへの移行が完了し次世代のフロントエンド構築を進めています｜こんぴゅ
Firebase、Flamelink、Nuxt、Netlify、PWAを使ってJAMstackなブログを作る
Nuxt 3 への移行に Nuxt Bridge を使うのはいかが？ - メドピア開発者ブログ