（もっといい方法があれば教えて下さい！！🙇） 概要 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
はじめに ウェブストレージ便利ですよね、特にローカルストレージはCookieが使えないPWAや、DBを用意するほどでもないちょっとしたデータを保存したいときに使うことが多いのではないかと思います。 ただ、いざウェブストレージのデータを扱おうと実装を進めるとデータの同期や保存のタイミング等でつっかかることがままあります。 そこで今回はNuxt.jsでウェブストレージを簡単に扱う手法を考えましたので簡単にご紹介しようと思います。 実装方針 コンポーネントやページから直接ウェブストレージにアクセスしていると処理やデータが散乱してしまい辛い状況に陥りやすいです。 そこで、ウェブストレージの参照や処理は全てストアに一本化します。 各コンポーネントやページは共通のステートやアクションを参照することになりますのでデータが非常に扱いやすくなります。 実装 入力した値をウェブストレージに保存する簡単なデモを
ポートフォリオサイトをVue.jsからNuxt.jsに書き換えてサーバーサイドレンダリングをする - Kekeの日記
本記事 本記事はVue.jsを使ってGoogle App Engineにホストしている静的なサイトをNuxt.jsを使って書き直そう思います。 題材は以前使った自分のポートフォリトサイトです。 keisukeyamashita.com GoogleCloudPlatform（GCP）で無料枠を使いきり画像などのコンテンツをCloud Storageに置いてありましたが、Embulkをマスターしたことによって簡単に二つ目のアカウントに移行できたので、再度ホストしようと思いました。 目的 今回の移行には、以下のような目的がありました。 コンポーネント設計が自由すぎる どこまでをどうコンポーネント分けするのかは、Vue.jsやReactを使っている人ならよくあると思います。 僕自身も、学生で、インターンといえばサーバーサイド、インフラ、モバイルアプリしか歩んでこなかったので、フロントエンドを知識
Click here to enter
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
この記事をおすすめしたい人 Node.jsも知らんのにNuxt.jsを始めようとしてる人 レンタルサーバ上でNuxt.jsを動的出力させたい人 つまりオレ 何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。 今回はサーバサイドでNuxt.jsを動かすテストです。 インストールオプションに出てきた「Deployment target」の「Server」です。 (Staticの場合はビルドしたHTMLをアップロードするだけだと思います) エックスサーバーというサーバ上でテストを行いますが、どうもね…。 これは非常にマイナーな選択のようなんですよね。 でもまぁこのブログはエックスサーバーで動かしてるので、そのままエックスサーバーでNuxt.jsも動かしてみたいと思います。 僕はNuxt.js/Vue.js/Node.jsだけでなく、サーバの知識もか
前置き Nuxt.jsと言えばコンポーネント。 componentの内容を、ページによって少しで良いから変えたい… そんな時、slotに随分と助けられたので記録に残しました。 Vue.jsでも同様の使い方が可能です。 ※サンプルテキストはHello Nuxt.js!ではなくHello Vue.js!になっていますが、ご了承ください。 間違い等がございましたら、優しくご指摘いただけると嬉しいです！ 基礎編：超簡単な解説から実践編まで 応用編：全体のまとめ、propsとの違い を書いていきます。 slotって？メリットは？ ウェブサイトを作ってて、 「同じコードをコピペしまくってめんどいなぁ〜 あ！コンポーネント使えばいいじゃん！！ あれ？でもページによって○○だけ変えたいんだよなぁ」 って時、ありますよね？ コンポーネントを使いまわしたいけど、 ここの文字だけ変えたい！って時に使います。 （
Nuxt 3 に直接移行するか Nuxt Bridge を使うか
結論 以下のような条件にあてはまる場合は、Nuxt Bridge を使う恩恵を得られると思っています。 コンポーネントやページ数が多く、比較的大きなアプリケーション Nuxt 3 へ移行するためのリソース（人員、工数）がない 上記に当てはまらない場合は、Nuxt 3 へ直接移行したほうが効率が良いかもしれません。 はじめに Nuxt 3 へ移行する方法として、大きくは下記の二通りだと思っています。 Nuxt Bridge を使って Nuxt 3 へ移行する Nuxt 3 へ直接移行する Nuxt Bridge を作っている身なのでもちろん Nuxt Bridge を使ってほしいですが、使わないほうが移行がスムーズだと思うケースもあるので、個人的にどう選んでいるかを書きます。 Nuxt Bridge を使った方がいいと思うケース コンポーネントやページ数が多く、比較的大きなアプリケーション
Slides for Vue Fes Japan 2023
概要 自作のNuxt.jsはSSRモードでfirebaseにホスティングしようとネットで方法を探してました。 見つかった記事は2019の物でちょっと古くて（実際その通りやったら詰んでしまう）困ってました。 そこでこの記事とこの動画を参考になんとかデプロイできました。 でもどれも英語だったのでせっかくなので日本語の記事を書こうと思った次第です。 手順を見たくない方へ このボイラープレートをそのまま使う。 手順1 新規Nuxtアプリを作成する 注意 nuxt本体のソースコードを管理しやすいために/srcの中に入れてますが、そうしなくても良いです。ただ後述のfirebase.jsonのpredeployの設定をご自身のパスに合わせて修正してください。 手順2 まずfirebaseでアカウントを申請し、新規プロジェクトを作成してください。 nodeバージョンを10以上を使うため、プランはblaze
How To Create A Headless WordPress Site On The JAMstack — Smashing Magazine
In this post, we’ll set up a demo site and tutorial for headless WordPress, including a starter template! We’ll use the WordPress dashboard for rich content editing, while migrating the front-end architecture to the JAMstack to benefit from better security, performance, and reliability. We’ll do this by setting up a Vue application with Nuxt, pulling in the posts from our application via the WordP
趣味をアウトプットするためにブログをはじめようと思い立ちまして、 せっかくなので最近勉強中のNuxt.jsを使用してブログを作成してみました！ 記事表示までの手順をまとめてみたので、参考にしていただければと思います！ <前編>ではNuxtプロジェクトの作成からContentfulのセットアップまで、 <後編>では記事の作成、Nuxtでの表示、Netlifyへのデプロイまでの手順をまとめてあります。 なお、この記事はこちらの動画を大いに参考にしています。 併せて参考にしていただければと思います。 Nuxtプロジェクトの作成 前提条件として、nuxtはインストール済みとします。 $ npx create-nuxt-app <project-name> nuxtで新しくプロジェクトを作成します。 設定はすべて初期設定のままです。 次に必要な物をインストールします。 $ cd <project-n
これは lottieで作ったアニメーションをNuxt.jsのページローディングで使う方法。 まずlottieで読み込むアニメーションファイルを作成。 ここでは、loading.jsonというファイルで用意した。 保存先はassets/animation/loading.json https://lottiefiles.com/ (サイトに様々なexampleが用意されているので参考に） player installation lottieをwebで使うためにlottie-webというnpmをinstallする。 see https://github.com/airbnb/lottie-web with npm npm install lottie-web with yarn yarn add lottie-web loading animation component jsonを読みこむコ
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Nuxt.js】iOSでブラウザバックした時、元のスクロール位置に戻らない - Qiita
Nuxt.jsでウェブストレージを扱う - Qiita
programmer-beginner.com
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
初心者がレンタルサーバ上でNuxt.jsをどうにか動かした | オレDEV.com
【Nuxt.js】slot基礎編：コンポーネントの一部を置き換えよう - Qiita
Deep Dive to UnJS and Nuxt 3
【Nuxt.js】Nuxt.js SSRモードでfirebaseにデプロイする手順 2020年版
Nuxt + Contentful + Netlifyでブログ作成全手順<前編>
Nuxt.jsでLottieアニメーションをページローディングで使う - Qiita
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE