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
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はWebページの一部分を部品として再利用できるコンポーネント機能を説明しました。今回は、Webページの入力内容や表示内容といった状態を集中管理できるVuexストアについて説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Webページを複数のコンポーネントに分割できるJavaScriptフレームワークでは、あるコンポーネントの状態（入力／表示内容）を他のコンポーネントで利用する場合、不整合なく状態を共有する仕組みが必要とな
概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提）なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か？ ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
Nuxt自体の動きを外部から変えたいと思ったことはありませんか? もちろん、ベタに nuxt.conf.js を弄るのもよいのですが、共通分に関しては切り分けて個別の部品として管理したいですよね。そんなときに、 モジュール が役に立ちます。 Nuxt モジュールができること モジュール は nuxt.conf.js で記述するようなビルドの動きを拡張することができます。例えば、ミドルウェアを追加したり、事前に特定のファイルを作成したいときなどに便利です。 一方で、Nuxt は混乱しやすい用語として プラグイン という仕組みが存在します。 プラグインは、Vue インスタンスと、サーバコンテキストから特定のオブジェクトを利用できるようにするために利用されるものです。 Nuxt モジュールからは、Nuxt プラグインを追加することができるので、使い分けとしては以下のようになります。 種類 用途
Raspberry PI + Node.js + Nuxt.jsで30秒の間に光っているボタンが何回押せるかを競うゲームをDIYした - Qiita
作ったもの まずはこの動画を見てください。 このようなゲームを子供の頃体験しませんでしたか？30秒の間に光っているボタンが何回押せるかを競うゲームです。なかなか大きいものですし、市販されていません。なければDIYで作る。ということで作りました。 アーキテクチャ概要 全体図は上図のようになります。 まずはボタンの機構を確認してみる ボタンを開けて確認してみると、ちゃんと回路的には別になっています。 これなら好きな場所を光らせたり、押されたところを判別することができますね。 これをボタンに入れるとこんな感じ。 LEDとRaspberry PIとの通信 LEDに関してはGPIOという仕組みを利用してピンのモードを出力（OUTPUT）にし、回路の電圧をHIGHにしたりLOWにすることでLEDを光らせたり、消したりすることができます。 出力 LEDの状態
かねてから作りたかった動体検知と画像判定を用いた猫監視アプリを作成することができたので、ご紹介です。 完成したもの FirebaseにホスティングされたPWA対応のWebアプリです。 ラズパイのカメラが猫を検知すると、画像がアップロードされ、飼い主にPush通知が飛びます。 ソースコード ソースコードは下記のリポジトリで公開しています。 機能一覧 動体検知による画像取得 画像判定 Google認証 画像一覧 PWA Push通知 モチベーション 以下のモチベーションから、本システムを開発しました。 家に不在の時、飼い猫が何をしているのか気になった WebアプリでFirebaseを使い倒してみたかった 開発工数 ざっと3人日ほどです。 会社の開発合宿を利用して開発しました。 開発合宿ってどんなものか気になる方はこちら。 採用技術 本システムで採用した技術は下記の通りです。 infra(Fir
本記事では、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
最近のNuxt.js関係の仕事内容
最近の Rails 関係の仕事内容 - r7kamura.com 最近の Rails 関係の仕事内容｜はっさんブログ｜ note を参考に、自分も書いてみます。 ここ最近は Nuxt.js を用いた開発の仕事をしており、新規機能開発や現行の機能の改修のほかに、開発体験をよくするためのタスクを消化していくことが多いです。 以下に、改善系のタスクで実際にどのような仕事をしてきたか雑にまとめてみます。 Nuxt.js のバージョンアップ TypeScript の導入 Vuex に型を付与 フロントエンドからの API 呼び出し方法の見直し 無駄なリクエストの削除 無駄なコンポーネントの削除 不要な layout ファイル の削除 エラーハンドリングの方法の見直し 監視ツールの導入 分析ツールの導入 sitemap の設置 フロントエンド開発のためのドキュメントの整備 無視されている ESLint
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
$ npm -v 6.13.2 $ node -v v12.13.1 $ yarn -v 1.21.0 $ create-nuxt-app -v create-nuxt-app/2.12.0 darwin-x64 node-v12.13.1 $ create-nuxt-app tutorial create-nuxt-app v2.12.0 ✨ Generating Nuxt.js project in tutorial ? Project name tutorial ? Project description My super-duper Nuxt.js project ? Author name chibi929 ? Choose the package manager Yarn ? Choose UI framework Buefy ? Choose custom server fr
「Nuxt.js」の基本、「Vue.js」の利用方法を知ろう
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回はVue.jsとNuxt.jsの概要を説明しました。今回はNuxt.jsでUI構築に利用するVue.jsについて、基本的な利用方法を説明します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の機能を追加して、まとめて提供するフレームワークです。そのため、Nuxt.jsの機能を使いこなすためには、まずVue.jsの利用方法を知っておく必要があります。 Vue.jsでは、データとWebページの表示を関連付けるデータバインディングやイベント処理、条件分岐や繰り返しなど、動的なWebページを
「Think ! FrontEnd by DMM」は、DMM Group のフロントエンド及び JavaScript における開発現場の「今」を話しながらみんなで考えるコミュニティです。樋口氏から、Nuxt、TypeScript、GraphQLを使ったSPA開発での気づきを発表しました。 事業部初導入のGraphQLとTypeScriptを使ったSPA開発に参加 樋口鉄朗氏：合同会社DMM.comオンラインイベント事業部の樋口鉄朗です。（※取材当時）今回は「Nuxt × TypeScript × GraphQLで開発した際のつらみ」についてのTipsを説明していきたいと思います。よろしくお願いします。 私は公立はこだて未来大学出身で、2019年に新卒でDMM.comに入社しました。趣味は自転車に乗ったり、旅行したり、ドライブに行ったりすることで、多趣味なエンジニアです。 以前は動画配信事業
【挫折経験アリ】プログラミング未経験から独学10カ月でAWS,Laravel,Nuxt.js製webサービスをリリースするまで - Qiita
【挫折経験アリ】プログラミング未経験から独学10カ月でAWS,Laravel,Nuxt.js製webサービスをリリースするまでAWS初心者Laravel個人開発Nuxt プログラミング初心者こそ個人サービス作るべき 一度プログラミング学習に挫折したこともある僕ですが、学習を再度開始して半年ほど経ってから個人開発を始めました。 まず前提ですが、この記事は以下の方向けです。 プログラミング頑張りたい初心者 プログラミング学習継続してるのに中々成果が出ない方 個人開発でアプリケーションつくりたいから参考にしたい方 少しでも、プログラミング初学者の方の学習継続のヒントになれば幸いです。 まず初めに、一念発起して本気で個人開発したwebアプリがこちらです。 サービスの目的は3つあります。 1. オンラインイベントの開催にかかる負担を減らす。 2. 難しいイベント集客のサポートのため、出不精の人でも集
Nuxt.jsのSSR/CSR処理について
はじめに Nuxt.js の SSR/CSR の処理がどう動いているか（ライフサイクル）、また、安全な処理を書くにはどうしたらいいのか、いまいち分かっていない方や曖昧な方も多いと思います。 今回の記事では、Nuxt.js での開発における SSR/CSR 処理とセキュアなデータの取り扱いについて少し書きます。 ライフサイクルを理解し、Nuxt.js でどのように情報を扱うべきか検討しやすくなります。 AWS や GCP、Firebase、Azure など、クラウドサービスと連携するにあたりセキュアな情報の取り扱いで悩むことが出てくると思います。 AWS でいうと AppSync や API Gateway、S3 などの各種サービスに接続するための認証情報をどのようにフロントエンドで安全に扱うか、という点は気になるポイントだと思います。 この記事は直接ある特定のサービスへの接続方法のソリュー
今年6月に、実践TypeScript という書籍で、Nuxt.js に TypeScript を導入する方法を執筆させて頂きました。「書籍で扱っている Nuxt.js のバージョンが少し古いけど、今現在はどうするのが良いの？」という読者の方から寄せられた疑問に、アップデートとして私的見解をここにまとめました。（といっても、すでに日本語の良記事で紹介されている内容と変わりなく、n番煎じですmm） typescript.nuxtjs.org 少し日が経ちましたが、Nuxt.js の 公式TypeScript導入ガイド が公開されています。このガイドは、最新の Nuxt 2.10 以降向けとして書かれています。更新が目的であれば、Migration from Nuxt 2.8 を必ず確認するようにしましょう。 custom server framework で異なる型定義 基本的に 公式Type
Vue.jsベースのNuxt.jsとReactベースのNext.jsは、人気のフロントエンドフレームワークとしてよく比較されますが、実際どんな違いがあるのか、様々な角度から表とグラフにまとめてみました。 2021/07/03、雇用需要比較の情報を更新しました。
WordPressサイトをWP REST API + Nuxt.jsでリニューアルした際のポイントまとめ | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
先日Glatchのポートフォリオサイトをリニューアルしました。 前回の記事では妻がポートフォリオの設計・デザインプロセスに関して投稿してくれました。 今回は実装編です。 普段は技術系の記事はテックブログに書いているのですが、ポートフォリオの宣伝も兼ねているので今回はこちらに投稿します。良かったらテックブログも見ていただけると嬉しいです。 さて技術面に関してはせっかくリニューアルするのでこの機会に新しい技術を試したい、でもWordPressで管理してきた資産はできればそのまま活かしたい、という2つの要望が自分の中にありました。 この2つを両立させるためにコンテンツ管理には引き続きWordPressを使用し、フロント部分にモダンなフレームワークを採用することで要望を満たしました。 検討の結果WP REST API + Nuxt.jsというJAMstackな構成で構築することにしました。 本記事
この記事は 今年イチ！お勧めしたいテクニック by ゆめみ feat.やめ太郎 Advent Calendar 2019の3日目の記事です。 プログラミング初級者がNuxt.jsの高速化するのにストレージにキャッシュしてみたら、色々捗った事を書きます。 わいさん風を取り入れてみました。少しなまりが間違っている箇所があるかもしれませんが、ご容赦下さい。 Nuxt.jsでSSRしたら最速なのか？ ある日の転職したくて、ポートフォリオアプリを作っているワイ。 ワイ 「Nuxt.jsでサーバーサイドレンダリングが簡単に出来るみたいやな。」 ワイ 「サーバーサイドレンダリングで、アイソーモフィックでユニバーサルなシングルページアプリケーションで作ってみました、とか面接で言えば転職間違いなしやな」 ワイ 「ヘッドレスCMSが流行ってるみたいやな。Blogアプリとかいいやん。作って自分で勉強した事をアウ
概要 仕事でNuxtとLaravelでSPAを構築する機会があったため環境構築方法を備忘録として残しておく。 バージョン Nuxt: 2.14.x PHP: 8.0.x Laravel: 8.x PostgreSQL: 12.x 前提 Laravelの公式では認証でSanctumを利用することを勧めていますが、 Multi認証方法が調べてもでてこなかったためSession認証を使って実装する。 Sanctumを利用する場合はこちらの記事を参考にしてください また、各種Dockerfileの説明は記事の長さの関係上省略してあります。 コードはこちらからご確認ください。 構成図 Nuxt側設定 完成品 docker-compose 構成図の左のようにNuxtコンテナだけの構成にしてあります。 Backendとの通信を可能にするためにNetworkをBackendで定義しているsample-sp
Nuxt.js(Vue.js)SSRのライフサイクルを完全に理解したい(wip) | miyazaki develop log
最近、Nuxt.jsで開発をする機会をいただいたもののnuxtのライフサイクルになかなかつまずいたのでまとめてみました。 fetchやmounted、createdなどはなんとなくわかったものの、middrewareやpluginsが混ざると本当によくわからなくなる。。 まだまだnuxt.js2ヶ月と超絶初心者で網羅できてないライフサイクル + 間違いもあるかと思いますので、随時更新予定です。 検証するライフサイクル SSR(サーバーサイドレンダリング)とCSR(クライアントサイドレンダリング)で頭がごちゃごちゃになるかと思いますので 別々で書いていきます。 SSRは、URLで直接アクセスされた際に、動くもの。 CSRは、nuxt.js上のアプリケーション上でリンククリックされた際にに動くもの。 として考えています。 検証コードは下記の通り。 念のため、全部に process.server
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
WordPress / Vue(Nuxt.js) / React(Next.js)の3つの方法でWebサイト構築してみたメモ
修正履歴 (2021.9.18)開発環境をつくる > React(Next.js)の場合 (2021.5.5)開発環境をつくる > Vue(Nuxt.js)の場合 > 4.(オプション)Sass(SCSS)が使えるようにする はじめに この記事はWordPressをCMSとして使用し、WordPress本体でのWebサイト構築、SSG(静的サイトジェネレータ)と呼ばれるVue(Nuxt.js)、React(Next.js)を使って構築してみて、構築方法や運用周りの違いのメリットやデメリットを書いてみます。 目的 開発者視点で、表示速度の早く快適なパフォーマンスを得られるwebサイトが構築できる技術選定ができるように。 閲覧者視点で、実際上記が体感ができるようにプロトを用意。 運営者視点で、新規ページ追加や、更新など柔軟にできるのかとか。 私の知識整理 私の知識整理 なぜWordPressか
本文書ではNuxt.jsのモジュールnuxtjs/authを使い、Tokenを利用したJWT(JSON WEB TOKEN)のAuth(認証)の設定を行っています。Nuxt.jsでJWTの認証を行うためにはバックエンドが必要になります。バックエンドにはNodeのExpress.jsを使って構築します。本文書を読むことでNuxt.js環境下でTokenを利用したユーザ認証の設定手順の流れを理解することができます。 Tokenを使った認証の設定が行えることを本書の目的としているため入力フォームのデザイン、バリデーションやセキュリティについての説明は行っていません。特にセキュリティについてはJWTの設定方法がわかった後にしっかりと勉強してください。 Express.jsを使ったバックエンドの設定については一緒に記述すると文書が長くなるためまたフロントエンドにNuxt.jsを利用した場合のみ利用で
JSer.info #527 - TypeScript 4.2 RCがリリースされています。 Announcing TypeScript 4.2 RC | TypeScript Tuple TypesでRest Elementをサポート、Type Aliasの型追跡の仕組みを改善して表示される型が分かりやすくなるように。 また、オブジェクトではないオペランドに対してin演算子を利用した場合に、コンパイルエラーとなるように変更。 その他には、noPropertyAccessFromIndexSignatureオプションの追加、abstract newのサポート、--explainFilesフラグが追加されています。 TypeScript 4.2 Betaの時点では、Template Literal式をデフォルトでTemplate Literal Typeとして扱うように変更されていました。
東京都、Vue＋Nuxt.jsで構築した「新型コロナウイルス感染症対策サイト」をNetlifyで公開：GitHubでソースコードやIssueを共有 東京都は、「新型コロナウイルス感染症対策サイト」を公開した。VueやNuxt.jsなどのJavaScriptフレームワークやホスティングサービスのNetlifyを活用している。
ウェブの技術を使い、またウェブサイトとしてホスティングしながらも、モバイルやデスクトップのアプリとして振る舞うことができる PWA。最近では Google Play Store でも配信できるようになったり、iOS での対応強化など話題に事欠きません。 そんな PWA を簡単に高速に開発することができる Nuxt.js を紹介するとともに、今後さまざまな機能を試すためのベースアプリを作ります。 シリーズの記事 Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る(本記事)Nuxt.js PWA(Progressive Web Apps) のベースアプリをTypeScript対応する環境 本記事の開発環境は以下となります。 Windows 10 64bit + WSL Ubuntu 18.04.1 LTSVisual Studio CodeNode.j
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみた - Qiita
Nuxt.js、Google Apps Script、スプレッドシート（DB）を組み合わせて検索アプリケーションを作ってみたJavaScriptGoogleAppsScriptVue.jsclaspNuxt Google Apps Script（GAS）で Nuxt 動かしてみたら面白いのでは？ と思い試していたら動いたので、スプレッドシートをDBにして検索アプリケーションを作ってみました！ Nuxt.js の SPAモードを GAS を使って実際に GAS で Nuxt を動かしているURL https://script.google.com/macros/s/AKfycbw9rOqkFPqP4Ym3n7goiL0tI4V3cx0UTOjVM8DTHT8FRG3ogjJs/exec そして Google サイトで上記 URL を埋め込んで完成です。（GAS の 分かりづらい URL を隠
PHP Conference 2020 Track4
JSer.info #450 - Vue.jsをつかったフレームワークであるNuxt.js 2.9.0がリリースされました。 Release v2.9.0 · nuxt/nuxt.js v2.5.0で本体に統合されたTypeScriptサポートがリファクタリングされ、TypeScript関係の処理がコアからパッケージとして分離されています。 この変更により一部パッケージの入れ替えが必要になっているため、2.8からのマイグレーション方法については次のページに書かれています。 Nuxt TypeScript Migration from Nuxt 2.8 | Nuxt TypeScript Dateを扱うライブラリであるdate-fns 2.0がリリースされました。 Release v2.0.0 · date-fns/date-fns 破壊的な変更として、それぞれの関数が直接日付文字列を扱うの
Nuxt JSのコンテンツを多言語化する方法
2023年2月7日 JavaScript, Nuxt JS Nuxt JSで作成されたプロジェクトをi18nというプラグインを使って多言語化に対応する方法を紹介します。あまり実装する機会はないかと思いますが、自分用に備忘録として。自動的に翻訳してくれるわけではなく、言語ファイルを用意して切り替えるという仕様です。すでにNuxt JSでプロジェクトを作成していることを前提に書いていきます。 ↑私が10年以上利用している会計ソフト！ i18nをインストールする 公式サイトを参考に、yarn または npm でインストールします。 Yarn yarn add nuxt-i18n NPM npm i nuxt-i18n 言語ファイルを作成 今回は英語と日本語のWebサイトを作成していく手順を紹介します。プロジェクトの第一階層に「lang」フォルダーを作成し、その中に英語版を「en.js」、日本語版
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Contentfulの料金と使い方を整理しつつ、Nuxt.jsと組み合わせてブログを作る - Qiita
Contentfulを使ってみたくなったので、印象に残った邦画を書き残すブログを作りました。ブログを作って満足してしまったので、記事の中身は（仮）です。Contentfulの考え方に馴染むのに少し時間がかかったので、そこのところの整理がメインの記事です。 ヘッドレスCMSというもの CMSというと、WordPressとMovable Typeぐらいしか知らなかったのですが、最近ヘッドレスCMSという言葉を耳にするようになりました。ヘッドレスCMSは、WordPressのようにテンプレートを表示する部分を持たず、APIでデータを提供することに特化している点が特徴です。 ヘッドレスCMSの選択肢は、こちらのサイトにたくさんありましたが、そのなかで、ContentfulというCMSのサービスが気になったので、Nuxt.jsと組み合わせて簡素なブログを作りました。 headlessCMS | A
Nuxt.jsを使ったプロジェクトで、Auth Moduleを使ってJWT認証を実装したので、忘れないうちにまとめておきます。 ざっくり流れを説明すると、 クライアント側からサーバー側へメールアドレスとパスワードを送信する サーバー側はトークンを返す というシンプルなものです。 サーバーが返したトークンは、クライアント側がAPIを叩く際にヘッダーに付与して使用します。 ログイン時のリクエストとレスポンス クライアント側は api/login に下記のbodyを持ったPOSTリクエストを送信するものとします。
Nuxt TypeScript https://typescript.nuxtjs.org/ Vue を活用したユニバーサルアプリフレームワークの Nuxt.js の最新バージョン v2.9 がリリースされました。 以下リリースノートを翻訳していきます。あまりなれてないので誤訳があったらごめんなさい 😭 https://github.com/nuxt/nuxt.js/releases/tag/v2.9.0 ⚠️ 重要事項 Node.js のサポートバージョンが v8.9.0 以降となりました TypeScript のサポートが外部化されました ※ おそらく nuxt と @nuxt/typescript の分離が進んだということだと思います 公式ガイド と マイグレーションガイド を参照ください vue-meta が 2.0.0 に更新されました。対応するリリースノートを参照してください
Nuxt.jsでもFunction APIを使う
<template> <div> <div>{{ `x: ${x}` }}</div> <div>{{ `y: ${y}` }}</div> </div> </template> <script lang="ts"> import Vue from 'vue' import { ref, onMounted, onUnmounted } from '@vue/composition-api' export default Vue.extend({ setup() { const x = ref(0) const y = ref(0) const update = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } onMounted(() => { window.addEventListener('mousemove', u
HOME制作Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは Webサイトを制作するときに、そのサイトの規模が大きくなればなるほど、効率的にコードを書き、それを運用できる方がいいですよね？ そんなときにおすすめなのが、Nuxt.js（ナクストジェイエス）です。 Nuxt.jsによって、学習が比較的簡単で、SPAやPWAなど最新のWebサイトがすぐに設計できます。 この記事では、Nuxt.jsとはなにか、Nuxt.jsを使うメリット、Nuxt.jsに向いているサイトについて解説していきます。 Nuxt.jsってなに？ Nuxt.jsは、2017年以降急速に普及しているVue.js（ビュージェイエス）のフレームワークです。 フレームワークとは、コードが使いやすく「型」になったもののことです。
この記事は食べログ Advent Calendar 2019 3日目の記事です。 はじめまして。食べログのフロントエンドチームに所属している@empitsu88です。 食べログの各種サービスのフロントエンド領域の設計・開発を担当しています。 先日、「食べログ テイクアウト」という新しいサービスをリリースしました。 こちらはiOSアプリですが、管理画面側をNuxt.js + TypeScriptで開発しています。 Nuxt.js + TypeScriptをプロダクトコードに使用するのは初めての試みだったので、メンテナブルなアプリケーションにするにはどうしたらいいか、日々模索しています。 今回はその技術を選定するに至った経緯や、チームで運用しているコーディングガイドラインの一部をご紹介します。 技術スタック Nuxt.js TypeScript Class API Sass + scoped
GitHub - aspida/pathpida: TypeScript friendly internal link client for Next.js, Nuxt.js and Sapper.
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
遅ればせながら、新年明けましておめでとうございます。 12月、1月とお仕事でリリースしなければならないものもあり気づけば中旬に差し掛かってしまいました。 さて、前回はNuxt.jsを使用したSSRアプリケーションの概要について投稿しましたが今回はDjangoとNuxtを使用し実際にSSRアプリケーションのサンプルを作成してみます。 今回の構成はバックエンドのDjangoはDRF（Django Rest Framework）を使用しAPIを提供、フロントエンドはVueベースのフレームワークであるNuxt.jsで作成していきます。 今回作成するサンプルアプリです。 今回作成するコードはGitHubから取得できます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsのPWAモジュールは何をやっているのか
Webページの状態を集中管理できる「Nuxt.js」のVuexストアを使いこなそう
Nuxt.jsに飛びつく前に~Nuxt.jsを習得するための前提技術と、その勉強方法の紹介~ - Qiita
Nuxt モジュールパーフェクトガイド 🍜 Nuxt.js 2.15 🍜 TypeScriptでの開発対応
Firebase + Nuxt.js + RaspberryPiで作る猫監視システム - Qiita
noteのNuxt.jsへの移行が完了し次世代のフロントエンド構築を進めています｜こんぴゅ
Nuxt.jsを使うときに、SPA・SSR・SSGのどれがいいか迷ったら - Qiita
Nuxt.js で TypeScript を使って一通り試したら色々ハマった件 - Qiita
GraphQLの“つらみ”には「スキーマ駆動開発」を使え Nuxt.jsやTypeScriptが使えるモダンな開発環境で陥った、「なんじゃこりゃー！」
Nuxt.js TypeScript - 実践TypeScript アップデート - - Qiita
Nuxt.jsとNext.jsを比較して、表とグラフにまとめてみた! - Qiita
わいのNuxt.jsアプリケーションは遅かった。 - Qiita
Nuxt.js + LaravelによるSPA開発(リポジトリ分割パターン)
Nuxt.jsのベストプラクティスを考えてみる.pdf
Nuxt.jsのAuth認証の設定(バックエンド設定含む) | アールエフェクト
2021-02-16のJS: TypeScript 4.2 RC、WebdriverIO v7、Nuxt.js 2.15.0
東京都、Vue＋Nuxt.jsで構築した「新型コロナウイルス感染症対策サイト」をNetlifyで公開
Nuxt.js で PWA(Progressive Web Apps) のベースアプリを作る
Laravelで運用しているサービスを Nuxt.jsにリプレイスする
2019-08-27のJS: Nuxt.js 2.9.0(TypeScript)、ChromiumベースのMSEdge βリリース、data-fns 2.0.0
JavaScriptフレームワーク「Vue.js」と「Nuxt.js」の活用一覧
Nuxt.jsでAuth Moduleを使ってログイン機能を実装する - Qiita
Nuxt.js 2.9 がリリースされたぞ！ - Qiita
Vue.jsを効果的に使ってWebサイトをリッチに作る！Nuxt.jsとは
Nuxt.js+TypeScriptのアプリケーションのためのコーディングガイドライン - Qiita
Django + Vue.js + Nuxt.js でSSRアプリを作る | nMoMo's