脱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公式サイト コンポーネントによる構
Nuxt3入門(第8回) - Nuxt3のuseStateでコンポーネント間で状態を共有する | 豆蔵デベロッパーサイト
前回はNuxt3でプラグイン、ミドルウェアの導入について見てきました。 今回はNuxt3が提供する状態管理について見ていきます。 Nuxt2では、コンポーネント間で状態を共有するには、Nuxt2にバンドルされているVuexを使うのが一般的でした。 Nuxt3ではVuexはNuxt本体に含まれていません。 代わりにNuxt3では新たにuseState Composableが提供されるようになりました[1]。 useStateはVuex程の機能はありませんが、必要最低限のシンプルな設計で使いやすいものとなっています。 比較的シンプルなデータ構造であったり、中小規模のアプリケーションでは十分に実用的なものとなっています。 Informationそれなりの規模のアプリケーションでは、Piniaの利用を検討すると良いかと思います。 こちらはNuxtモジュールとして提供されています。 useState
Nuxt.jsを使ってTodoリストを作ってみる
Vue.js(ヴュー ジェイエス)はWebページのUI(ユーザーインタフェイス)作成にフォーカスしたJavaScriptフレームワークです。直感的に開発でき、導入や習熟のしやすさ、日本語ドキュメントが充実していることが特徴です。 Vue.js公式サイト Nuxt.js(ナクスト ジェイエス)は、Vue.jsベースのJavaScriptのフレームワークで、UIに特化しているVue.jsに加えて、Webページ構築に有用なUI以外の機能（Ajaxやサーバーサイドレンダリングなど）などををまとめて利用できる環境を提供してくれます。 Nuxt.js公式サイト Todoリストを作ることによって、Vue.jsのデータバインディング※1※1データバインディングとは、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことをさす。の仕組みや、Nuxt
個人的に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/
Nuxt3のモジュール開発は意外と簡単？ | ドクセル
Nuxt3のモジュール開発は意外と簡単？ Module Author Guideをのぞいてみよう Vue Fes Japan2023 2023/10/28(土) きらぷか(@kira_puka) きらぷかとは？ きらぷか (@kira_puka) ● 合同会社めもらば 代表 ● Webアプリの受託開発 ● 趣味: 積読と個人開発 積読ハウマッチ SSSAPI 総額がわかる書籍管理アプリ Googleスプレッドシートの JSON API化サービス
こんにちは、柴田です。 Nuxt.jsはv2.13よりFull Static Generationが出来るようになり、益々便利になりました。 全てを静的化し、Jamstack構成にしている方も多いと思います。 Jamstack構成であれば、ブラウザからAPIをコールされる心配はなくなりますが、実はAPIキーがソースコードの中に残っているケースが多いです。（検索したところ、間違った情報を発信しているサイトも多いです） ちなみに良く見かける以下の方法ではAPIキーの隠蔽ができていません。 NG1: process.env経由での利用環境変数としてAPIキーを定義し、APIリクエスト時にprocess.env.API_KEYで参照する方法です。 こちらは一見正しそうに見えますが、サーバでのビルド時にWebpackにてprocess.env.API_KEYの値は定数に変換されてしまいます。 よって
概要 Nuxt.jsで環境変数を使う際、実行環境の環境変数がセットできるようになっていました。 確か、2.13 以前のversionではBuild時の変数がStringとして置換されるような仕様だったので環境変数はBuild時に確定させる必要がありました。 Build環境はCI環境で別環境になっているような構成は一般的だと思うので、Build用に環境変数用のファイルを用意してdotEnvで頑張る的な運用が必要だったのでとってもハッピーになりました。 使い方 公式ドキュメントはコチラ nuxt.config に runtimeConfig をセットする ２つのconfigファイルがあります ・ CSR時・SSR時どちらでも利用したいものは publicRuntimeConfig ・ SSR時のサーバーサイド限定で利用したいものは privateRuntimeConfig に以下のように実行時
NuxtLabs Japan - Nuxt開発の法人向け技術サポート
Nuxt（ナクスト）は、Web 開発をシンプルかつパワフルにする Vue.js ベースの JavaScript フレームワークです。直観的で優れた開発者体験と、エンドユーザーの利便性を高める豊富な機能を備えています。 NuxtLabs Japan は、Nuxt を開発する NuxtLabs 社の公式ソリューションパートナーに認定されており、日本唯一の法人向け技術サポートサービスを提供しています。 チームへの Nuxt 導入から制作・運用におけるお困りごとの解決まで、お客様の課題に合わせたサービスをご提供します。 Nuxtに関する技術サポート誰よりもNuxt / Vue.jsを知り尽くしたエキスパートによるQAサポートです。フォーラム形式でお客様の抱える疑問や課題をぜひご相談ください。最適なサポートをご提供いたします。 Nuxtトレーニングスキルやレベルのバラつきに不安を抱えるチームでも、短
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.
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 + Composition-API のコンポーネント設計について考えたことなど - ハードルを下げ続けるブログ@task
急にブログを書く気になったのでいっぱい更新してます。 前回の記事で Nuxt に Composition-API を導入する方法を書きました。 task-kawahara.hatenablog.com 今回は、半年間 Composition-API をつかってきて、どのように コンポーネント設計を行ってきたのかについての記事になります。 Motivation Vuex 辛い問題 Atomic Design よくわからん問題 Clean Architecture のエッセンス コンポーネント設計の方針 ディレクトリ構成 Composables Components あとがき Motivation Vuex store での Global state 管理をやめたい UIとビジネスロジックを切り離して柔軟に設計したい Clean Architecture を読んだから実践したい まずは、Vue
はじめまして、バックオフィスシステム第二グループの辻田です。 参画してからもう少しで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/297d0c8f63fdb55132d24e3e42fbb410b603528d/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JTVETnV4dC5qcyVFMyU4MyU5MyVFMyU4MiVBRSVFMyU4MyU4QSVFMyU4MyVCQyVFMyU4MiVCQSVFMyU4MiVBQyVFMyU4MiVBNCVFMyU4MyU4OSUyMFZ1ZS5qcyUyMCVFMyU4MyU5OSVFMyU4MyVCQyVFMyU4MiVCOSVFMyU4MSVBRSVFMyU4MyU5NSVFMyU4MyVBQyVFMyU4MyVCQyVFMyU4MyVBMCVFMyU4MyVBRiVFMyU4MyVCQyVFMyU4MiVBRiVFMyU4MSVBQiVFMyU4MiU4OCVFMyU4MiU4QiVFMyU4MiVCNyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MyVBQiVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiVCMSVFMyU4MyVCQyVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCMyVFOSU5NiU4QiVFNyU5OSVCQSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NGI5YWU0M2RlMGEyMmM1MzY3NWEyMzQ4NTBiODBlNjc%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBJWlVNSVJVJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMjhmOWIzYzViZjY0YTM4MTI5ZjI1YzA1MjM4ZmQzZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0a6612e39a2a904e7afe552eb1cd8e88)
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Discover our list of modules to supercharge your Nuxt project. Created by the Nuxt team and community.
Nuxt.js製のアプリで利用しているaxios-moduleでリクエストのキャッシュをしたかったので、Axiosをaxios-extensionsで拡張してキャッシュできるようにしてみました。 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
Capacitorプラグインで実現する、Nuxt 3のハードウェア連携 - hacomono TECH BLOG
はじめに こんにちは、hacomonoでウェブアプリケーションの開発を担当しています、野崎です（社内ではサイモンと呼ばれています）。 少し前に、Nuxt 3とCapacitorで作るiOSアプリの記事をパブリッシュしており、今回はその続きです。Capacitorで構築したiOSアプリから外部ライブラリをプラグイン化して呼び出すという話をします。 併せて読んでいただけますと、より理解しやすくなりますのでそちらもご参考ください。 techblog.hacomono.jp 前提条件 hacomonoのPOSレジとは hacomonoではフィットネスクラブやジムの店舗管理システムと連動して使えるPOSレジを開発、提供しています。 POSレジ自体のコンテンツはあくまでウェブアプリケーションとして構築されており、WebViewを介して画面操作が可能となっています。 iOSアプリ周辺のアーキテクチャを図
WebAssemblyを使ってBackend(Golang)のバリデーションロジックをFrontend(Nuxt.js)のバリデーションに流用する試み - Qiita
WebAssemblyを使ってBackend(Golang)のバリデーションロジックをFrontend(Nuxt.js)のバリデーションに流用する試みGoWebAssemblywasmNuxtvee-validate お題 ここ数年、FrontendにVue.js/Nuxt.js、BackendにGolang、間をREST-APIないしGraphQLで繋ぐという構成で開発している。 この構成でよく感じるのが、「フロントでもバックでも同じバリデーションロジックを両方で実装してるなぁ」ということ。 バリデーションと言っても、FrontendとBackendとでは厳密にはチェックすべき内容が違うのだけど、型・桁とかフォーマットとか結局どちらでも同じようなロジックを実装してたりする。 実際のところは、Frontend、Backend双方に便利なライブラリがあったりして、それほど開発負荷がかかってい
Web技術の発展に伴い、近年のWeb制作はより複雑で面白いものになってきました。 そこで、今回はSPA（シングルページアプリケーション）で作るページ遷移のデモを制作しましたので、ご紹介しようと思います。 Nuxt.jsについてSPAを構築するにあたり、今回はJavaScriptライブラリ（以下jsライブラリ）のフレームワークを採用することにしました。jsライブラリは有名なものだと「React」や「Vue」などが該当しますが、今回は「Vue」のフレームワークである「Nuxt.js」を使用します。 Nuxt.jsはVueアプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーション、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。（公式サイトから引用）
IntroductionUpgrading to Nuxt 3 from Nuxt 2 can be a little intimidating. There are a ton of changes to keep track of, and it's easy to feel like you're lost in a maze of code. But don't worry, I'm here to help! I've started this cheat sheet to simplify the upgrade process for myself and for others who are brave enough to tackle it. It's a work in progress, and not intended to be exhaustive. I'll
この記事は Nuxt.js Advent Calendar 2019 の 13日目の記事です。 皆さんは普段、Nuxt.js で開発するときに UI フレームワークを使っていますか？ create-nuxt-app をするときに、気になっている UI フレームワークはあれど、使ってみたことがないものが大半だったので、今回は UI フレームワークを使ってアドベントカレンダーを作ってみました。 UI フレームワーク一覧 公式サイトの「好きな UI フレームワークを選択します」という項目で紹介されています。 インストール - NuxtJS BootstrapVue Vuetify.js Bulma Tailwind CSS Element UI Ant Design Vue Buefy iView Tachyons ドキュメントを見ると全部で 9つあります（2019/12/13 現在） 比較ポイ
こんにちは。カトアキです。 Developers.IO 2020 CONNECTで、「Nuxt.jsでSPAを実装してみた話」をテーマにお話をしました。 Developers.IO 2020 CONNECT全オンラインセッションのご紹介 セッション概要 Nuxt.jsを利用した開発を行っている方、もしくはこれから行う予定の初心者を対象に、デモを中心としてNuxt.jsの基本仕様を紹介するセッションを行いました。 動画 登壇スライド お話したこと 以下の流れで、ブランクの状態から少しづつNuxt.jsを取り入れていき、プログラムを改善していく様子を説明しました。 デモパートでは開発の流れを疑似体験できるように、終始エディタを移しっぱなしにして、ライブコーディング的に説明しました。 Nuxt.jsのインストール 必要な機能の実装 サブページに切り出す コンポーネント化する store化する m
初めに 前回投稿の続きで、Nuxt.js + Django REST frameworkで動くアプリケーションをnginxに乗せていきます。 構成イメージ 下記4つのコンテナがあります。 前回投稿からnginxコンテナを加えています。 ・初回ページ表示 ①nginx経由でnuxtコンテナにアクセス ②nuxtコンテナでSSRする。この際APIを叩きdjangoからDBの情報を取得する。 ③レンダリングしたページをユーザに返す ・ページ中でAPIを叩いた場合 nginx経由でdjangoコンテナにアクセス、結果をユーザに返す。 環境 Window10 Pro Docker desktop v2.1.0.5 Python 3.6.9 django 2.2.7 djangorestframework 3.10.3 Nuxt.js v2.11.0 nginx 1.13.12 ディレクトリ構造 .
【完全版】Nuxt.jsにおけるライフサイクルまとめ(SSR/SPA/SSG/layouts/pages/components別) - Qiita
【完全版】Nuxt.jsにおけるライフサイクルまとめ(SSR/SPA/SSG/layouts/pages/components別)Vue.jsNuxt はじめに Nuxtのライフサイクル記事はたくさんありますが、コンポーネント別にまとめてくれている記事がなかったため、自分用に作成しました。よく使うんですが、よく忘れるんですよね、、、。 前提 バージョン Nuxt.js 2.14.4 補足事項 nuxtServerInit store/index.jsに記述しています。 beforeEach/afterEach pluginsにファイルを作成して、nuxt.config.jsで読み込んでいます。 fetch fetchは、公式推奨のcontextなし(引数なし)と非推奨のcontextあり(引数あり)の2種類があります。その同時実行はできませんが、流れをわかりやすくするために「fetch(有
はじめに Nuxt.jsにてクライアントサイドのvueからサーバのREST APIを呼び出す際に、vue内のスクリプトにロジックを書くと、他の場所で流用できない。そのため、外部のjsに共通ロジックとしてサーバのAPIを呼び出す処理を記述したかったが、あまり良い例が無かったので、検討&実装してみた（正しいかは不明） Vuexストア内でaxiosを使ってサーバAPIを呼び出すみたなことをやってる人も居たけど、それはちょっと違うだろう（というか気持ち悪い）ということで、pluginsに共通ロジックを作成することにした。 構成 修正する対象は以下の3ファイル（pages/index.vue , plugins/axios.js , plugins/api.js） ROOT ├─.nuxt ├─assets ├─components ├─layouts ├─middleware ├─pages │
本記事で書かれている内容は 2021/10/21 時点の内容になります。 ベータ版のため、今後記載方法の大きな変更の可能性があります。 最新情報は Nuxt 3 公式ドキュメントでご確認ください。 はじめに 2021/10/12 Nuxt.js 3（以下 Nuxt 3）がパブリックベータ版に移行しました 🎉！ これによって誰でも触れるようになったというわけで、今回早速試してみました的な記事です。 （そしてなぜか Zenn ではあまり話題になってない…） Nuxt 3 の主な新機能 主な新機能は以下の通りです。 Nitro Engine による高速化/軽量化および Nuxt 内部での API 作成への対応 トップページの記載によれば、75 倍の軽量化が実現したそうです。 高速化に関しては数値まで公表されていないですが、実際にアプリを作成したところバージョン２とは別物レベルで早くなっていまし
Nuxt.js + Netlifyで社内向けPodcastを作った話 - タンバリン開発ブログ
タンバリン大阪オフィスでエンジニアアルバイトをしている平井です。 こちらはJAMstackアドベントカレンダー19日目の記事です qiita.com 内容 開発経緯 Podcastについて 技術的な話 所感 開発経緯 タンバリン大阪オフィスでは tambourine radio という名前で不定期に社内向けのラジオを収録しています。 何回か収録を重ねるにつれて社員の方から「ラジオのアーカイブを聞けるpodcastサイトを作ろう」 と提案を頂いたので、インターン生(僕を含めて3人)でチーム開発をしました。 大まかな技術選定やチケットの作成は3人で行ったのですが、コーディングの段階に入って諸事情(他の方のインターン終了など)があり、僕がほぼ個人で制作する形になりました Podcastについて 社内限定公開なので実際に見ていただくことはできないんですが、ざっくりとしたアプリの仕様等を画面のキャプ
NuxtでスプレッドシートをDB代わりに使うぞ大作戦
こんにちは。@asatoです☀ スプレッドシートをデータベースとして使いたい！ いま話題のTwitterスペースと出会えるプロダクトspaces.bzを開発しています。 GASでTwitter APIをたたいてスプレッドシートに記録するプロトタイプからはじめました。 プロトタイプのあと、「せっかくだからこのスプレッドシートをそのままDBみたいに使えないかなー」と思い、Nuxt + Spreadsheet構成でプロダクトを開発してみたので、体験記をまとめたいと思います！ この記事でやること スプレッドシートからデータを取得して表示するNuxtアプリを作ります。 サンプルのスプレッドシートは以下のようなイメージ。 id name age email
Slides for v-tokyo #20
よくある編集中に、ページを離れると、 「編集中のデータが消えちゃうよ」 と教えてしてくれるやつを調べたときの備忘録。 ページを閉じるときに出るこんなのや 戻るや別のページに移動しようとするときに出るこんなの ソースコード 中身はこんな感じ。Mixinで実装してるけど、pageでもOK。 ページを閉じるときと、ページを移動するときとで処理が異なり、 ページを閉じるとき ... windowのbeforeunloadイベントでハンドリング ページを移動するとき ... vue-routerのbeforeRouteLeaveでハンドリング という感じになる。 なにも編集してないときに出るのが嫌なので、 isBlockUnloadというフラグを使って制御できるようにしてる。 import Vue from "vue"; import Component from "vue-class-compon
2022年11月16日 Nuxt 3.0.0 (stable) がリリースされました（日本時間11/17） Announcing 3.0 • Nuxt この記事はベータリリース時に初稿を公開しましたが、本リリース版に対応するため加筆修正しています。 Nuxt 3 の useState を使った State 管理（状態管理）の記事です。 Nuxt 3 では Vuex がサポートされていません。 Vue 3 に対応した Vuex 5.x がリリースされるのを待たずとも Nuxt 3 にもいち早く対応した Pinia を使って State 管理をすることは可能です。 しかし、それほど大規模なアプリケーションでなければ useState と Composables (Composition Function) を組み合わせることで非常に簡単に State 管理をすることが可能になります。 Pini
VercelのEdge Cacheの動作をNext.jsと比較する事で、Nuxt3のパフォーマンスチューニングを考察してみた。
SSRを利用したフロントエンドフレームワークでのパフォーマンスチューニング 出典: https://vercel.com/docs/concepts/edge-network/caching NextやNuxt3等のSSRを利用したフレームワークを使ってアプリケーションを運用するにあたって、その真価を発揮するためには何をどこまで静的コンテンツとして確定させ、CDNにキャッシュさせるかを考慮する必要があります。Nextではデフォルトで全てのページがプリレンダされていて(事前にReactのコンポーネントがHTMLとして出力されていて)、コンテンツの表示にAPIのfetchが必要なページもgetStaticPathsとgetStaticPropsを使用することによって、静的なコンテンツとしてプリレンダする事ができます。(NextのドキュメントではSGという用語が使われていますが、コンテンツをリク
hey / STORES advent calendar 2020 7日目を担当する @ume-kun1015 です。 2020年の振り返りとして、この記事ではNuxt.jsで実装してきたアニメーションをまとめようと思います。 概要 Nuxt.jsでの開発を行おうとすると、Vue.jsのコミュニティが活発だからか、自然と多くのUIライブラリやアニメーションライブラリを見ます。しかし、自分はそれらを使わず、ほとんどのケースで自分で実装していく派です。 理由としては、 要件を満たすものを探し、実際にプロジェクトに入れてみて、要件を満たせるかの検証に時間がかかる。 ライブラリが提供しているUIとデザイナーから要求されるUIの調整が難しい。 将来要求される機能追加や変更を叶えられるかがわからない。 tree-shakingが未対応であるライブラリの場合、使わない機能のJavaScriptまでimp
この記事は「JX通信社Advent Calendar 2019」の14日目の記事です。 はじめに こんにちは。JX通信社でエンジニアインターンシップをしているペイと申します。 1ヶ月ほど前からKI-develop1で積ん読を防止できるアプリBookMotionを開発しています。 今回はBookMotionでWebフロントとfirebaseを担当したので作っていて良かったこと(主にWebフロント)など紹介できればと思います。 開発環境や具体的なコードの記述はないので知らなかったことが知れると思ってお読みください。 作ったもの ランディングページ / BookMotion WEB(β版) BookMotionは積ん読を防止する為に、読みたい本を簡単に登録、 読書のモチベーションを維持することできるようになっているアプリです。 特にエンジニアの方は,技術書を沢山積んでいるのではないでしょうか?
Help us understand the problem. What is going on with this article?
WordPressからFirebase＋Nuxt.jsのHeadless CMSに完全移行するまでの記録 ①導入・技術選定 | Our Story's Diary
WordPressからFirebase＋Nuxt.jsのHeadless CMSに完全移行するまでの記録 ①導入・技術選定 前置き 2019年4月現在、このブログはWordPressで開発・運用していますが、 それに伴って生じている様々な問題を解決するために、脱WordPressすることを決めました。 主な理由は４つ。 ①サイトの速度が明らかに遅いため、Lighthouseなどのスコアが上がらないのがSEO・利便性の両面で不利。jQueryやPHP・サーバー応答速度といったボトルネックは、WordPressを使っている限り解消することができない ②NetlifyやFirebaseなどの無料で使えるサービスが充実してきている中、レンタルサーバーを使っているのはコスパも悪い ③今後のことを考えると、記事データはMySQLではなくJSON形式の方がバックアップしやすく安全 ④Vue.js、CSS
Amplify JavaScript が Next.js や Nuxt.js などのフレームワークのサーバー側レンダリング (SSR) サポートを追加
Amplify JavaScript は、フロントエンドのウェブおよびモバイルデベロッパー向けのライブラリ、UI コンポーネント、およびツールのスイートであるオープンソースの Amplify Framework の一部です。Amplify JavaScript を使用してウェブアプリケーションを構築する際に、サーバー側レンダリング (SSR) を Next.js や Nuxt.js などのフレームワークに組み込むことができるようになりました。Next.js と Nuxt.js により、デベロッパーは、SSR、静的サイト生成、クライアント側レンダリングを使用して、高速で最新のサイトを構築できます。これらのフレームワークは、デベロッパーが優れたデベロッパーエクスペリエンスと API ルート、段階的な静的ページ再生、コード分割、SEO フレンドリー化などの機能を利用するに連れて、人気が高まってき
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxt.jsで簡単にWordPressのREST APIを実装する方法 | Cntlog
Nuxt.jsで学ぶ、Vue.jsコンポーネント設計の基本 - Qiita
3分でつくる2019年版 Nuxt.js TypeScript 開発環境設定 - Qiita
NuxtのJamstack構成におけるAPIキーの隠蔽方法について
いつの間にかNuxt.jsで実行時環境変数が使えるようになっていた件
Nuxt.jsがDMMの新サービス開発に採用された理由と成果
Nuxt.jsでクリーンアーキテクチャ | MoT Lab (GO Inc. Engineering Blog)
Nuxt.jsの初期化処理について | メルカリエンジニアリング
JavaScriptフレームワーク「Vue 3」と「Nuxt 3」の活用一覧
Nuxt Modules
Nuxt.jsで使うAxiosにリクエストのキャッシュ機能を組み込んでみる | DevelopersIO
【Nuxt.js】SPA（シングルページアプリケーション）で作るお洒落なページ遷移 | 東京のホームページ制作 / WEB制作会社 BRISK
Nuxt 3 Migration Simplified: A Cheat Sheet · Harlan Wilton
create-nuxt-app で利用できる UI フレームワークを比較する - Qiita
【登壇資料】Nuxt.jsでSPAを実装してみた話 #devio2020 | DevelopersIO
Nginx + Nuxt.js + Django REST frameworkの実装 - Qiita
Nuxt.jsのpluginsにaxiosの共通部品を実装する - Qiita
Nuxt 3がパブリックベータ版になったので新機能の紹介や所感など
Nuxt DevTools 101
Nuxt.jsで編集中に、ページ移動やページを閉じるときに警告を出すやつ - くらげになりたい。
Nuxt 3 + TypeScript で状態管理（useState編）
2020年にNuxt.jsで実装してきたアニメーションをまとめてみた - Qiita
Nuxt.js + firebaseで「積ん読防止」アプリを作ってみた - ペイの技術MEMO
【Nuxt.js】ESLintの設定とVSCodeで保存時に自動整形する方法 - Qiita