Nuxt.jsで開発時だけconsole.log()するplugin - Qiita
#やりたいこと タイトルの通り。経緯としては なんだかんだ言いつつconsole.log()は便利なので使ってしまう。 でもコード内に直書きしてしまうと後で消すのが面倒。 ESLintの警告が出るのでconsole.logそのものは少なくしておきたい。 といった感じ。なので開発時だけconsole.logして、それ以外のときは一切何も出ないようにしたい。 ついでにinjectionしていちいちimport文を書かなくてもいいようにする。 環境 Node.js v14.16.0 nuxt: "^2.14.12" @nuxt/typescript-runtime": "^2.0.1", 手順 dev環境かどうかを判別できるようにする dev環境のみconsole.logする関数を作る。 作った関数をpluginsでinjectionする。 実際のコード dev環境かどうかを判別できるようにする
Vue.js、Nuxt JSを学習するときにやったこと
2021年7月11日 JavaScript, Nuxt JS, Vue.js 以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 ↑私が10年以上利用している会計ソフト！ 1. Vue.js公式Webサイトを確認 まずはVue.jsの公式Webサイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックする
【Nuxt.js】iOSでブラウザバックした時、元のスクロール位置に戻らない - Qiita
（もっといい方法があれば教えて下さい！！🙇） 概要 Nuxt.jsプロジェクトで、外部ページに遷移してブラウザバックをしたところ、 画面最上部に戻されてしまったので対策。 結論 ホームディレクトリにapp/router.scrollBehavior.jsを追加し、下記のコードを実装 if (process.client) { if ('scrollRestoration' in window.history) { window.addEventListener('load', () => { window.history.scrollRestoration = 'auto' }) } } 理由 スクロール位置の復元設定が既存のrouter.scrollBehavior.jsで実装されているが、 iosだとbeforeunloadが発火しない。 なので、window.history.scr
今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita
＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指
Nuxt.js＋Push7でPWAアプリとプッシュ通知を実装する - Qiita
Nuxt.jsを使うと、比較的簡単にPWA対応のサイトを作ることができます。 ただ、PWA対応と一言で言っても、PWAが指す機能は様々なものがあります。 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 カメラ 決済機能 etc iOSではAndroidと比べてPWAの対応が遅く、キャッシュ以外はあまり使うことがなかったのですが、 最近iPhoneからPixel4に機種変更したこともあり、手元の環境で色々とPWAを試すことができるようになったので、 色々実装して遊んでみました。 今回は、比較的簡単に実装ができる、 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 をNuxt.jsとPush7というサービスを使って、実装してみたいと思います。 なお、今回作成したサンプルは以下のURLにアップしています。 https://nuxtpwa.netlify.com/ https:/
Vue.js( Nuxt.js )とFirebaseを使用してメールでのユーザー認証（ログイン認証）を作ります - Qiita
概要 今回はNuxt.jsとFirebaseを使用し、メールでのログイン認証機能を構築していきます。 普段はRailsを使用していて、Nixt.jsを使う機会があったため記録として書いて残しています。 初心者なので、色々ご教授、コメントいただけると幸いです！ 今回はログインのみです。新規登録はあとで書き直して追加するか、次の記事で書きます！ コピペでも実装していけるかと思います。 前提 前回の記事（プロジェクトの作成をしています）の続きとして書いていきますが、このページだけでも完結できるかと思います。 Node.js v10.15.3 Nuxt.js v2.8.0 1.プロジェクト作成 前回の記事はこちら。 Nuxt.jsとFirebaseでSSR×PWAのプロジェクトを作成している記事になります。 この記事では簡単にプロジェクトを作成していきます。 まずはvue-cliをインストールしま
Nuxt.jsでTypeScriptとJSXとJest - Qiita
世界中の"むずかしい"を簡単にする株式会社diffeasyで日本一魅力的なプログラマー集団を目指すCTO西です。 この記事はGeeks Who Drink in Fukuoka -Front End Edition 2-でのLTの内容を記事にしたものです。 当日発表スライドはこちら。 Nuxt.jsで TypeScriptとJSXとJest ソースはGitHubにあげています。 Nuxt.jsとTypeScript Nuxt.jsとTypeScriptについては、こちらでは説明を省略します。 フロントエンドはTypeScriptで書きたい！という人が最近増えてきたように思います。 Nuxt.jsはTypeScriptをサポートしていなかったのですが、Ver.2.4.0からTypeScriptがサポートされるようになりました。 Nuxt.jsとJSX JSX(「JavaScript eXte
Nuxt.js + SkyWayを使ってWebRTCを実装 - Qiita
今回はNuxt.jsを用いて実装しました。 ソースコードは長くなってしまうので抜粋しています。 挙動としては、発信側が通信を開始し、受信側が承認することで開始するイメージです。 server const io = socketio.listen(server) io.on('connection', socket => { socket.on('send peer id', id => { io.emit('emit peer id', id) }) socket.on('answer peer id', id => { io.emit('answer peer id', id) }) socket.on('disconnect', () => { console.log('disconnected') }) }) async created() { this.company = serv
Nuxt.js でバックもフロントもこれ一本
要約 いまさらNuxt.js使ってみたらすごくいい感じだったので、その導入部分をご紹介。 あらまし 動機 ちょっとしたwebアプリを作りたかったんです。3Dデータファイルの変換をサーバーでやってくれて、変換結果をダウンロードできるやつ。スマホアプリとかから機能を利用できるAPI（別にパーミッションとかユーザー認証は要らない）があって、ついでに手動で簡単に操作できるSPAっぽいフロントエンドもあったらいいな。ああでも面倒クサいです。こんなちんまい機能のアプリこさえるのに時間かけたくないけど、一人でバックとフロント両方やらんといけん。どうしよ。 何使う 以前DjangoとVue.jsでこんなことしましたけれど、正直Pythonとjs書き分けるのもダルいです。それにプロジェクト設定も多くて面倒。あー、一つの言語で両方書けてコマンド一発でいい感じに設定されたプロジェクト作ってくれるやつないかなー。
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイント - Qiita
Nuxt, netlify, Firebase を使ったWebサービス開発と個人開発における技術選定のポイントJavaScriptsentryFirebaseNetlifyNuxt 技術構成はこんな感じで作りました。 Nuxtというよりかは個人開発における技術選定のポイントを主体に解説した記事です。 これから個人開発をやろうとしている人の参考になれば幸いです。 どんなWebサービス？ Google Calendar の表示/非表示を一括で切り替えるWebサービス。 ※ゲームとかでよくある装備マイセットのGoogleカレンダー版です。 G Suite を導入している企業だとカレンダー画面が会議室や他のユーザーの予定で溢れてしまいます。 TV会議ができる会議室のセットや同じチームメンバーのカレンダーセットをつくり、セットごとの予定をカレンダーのTOP画面で目視で確認できるようになります！ 触っ
Nuxt.js を用いた新規事業開発を半年以上経験して得た知見 - Qiita
こんにちは、@y_temp4 です。 自分は ALIS という会社で主にフロントエンドまわりの実装を Nuxt.js を用いて行ってきたのですが、今回はそこで得た知見について共有しようと思います👍 内容としては以前 JSer.info 400回記念イベント にて発表した Vue + Nuxt + Serverless の開発で得た知見 (主につらみ) を元に、そこでは話しきれなかった点や、新たに得た知見などについてご紹介します。 Nuxt を選定した理由 実際の開発の話に入る前に、Nuxt の選定理由について触れておきます。 ライブラリ・フレームワークを選定するときにはさまざまな観点がありますが、ALIS が Nuxt を選定した理由は主に以下の2つです。 開発速度を重視したかった 技術選定をする際に候補として React / Next なども挙げられましたが、Vue / Nuxt を
Nuxt.jsで作るLINEボット - Qiita
はじめに LINEBot&Clova Advent Calendar 2018 13日目の記事は@nori3tsuが担当します！ これまで様々な構成でLINEボットを開発する機会がありました。その中でNuxt.jsを使った開発が一番開発効率が良かったのでご紹介します。 最近作った構成例: AWS API Gateway + Lambda(Node.js) + DynamoDB Ruby on Rails + Sidekiq Node.js + Express + Bull Nuxt.js(Vue.js + Express) ※【東京】LINE Bot & Clova CEK開発者2018大忘年会 - connpassのLTで発表した内容の詳細でもあります。 Nuxt.jsとは Nuxt.jsとはVue.jsアプリを作成するためのフレームワークです。すぐにフロントエンド開発を始められる機能が
Nuxt.jsとSkyWayで1時間でビデオチャットを作ってみる - Qiita
Nuxt.js+SkyWayを使うとビデオチャットがらくーに作れつつ、jQueryな実装と比べてコードが読みやすいと思います。 SkyWayのサンプル実装をNuxt.jsにリプレイスしてみた感じです。 開発環境など Node.js v11.0.0 Nuxt.js v2.3.4 SkyWay JS SDK v1.1.18 Nuxt.jsでWebページの雛形を作成 Create Nuxt Appで作成します。 $ npx create-nuxt-app nuxt-skyway npx: 402個のパッケージを28.845秒でインストールしました。 > Generating Nuxt.js project in /Users/n0bisuke/dotstudio/playground/nuxt-skyway/nuxt-skyway ? Project name nuxt-skyway ? Pro
Nuxt.jsを使うときに、SPA・SSR・静的化のどれがいいか迷ったら
nuxt generateの機能は、静的サイト生成とか、単に静的生成といわれることが多いですが、文中で多用するのがツラいので、より短く「SSG(Static Site Generation)」で統一しています。 Nuxt.jsにおけるビルドの選択肢 Nuxt.jsでは、SPA・SSR・SSGの中から、好きなものを選んで開発できます。 初期設定ではSSRで動作するようになっていますが、流れとして自然なのでSPAから順に利点と欠点をまとめました。それぞれのビルドを行うため設定は、ドキュメントにわかりやすく書いてあるので、そちらでご確認ください。 サーバーサイドレンダリング - Nuxt.js SPA（Single Page Application） 利点 実装しやすい サーバーの準備が楽 欠点 初期表示が遅い SEOに不安がある OGをページごとに設定できない SPAは、最もシンプルに実装でき
今年、JavaScriptでの仕事の幅を広げた技術６選 - Qiita
こんにちは。久しぶりのQiita投稿です。 今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。 さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。 かれこれ３期目に突入致しました。 アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと思います。特に私達の会社では、今までのいわゆる「Webサイト制作」だけの単一事業形態から脱し、他のあらゆるアプリケーション制作にも手を拡げられた年になりました。 そんな話をしようと思います。 Nuxt.js Vue.js製のフレームワークであるNuxt.js
2018 年の国内の Nuxt.js について振り返る - Qiita
2018 年ももう終わりますね。今年は Nuxt の大躍進の一年であったと思います。 国内では爆発的な人気を誇り、 Vue.js による Web アプリケーションエンジニアでは知らない人がいないレベルのフレームワークになったのではないでしょうか。 Nuxt.js について語りたいことは非常に多くあります。 v2.0 リリースをはじめとする多くの技術的アップデートや周辺ツールの強化など、話題にこと欠かすことはありません。 そんな中、 Nuxt.js Advent Calendar の最後となるこの記事では、あえて Nuxt.js のテクニックのようなトピックではなく、今年国内であった Nuxt.js の動きを中心に追っていくことができればと思います。 実際の開発についての情報については、既に多くの情報が公開されているかと思います。僭越ながら、私自身も Qiita に大量のナレッジを残しており
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
DMM 百万長者を支える技術 - DMM inside
Slack + NuxtでMarkdown対応のブログを作る - Qiita