Amazon.co.jp: Nuxt.jsとPythonで作る！ぬるさくAIアプリ開発入門 データ分析からAIアプリ開発まで優しく解説！ (技術の泉シリーズ（NextPublishing）): 深野嗣, 高山和幸: Digital Ebook Purchas
Nuxt.jsのSPAをAmplify Consoleでホストする。めっちゃ簡単だった！ - アクトインディ開発者ブログ
morishitaです。 以前、次のエントリを書きました。 tech.actindi.net このとき作ったNuxt.jsのアプリケーションはその後、 リニューアルして2019年4月からはいこーよ！こどもBIRTHDAYとして利用しています。 https://birthday.iko-yo.net/birthday.iko-yo.net 今後は対象地域と施設を増やして拡充していく予定です。 それに伴い開発が活発になるのでステージング環境や 施設の方に予め確認いただくプレビュー環境もちゃんと準備する必要が出てきました。 上記エントリで紹介した環境を拡張しても良かったのですが、 せっかくなので東京リージョンでも使えるようになったAWS Amplify Consoleを使ってみました。 aws.amazon.com Amplify Consoleとは AWSが開発しているAmplifyというフレ
Nuxt.js + microCMSでヘッダのまとめサイトを作ってみた
Docker multi stage build on Nuxt.js Application #nuxtmeetup
2019/8/26に行われたNuxtMeetUpでの登壇資料です。
Nuxt.jsでVuetifyを使う(with vue-property-decorator) | DevelopersIO
スクラッチでNuxt.jsをTypeScriptを利用して開発する環境に対して、Vuetifyを使う環境作成の手順を確認したかったので、方法を調べつつ実際に作成してみました。 前回作成した記事（「Nuxt.jsでTypeScriptを使う(with vue-property-decorator)」）で作成した環境に対して、Vuetifyを使う環境にするための方法についてまとめています。 前回と同様に、できる限りミニマムな構成で作成したいのと、自分的には理解のブラックボックス化が進みやすいため可能な限りVue CLIやcreate-nuxt-appは使用したくなかったため使用していません。（より簡単に早く、動くものを作りたい場合にはVue CLIやcreate-nuxt-appの利用をおすすめします。） はじめに 「Nuxt.jsでTypeScriptを使う(with vue-propert
Nuxt.jsとmicroCMSで採用ページを作成してみよう！
はじめにこんにちはかみむらです。この記事はNuxt.js + microCMSで採用ページを作成するチュートリアルです。 microCMSの最大の特徴は、APIを部分的に扱えることです。なので、さまざまなユースケースが考えられます。例えば、企業のWEBサイトを作成すると仮定してください。CMSで管理する機能は、お知らせやブログが挙げられます。しかし、運用していくと採用情報やヘルプページなど、CMSで管理したい項目が増える可能性があります。 そこで、ヘッドレスCMSを使えば、フロントエンドとAPIを分離して部分的にCMS化することができます。なので、設計を一から見直すことなく、部分的な変更が可能になります。無理な工数を割くことなく、拡張性の高いWEBサイトを構築することができます。 今回は上記で上げた例の一つ、採用ページをNuxt.js + microCMSを使って実装していきます。 最終的
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Webページの状態を集中管理するVuexストアを説明しました。今回は、ページの表示前にネットワークからデータを取得して、ページやVuexストアに反映できる、Nuxt.jsの非同期データ機能について説明していきます。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Vue.jsのコンポーネントは、dataメソッドに定義されたデータを画面に表示しますが、Nuxt.jsでは、Webページの表示前にコンポーネントのデータをネットワークから取得
Nuxt.jsでログインをどうやるか、そしてCookieからlocalStorageへ - DJ lemon-Sour's diary (prod.hisasann)
🦑 まえがき Nuxt.js でいわゆる basic なログインの仕組み （ユーザーID・パスワードを入れる系）を作ろうとすると、なかなか大変で、これは Cookie が SSR 時と CSR 時に API サーバーまで勝手に送信するしないの話などあり、結構気にする箇所は多くなります。 Cookie を使ったパターン では、 Cookie はあくまでも Nuxt.js 側のみで使用し、 BFF との通信は、リクエストヘッダーにログイントークンをのせて送信しています。 また、ログイン処理後はレスポンスヘッダーからログイントークンをもらい、それを Cookie に保存します。 それについての考察は以下にまとめております。 Nuxt.jsを使ったログイン周りの仕組みについて · hisasann/typescript-nuxtjs-boilerplate Wiki また、 OAuth 版ではあ
Firebaseで業務アプリケーションを構築しよう 1:Nuxt.jsのセットアップ - takeda_san’s blog
目的 Firebaseを使って業務アプリケーションを作りたい。 背景 普段はAWSのECSでフロント/バックエンドのサーバを立てて業務アプリケーションを稼働させています。 ですが、利用者も限られてるしフロントエンドサーバに至ってはコンテンツの配信を一日に数回するだけなので、なんか過剰なことをやっている気もする。 FirebaseのCloud Functionとhostingで代用できるかも…？ バックエンドにしたって、簡単なRESTのIFとRDBへの型変換をやっているだけな気がする。 バリデーションをフロントエンド側でやればもしかしたらFirebaseのCloudStoreで代用できるかも…？ ということで、Firebaseを使って業務アプリケーションを作ってみようというのが今回の目的。 やること FirebaseのCloudStore/Functions/Hostingを使う Nuxt.
【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！｜Udemy メディア
システム開発 2019/09/20 【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！ Nuxt.jsとは、Webアプリ開発の機能が最初から組み込まれているVue.jsベースのJavaScriptフレームワークです。2017年以降、爆発的に普及しています。今回は、Nuxt.jsのメリットや利用シーンについてお伝えします。 Nuxt.jsとは？ Nuxt.jsとは、Vue.jsベースのJavaScriptのフレームワークで、「ナクスト」と読みます。React.jsベースのサーバーサイドレンダリング(以下SSR)用フレームワークであるNext.jsに触発されて作られました。 UIなどフロントエンド向けのフレームワークであるVue.jsに対し、UI以外の部分でWebアプリケーション開発に必要な機能が最初から組み込まれています。 Nuxt.jsは、ホテル
こんにちは、現在フリーのマークアップエンジニアとして活動しているしょーごと申します。 最近はYouTubeなどでも発信しています。 普段はWordPress構築や静的サイトコーディングをメインとしているのですが、 最近機会に恵まれまして、Nuxt.jsのマークアップ部分（ロジック以外）を担当しております。 結果的に大苦戦してベテランの方に大迷惑をかけてしまったので、 マークアップエンジニアやデザイナーがNuxt.jsのマークアップ部分をアサインされた場合に必要な知識をまとめました。 Nuxt.jsはweb制作業界にも少しづつ浸透してきているので、マークアップエンジニアやデザイナーさんもいずれ触る期間があるかもしれない点で、同業の方々に参考にして頂けたらと思います。 俺の屍を超えていけ Nuxtってなんなの？ Vue.js単体では開発に不足している機能が多いです。なので従来はプラグインやライ
Nuxt.jsを使うと、比較的簡単にPWA対応のサイトを作ることができます。 ただ、PWA対応と一言で言っても、PWAが指す機能は様々なものがあります。 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 カメラ 決済機能 etc iOSではAndroidと比べてPWAの対応が遅く、キャッシュ以外はあまり使うことがなかったのですが、 最近iPhoneからPixel4に機種変更したこともあり、手元の環境で色々とPWAを試すことができるようになったので、 色々実装して遊んでみました。 今回は、比較的簡単に実装ができる、 オフラインキャッシュ ホームスクリーン追加 プッシュ通知 をNuxt.jsとPush7というサービスを使って、実装してみたいと思います。 なお、今回作成したサンプルは以下のURLにアップしています。 https://nuxtpwa.netlify.com/ https:/
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「nuxt-mqのGooglebot検証 」に登壇したのは、@inosy22氏です。登壇資料はこちら nuxt-mqのGooglebot検証 inosy22氏：よろしくお願いします。私からは、Googlebotからのnuxt-mqというライブラリの見え方の検証という話をさせていただきたいと思います。 まず最初に自己紹介なんですけど、猪野と申します。「inosy22」というアカウントでいつも活動してます。 GameWithでサーバサイドエンジニアとして働かせていただいています。サーバサイドエンジニアなんですけど、VueやReactのようなフロントや、インフラ構築などもやっています。 本日の概要について、N
Nuxt.jsチートシート - Qiita
関連: - Vue.jsチートシート(基礎編) - Vue.jsチートシート(コンポーネントと構成編) Vueチートシートに引き続き公式チュートリアルの抜粋です。 参照 Nuxt.js日本語公式 ガイド 概要 Nuxt.js = Vue.jsおよびそのプラグインに基づくサーバサイドフレームワーク NuxtはVue.js, vue-router, vuex, Vue Server Render, Vue Metaなどを包含する Vueと同じく部分的に利用することができる(Progressive Framework) 公式によると以下のような機能を提供している: Vue ファイルで記述できること（*.vue） コードを自動的に分割すること サーバーサイドレンダリング 非同期データをハンドリングするパワフルなルーティング 静的ファイルの配信 ES2015+ のトランスパイレーション JS と C
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオン - Qiita
Nuxt.js + Firebase Authentication + FireStoreでwebアプリケーションハンズオンハンズオンFirebaseAuthFirestoreNuxt 本記事は以下に引っ越しました。 今後Qiita上での更新はありません。 この記事のターゲット Nuxt.js + Firebaseで何か作りたい Firebase AuthenticationとCloud FireStore使いたい Chapter1 firebaseの準備 まずはfirebase側を準備します。 今回用意するのは - プロジェクト - Authentication - FireStore の三つ。 firebase consoleにログイン 1.https://firebase.google.com/?hl=ja へアクセス 2.右上の「ログイン」ボタンからログイン。 3.ログインできたら
本日 Vuetify v2.0.0 Arcadia がリリースされました！ 居ても立っても居られず、早速試してみました！ 個人的注目機能 VColorPicker リファレンス：VColorPicker vue-colorの使用を検討していた身としては、Vuetifyのコンポーネントとして提供されるのはありがたいです。 VFileInput リファレンス：VFileInput こちらも地味にVuetifyに今までなかったやつです。 「ファイルを選択」ボタンのカスタマイズは地味に面倒なので、大変ありがたいです。 VOverlay リファレンス：VOverlay こちらもたまにcssで自力でやっていたので、楽になりますね。 Nuxt.jsでVuetify 2.0を使う 素のvueの場合はvuecliでできるようですが、Nuxt.jsの場合は@nuxt/vuetifyモジュールがまだv2.0.0
前回書いたこちらの記事では普通のWebサイトをNuxt.jsで作り変える流れをざっと書きました。 普通の受託系Web制作者による普通のWebサイトをNuxt.jsで作り変えてみた話 今回は上記の記事では割愛したNuxtでSassやpugなど、これまでgulpで使っていた便利なものを同じように使うためにはどうすれば良いか、ということを書いていこうと思います。 あくまで僕の環境（Mac）でこうしたら動くようになった、という記録なので正しいやり方ではないかもしれません。でも大事なのは成果物で、環境なんてのは自分が便利に使えれば良いの精神で書いていきます。 （沢山の人が関わるような大規模プロジェクトはちゃんとした環境構築しないとやばいとは思いますが） なぜSassとpugとjQuery（プラグイン群）を使いたいか？ まず自分にどんな前提知識があったかをざっと説明しておきます。 ・Sassやpugを
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をどのようにレンダリング
を前提とする。 よくある方法 例えば2ページ目を /blog?p=2 とするクエリ方式が考えられる。 generate したサイトの場合は /blog/index.html (/pages/blog/index.vue) でクエリの数字（今何ページ目か）を受け取り、そのページに表示すべき記事一覧を取得する。 問題点 その記事一覧を取得する方法は2種類ある。 created フック等でクライアントから API サーバーに都度問い合わせる asyncData フック等であらかじめ全記事を取得しておいて store や data に格納して generate 、クライアントサイドで必要な記事を取り出す。 前者は 記事一覧ページのアクセス数と同じ回数 API 問い合わせが走ってしまう クライアントがアクセスしてから API に問い合わせるので、ローディングに時間がかかる（Lazy Load といえ
![[Nuxt.js] 完全静的なサイトでページネーションを上手いこと実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/12de4fb1fc368ba92daba19535bb594e75a8dec3/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCTnV4dC5qcyU1RCUyMCVFNSVBRSU4QyVFNSU4NSVBOCVFOSU5RCU5OSVFNyU5QSU4NCVFMyU4MSVBQSVFMyU4MiVCNSVFMyU4MiVBNCVFMyU4MyU4OCVFMyU4MSVBNyVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MyU4RCVFMyU4MyVCQyVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCMyVFMyU4MiU5MiVFNCVCOCU4QSVFNiU4OSU4QiVFMyU4MSU4NCVFMyU4MSU5MyVFMyU4MSVBOCVFNSVBRSU5RiVFOCVBMyU4NSVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjRhNzMyOTc1MGU4YTc5YmI4MjlkM2U5OTY4YmM1MGM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwdGhlX2Z1a3VpJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jNmMwZmY2YWM5MjFmMTEyZGM2ODlkNmVhODQ4ODkxMw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3De6f0697b4684247242a46e7632a1f3c9)
AI・機械学習 E ラーニングプラットフォーム【キカガク】の Nuxt.js → Next.js 技術リプレイスの話 - キカガク プラットフォームブログ
はじめに こんにちは、株式会社キカガクでエンジニアをしている北田です。 ついにキカガク開発チームでも技術ブログを開設しました！（祝） 先日、私たちが提供する E ラーニングプラットフォーム【キカガク】は Vue (Nuxt.js) → React (Next.js) への技術刷新と既存コードの大幅リファクタリングを目的として技術リプレイスを行いました。 今回は、リプレイスの決断理由やリプレイスを通して苦労した点などを書いていこうと思います。 ※ この記事では詳細な実装内容やコードなど、深い技術の話はしません。 対象読者 普段から JavaScript (TypeScript) で開発をしている レガシーな言語からモダンなフロントエンド言語への変更を考えている React、Next.js でプロダクト開発を進めていきたい フロントエンド言語の技術選定に迷っている リプレイスの決断理由 Rea
Nuxt.jsとVuetifyで画像の指定方法について色々と詰まったので今回はそのことについてまとめてみました。 画像の格納場所 Nuxt.jsには画像ファイルを「assets」と「static」のどちらかに格納することができます。 それぞれの格納場所によって指定方法が異なります。 「assets」からの指定方法 assets配下のファイルを使用する場合は「~/assets」を指定します。 「~」（チルダ）をつけることが普通のHTMLとは異なり、これがないと表示されません。 「~」の代わりに「@」（アットマーク）でも表示されました。 公式ドキュメント内で書かれているようにCSSでエイリアスを参照する場合は注意が必要です。 アセット Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし
はじめに アプリを作ったのはいいものの、フィードバックをくれる人がいなかったのでQiitaで紹介記事を書くことにしました。 独学で周りにアドバイスをもらえる人がいないので、改善点などどんどん指摘してくださると幸いです。 自己紹介 作者は今年の2月末ごろから独学でプログラミングを学習しています。 高校時代にほんの少しHTMLを触ったことがある程度で、事前知識はほぼありませんでした。 現在はアプリを作成しながら、10月の基本情報に向けて勉強しています。 アプリ制作は今回で2作目になります。 前作URL 前作リポジトリ アプリ概要 これが作成したアプリです。 サイトURL githubリポジトリ PolPa(ポルパ)は、学習時間に応じてレベルが上がる学習記録アプリです。 全体像がわかると思うので先にERを貼っておきます。 機能紹介 主な機能を一部紹介します。 ゲストログイン 新規登録フォームの下
脱WordPressを本格化しようと思っているのですが、なんだかんだでWordPressは便利なので、使いたいと思うときはしばしばあります。 特にブログやカテゴリー、タグなどが必要なサイトの場合はWordPressで実装すると楽なときが結構あります。 しかし、そのためにnuxt.jsをやめて、phpで動くサーバーを用意してWordPressに切り替えるのはナンセンスだと思っています。 どうすれば良いかというとWordPressを立てたときに使えるREST APIをNuxt.js側で呼び出してそれを表示するようにします。 WordPressのREST API を扱うには REST API とはRESTと呼ばれる設計原則に従って作られたものです。 外部から読み出し、利用するためのプログラムで呼び出し規約(API)の種類の一つです。 WordPressでもバージョン4.7以降をインストールすると
はじめに Nuxt.js(以下Nuxt)は、Vue.js(以下Vue)をサーバーサイドで動かす目的以外にも、ディレクトリ構造やVueエコシステムのライブラリがセットになっているため、設計の工数を削減する目的で採用するケースもあると思います！ お中元に迷ったときのヨックモックみたいですね😊 本記事では、Nuxtのディレクトリ構造を土台とし、Vueのコンポーネント設計について、各レイヤー（ディレクトリ）のコンポーネントが担うべき責務をまとめました。 Vue3.0がやってくると、Composition API 導入に伴い設計のベストプラクティスが変化すると思いますが、Vue2系を触ってきた個人的な総括の気持ちで書いています。 Vueコンポーネントの基本とNuxtでの例 Vueコンポーネントは下記図のように、ツリー状にネストし構築されていきます。 ※Vue.js公式サイト コンポーネントによる構
Nuxt.jsを使ってTodoリストを作ってみる
Nuxt.jsを使ってTodoリストを作ってみるエンジニアの藤橋です。 今回は簡単なTodoリストを作りながら、Vue.jsならびにNuxt.jsができることをご紹介します。 Vue.js(ヴュー ジェイエス)はWebページのUI(ユーザーインタフェイス)作成にフォーカスしたJavaScriptフレームワークです。直感的に開発でき、導入や習熟のしやすさ、日本語ドキュメントが充実していることが特徴です。 Vue.js公式サイト Nuxt.js(ナクスト ジェイエス)は、Vue.jsベースのJavaScriptのフレームワークで、UIに特化しているVue.jsに加えて、Webページ構築に有用なUI以外の機能（Ajaxやサーバーサイドレンダリングなど）などををまとめて利用できる環境を提供してくれます。 Nuxt.js公式サイト Todoリストを作ることによって、Vue.jsのデータバインディング
個人的にNuxtのソースファイルはsrcディレクトリに入れるのが好きなので、 assets, components, layouts, middleware, pages, plugins, static, store のディレクトリは src に移動。 nuxt.config に srcDir: 'src' を追加。 nuxt.config.js を nuxt.config.ts に変更。 import { Configuration } from '@nuxt/types' const config: Configuration = { // Config設定の記述 // ... buildModules: [ // Doc: https://github.com/nuxt-community/eslint-module '@nuxtjs/eslint-module', '@nuxt/
2019-08-17 CaT vol.7 真夏のVue.js祭りにて、 「noteをNuxt.jsで再構築した話 -2nd-」 というタイトルで発表させて頂きました。
Nuxt.js（ Vue.js ）とFirebaseで、新規登録の際にRealtime Databaseにユーザーの情報を保存します 概要 今回は、Nuxt.jsとFirebaseで、新規登録をする際にユーザー情報を、Realtime Databaseにも保存ができるよう実装していきます。 今回は、メールで登録する場合になります。 普段はRailsを使用していて、Nuxt.jsを使う機会があったため記録として書いて残しています。 初心者なので、色々ご教授、コメントいただけると幸いです！ 前提 前回の記事で新規登録の仕方を紹介しています。 FirebaseのAuthenticationにはユーザーの情報が保存される前提で進めていきます。 Node.js v10.15.3 Nuxt.js v2.8.0 ユーザー情報をRealtime Databaseへ保存します 1. 現在のコードの確認 見た
IT・Web業界に特化した求人情報サイト「FINDJOB!」は、2020年9月1日にサービスのフルリニューアルを行った。その背景には、より利便性が高くユーザー体験に優れたサービスへと改善するという目的だけではなく、システムにおける「課題」を解消するという目的もあったという。旧「Find Job!」にはいかなる課題があり、リニューアルの裏側には開発メンバーたちのどのような努力があったのか。「FINDJOB!」の開発リーダーを務める佐々木義一郎氏とエンジニアの関祐輔氏に伺った。 困難を極めた既存コードのメンテナンス ――「FINDJOB!」がリニューアルを行った理由を、開発視点から教えてください。 佐々木：理由はいくつかありますが、まず旧システムをメンテナンスし続けることが困難になってきたからです。旧システムはPerlで開発されていたのですが、Perlを扱えるエンジニアは徐々に少なくなっていま
これって、Qiita記事の種になりませんか？ つまり、こういうことになります /layoutsにヘッダーのコンポーネントを含めつつ /pagesのファイルから/layoutsで使用しているコンポーネントの値を設定する（値を渡す） 基本構成 レイアウト内でヘッダーコンポーネントを読み込み、表示している。 上記レイアウトを適用してpagesを表示。 layout(components) > pagesの親子関係 フォルダ
Nuxt.js のビルド時間を高速化 Nuxt.jsで開発していると、ローカル開発環境で確認の為に、ビルドを走らせるかと思います。 しかし、Nuxt.js のビルドは割と時間かかりますよね。 HardSourceWebpackPluginを利用することで Nuxt.js のビルド時間を大幅に削減することができます。 今回は HardSourceWebpackPlugin の導入方法について紹介します。 目次 Nuxt.js のビルド時間を高速化 目次 HardSourceWebpackPlugin を有効にする nuxt.config.jsの設定 キャッシュのクリア パフォーマンス まとめ HardSourceWebpackPlugin を有効にする Nuxt.js 2.4以降からNuxt.jsに組み込まれているので、バージョン2.4以降を使っているのであれば、nuxt.config.js
概要 Nuxt.jsで環境変数を使う際、実行環境の環境変数がセットできるようになっていました。 確か、2.13 以前のversionではBuild時の変数がStringとして置換されるような仕様だったので環境変数はBuild時に確定させる必要がありました。 Build環境はCI環境で別環境になっているような構成は一般的だと思うので、Build用に環境変数用のファイルを用意してdotEnvで頑張る的な運用が必要だったのでとってもハッピーになりました。 使い方 公式ドキュメントはコチラ nuxt.config に runtimeConfig をセットする ２つのconfigファイルがあります ・ CSR時・SSR時どちらでも利用したいものは publicRuntimeConfig ・ SSR時のサーバーサイド限定で利用したいものは privateRuntimeConfig に以下のように実行時
2019年7月31日、Vue.jsに関する知見を共有する勉強会「Roppongi.vue #2」が開催されました。Vue.jsをさまざまな角度から掘り下げるライトニングトークには4人が登場。「新規サービスにNuxt.jsを採用した話」に登壇したのは、合同会社DMM.com・島村崇氏です。登壇資料はこちら 新規サービスにNuxt.jsを採用した話 島村崇氏：こんにちは。本日は「新規サービスにNuxt.jsを採用した話」という内容でお話をさせていただこうと思います。よろしくお願いします。 （会場拍手） まず自己紹介ですが、DMM.comのテクノロジー本部CTO室でエンジニアをしている島村と申します。経歴は、2014年にDMMに入社してこんな感じで、実は一昨年まではマネジメントもやっていました。 では、さっそくなのですが、今回紹介するサービスは、9月リリースに向けて今まさに新規開発しているEC系
Nuxt.js×Firebase Hosting×PWAでQiita記事共有時に、TwitterIDを取得して作者にメンションで感謝を伝えられるTweetサービスを作った🎉🎉 - Qiita
Nuxt.js×Firebase Hosting×PWAでQiita記事共有時に、TwitterIDを取得して作者にメンションで感謝を伝えられるTweetサービスを作った🎉🎉APIVue.jsFirebaseNuxt#PWA Nuxt.js×Firebase HostingでPWAを作った🎉🎉🎉 https://t.co/lse1BalZSL — ワツヨ@PWAのthanks-mentions (@watsuyo_2) November 9, 2019 開発コンセプトや想いはnoteにも書きました🙏🙏 作り手と受け手の新しい関係性を作るWebサービスを作った https://note.mu/watuyo_2/n/nb47f9fa3fe81 PWAの「thanks-mentions」を作りました🎉🎉 Qiitaの記事を共有する際に、TwitterIDを取得して作者にメンショ
【Nuxt.js/axios】別ドメインへのajaxがCORS policyで弾かれる問題の対応 - フリーランチ食べたい
ここのところNuxt.jsで開発を行っていて、詰まったところがあったので記載しておきます。 TL;DR 現状axios/devサーバーのヘッダー設定だけでは解決できません。(調べた限り) devサーバー側でaxiosのproxyの設定を行う必要があります。 環境 vue@2.6.2 nuxt@2.4.2 axios@0.18.0 課題 問題設定をハッキリさせておきます。 下の図のようにローカルでの開発時にブラウザから外部のAPIサーバーにリクエストを送った際にCORS policyでブロックされてしまう問題です。 自分と同じ状況であれば このようにアクセスしたときに axios.get('http://api.example.com/hello') 下のようなエラーメッセージが出ていると思います。 Access to XMLHttpRequest at 'http://api.exampl
はじめまして、バックオフィスシステム第二グループの辻田です。 参画してからもう少しで3ヶ月目を迎えようとしています。主に運用改善系のお仕事をさせていただいていて、インフラとサーバーサイドを触ることが多いです。 今回は、わたしの大好きなNuxt.jsにいま勉強中のクリーンアーキテクチャを当てはめてサンプルを実装してみたので紹介したいと思います。業務で実際に試した内容ではないのですが、今後機会があれば挑戦したいと思っていますし、こんなことしてるメンバーもいるんだなあくらいの温度感で読んでいただければと思います。 使用技術Nuxt.js 2.14.0 TypeScript 4.0.2 SWAPI https://swapi.dev/ Vue3がリリースされたてですが、Nuxtはまだ対応中なので 2.14.0 のバージョンを使用しています。（今回紹介するのはほぼtsファイルなのであまりVueのバー
はじめに こんにちは、メルペイフロントエンドチームの @tokuda109 です。 この記事は、メルペイフロントエンドチームで取り組んでいるパフォーマンス改善について紹介するシリーズ記事の第3弾の記事で、ブラウザ上の Nuxt.js アプリケーションの初期化処理について紹介します。 前回の記事のおさらい 前回の記事で JavaScript がブラウザ上でどのように処理されるのかを紹介しました。 マイクロタスクは、Promise の then 等のハンドラに実装されたコールバック関数を指します。 JavaScript のランタイムの振る舞いとして、マイクロタスクキューに積まれたマイクロタスクは1サイクル内で空になるまで JavaScript エンジンで優先して実行されます。 図1の Run Microtasks という処理ブロックは、Promise の処理が行われていて、他の処理をブロックし
[初心者]Nuxt.jsビギナーズガイド Vue.js ベースのフレームワークによるシングルページアプリケーション開発 - Qiita
はじめに noteのフロントエンドをNuxt.jsへ刷新します はもう昨年のことかと思いながら、Nuxt.jsを習得してみる。Universal Application、Progressive Web Applicationなど、これからのWebにとって当たり前の技術を身につける。 Nuxt.jsビギナーズガイド Vue.jsベースのフレームワークによるシングルページアプリケーション開発 を簡単にまとめてみた。JavaScript初心者の私でも非常に理解しやすく、Qiitaにいいねをつけていただいた上で、ご購入をおすすめします。 1. Nuxt.jsの概要 01. 「モダンフロントエンド」のイマ 今日フロントエンドは非常に安定し停滞した状態が続いている。トラディショナルなサーバーがHTMLを返す時代から、SPAとAPIによるWebアプリケーションがデファクトスタンダードになった。当分はRe
![[初心者]Nuxt.jsビギナーズガイド Vue.js ベースのフレームワークによるシングルページアプリケーション開発 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/df370276ca6890d61b45b53c1c71baf5a5cd106d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JTVETnV4dC5qcyVFMyU4MyU5MyVFMyU4MiVBRSVFMyU4MyU4QSVFMyU4MyVCQyVFMyU4MiVCQSVFMyU4MiVBQyVFMyU4MiVBNCVFMyU4MyU4OSUyMFZ1ZS5qcyUyMCVFMyU4MyU5OSVFMyU4MyVCQyVFMyU4MiVCOSVFMyU4MSVBRSVFMyU4MyU5NSVFMyU4MyVBQyVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MyVBRiVFMyU4MyVCQyVFMyU4MiVBRiVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MiU4QiVFMyU4MiVCNyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MyVBQiVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiVCMSVFMyU4MyVCQyVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCMyVFOSU5NiU4QiVFNyU5OSVCQSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NDU2Zjk4MDk4MGUzMTA5NmZlMGYyN2I3ZTQ4ZDliMzQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBJWlVNSVJVJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lZWQ4MmNjY2Y2ZGI1NzZhNDVkMGY4NmVmMTc3ZTEzZg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D89e743f4b3fb3186ea49a39a7300beb3)
Nuxt.js製のアプリで利用しているaxios-moduleでリクエストのキャッシュをしたかったので、Axiosを拡張してそれをできるようにしてみました。 なお、今回試したソースコードの一式はこちらにあります。 https://github.com/shoito/try-axios-cache create-nuxt-appでベースとなるNuxt.jsアプリを作る ここではcreate-nuxt-appコマンドで、try-axios-cacheという名前のアプリを作ります。 $ npm i -g create-nuxt-app $ create-nuxt-app try-axios-cache ここで重要なのが、create-nuxt-appでNuxt.jsアプリの雛形を作る際に、モジュールの選択で Axios を選択することです。 $ create-nuxt-app try-axios
Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA（シングルページアプリケーション）で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 Contents Nuxt.jsについて導入方法シンプルでシームレスなページ遷移SPAを使用するメリットとデメリットサイト紹介まとめNuxt.jsについてSPAを構築するにあたり、今回はJavaScriptライブラリ（以下jsライブラリ）のフレームワークを採用することにしました。jsライブラリは有名なものだと「React」や「Vue」などが該当しますが、今回は「Vue」のフレームワークである「Nuxt.js」を使用します。 Nuxt.jsはVueアプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中か
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ表示前にデータを取得して反映できる「Nuxt.js」の非同期データ機能を使いこなそう
マークアップエンジニアがNuxt.js案件で必須な知識【5選】 - Qiita
Nuxt.js＋Push7でPWAアプリとプッシュ通知を実装する - Qiita
Nuxt.jsのライブラリをGooglebotで検証してみる
Vuetify 2.0の注目機能とNuxt.jsでの試し方 - Qiita
Nuxt.jsでSassとpugを使えるようにする方法（ついでにjqueryも） | ARAKAZE NOTE
Nuxt.jsで作ったアプリでMarkdownをレンダリングしてみる | DevelopersIO
[Nuxt.js] 完全静的なサイトでページネーションを上手いこと実装する - Qiita
【Nuxt.js】imgファイルの指定方法について - Qiita
独学半年の実務未経験がRails＋Nuxt.jsでSPA作ったので見て欲しい - Qiita
Nuxt.jsで簡単にWordPressのREST APIを実装する方法 | Cntlog
Nuxt.jsで学ぶ、Vue.jsコンポーネント設計の基本 - Qiita
3分でつくる2019年版 Nuxt.js TypeScript 開発環境設定 - Qiita
noteをNuxt.jsで再構築した話-2nd-というタイトルでお話してきました #cat_vol7｜福井 烈 / note inc.｜note
Nuxt.js（ Vue.js ）とFirebaseで、新規登録の際にRealtime Databaseにユーザーの情報を保存します - Qiita
23年続く「FINDJOB!」がPerlからNuxt.js＋Djangoへと移行、フルリニューアルの背景は？
【Nuxt.js】layoutsに設定をまとめつつ、タイトルはpagesから設定したい - Qiita
Nuxt.js のビルド時間を高速化 | mintsu's blog
いつの間にかNuxt.jsで実行時環境変数が使えるようになっていた件
Nuxt.jsがDMMの新サービス開発に採用された理由と成果
Nuxt.jsでクリーンアーキテクチャ | MoT Lab (GO Inc. Engineering Blog)
Nuxt.jsの初期化処理について | メルカリエンジニアリング
Nuxt.jsで使うAxiosにリクエストのキャッシュ機能を組み込んでみる | DevelopersIO
【Nuxt.js】SPA（シングルページアプリケーション）で作るお洒落なページ遷移 | 東京のホームページ制作 / WEB制作会社 BRISK