サードパーティ製Javascriptを読み込ませる方法 Nuxtにサードパーティ製Javascript(以下外部ライブラリと称します）を読み込む方法は三つあります、headメソッドやnuxt.config.jsでの設定とpluginで読み込ませる方法です。 今回は開発中に外部ライブラリの導入にあたってheadメソッドとnuxt.config.jsで設定する方法を試していくつかの問題が起きてしまいまして、最後はpluginで読み込ませる方法を選ぶ経緯をまとめました。 方法１ headメソッド 特定なページに外部ライブラリを読み込ませるには一番手軽な方法です。 こんな感じで書けば外部ライブラリを読み込ませる事ができます。 // layoutsもしくはpagesのvueで head() { return { script: [ { src: 'https://example.com/exampl
独り言形式で綴る「OGP & SSR」
OGP画像を表示させたい 「よし、Webサービスを作ったぞ」 「プログラミングに関する記事を投稿できるWebサービスだ」 「このサイトの記事をTwitterとかでシェアしてもらって、人気が出るといいな」 「シェアしてもらったときに、やっぱりOGP画像が表示された方がいいよな」 「よくあるような、記事のタイトルとかサイト名が入ったサムネ画像みたいなのを表示したいな」 「よし、そのためには、HTMLのmetaタグに、OGPの情報が入るようにしないとな」 Next.jsでheadタグの中をいじる 「今回のWebサービスでは、フロント部分をNext.js[1]で実装したから」 「Next.jsでheadタグの中をいじって、metaタグにOGP情報を埋め込もう」 <Head> <meta property="og:title" content="記事タイトル" /> <meta property="
Nuxt.js + TypeScript + Vuex で簡単な Todo リストを作るチュートリアル - Toragramming
はじめに Nuxt.js + TypeScript + Vuex（ストア）で簡単な Todo リスト制作を行った際の覚書です。 完成品はこちら → https://github.com/tigrig29/todo-nuxt-typescript 2019/09/20 執筆 Nuxt v2.10.0 ～ v2.14.0 あたりが対象です（v2.15.0 は未確認です） Nuxt TypeScript 公式 も参照して、比較しながら読んで頂けると幸いです。 対象 Nuxt.js 経験あり TypeScript 試したい Vuex（ストア）も使ってちゃんと型推論（入力補完）させたい 筆者の環境 Windows10 VSCode yarn Nuxt + TypeScript の環境構築 当記事では触れません。 環境構築が必要な方は、以下の記事を参考にしてみてください。 Nuxt + TypeSci
やりたいこと ・外部scssを使いたい ・vueファイルで変数、mixinを使いたい 実際の運用ではVueファイルで変数を使うことも出てくることもあるので、両方設定するのがほとんどかと思います 前提条件 create-nuxt-appで環境が構築されていること 参考：https://ja.nuxtjs.org/guide/installation 外部scssを使いたい 必要なパッケージをインストールする これでscss記法を使えるようになります。
Since this release, Nuxt DevTools is now enabled with Nuxt v3.8 and onwards by default. Generally available to all Nuxt projects! You can start playing with it by upgrading to the latest Nuxt, and press Shift + Option + D (macOS) or Shift + Alt + D (Windows) in your browser to open the DevTools. By default the floating panel is hidden to reduce the distraction. You can enable it inside Nuxt DevToo
概要 これからNuxt.jsで開発を始める方向けに、最初に抑えておきたいポイントを個人的にまとめます。私自身としてはAngularアプリの初期構築業務の経験があるのですが（数万行単位で書いてました）、自分が新チームの技術選定をするタイミングでNuxt.jsを選定しました。ある程度SPA開発の知識はありましたが、最初は各フレームワーク毎に結構抑えどころというか癖見たいのを感じました。そんな、親切で日本語な公式読んでもすぐには手の動かない並エンジニアの自分の様な方向けにまとまったチートシート的な感じになればいいなと思っています。 // 2020/11/26追記 記述内容を現状に合わせて見直しました。 本記事は全体像の把握を目的としており、記述内容の強化が簡便性を損なわない様、最初は読み飛ばしても問題ないと思われるトピックには ⚫️ アイコンをつけております。 Nuxt.jsとは Vueベースの
![[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5f522a3ea0ba23b18b3ad160f6aed4b35129845f/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTnV4dC5qcyVFNSU4NSVBNSVFOSU5NiU4MCU1RCUyMCVFNSU4NSVBOCVFNCVCRCU5MyVFNSU4MyU4RiVFMyU4MiU5MiVFMyU4MSU5NiVFMyU4MSVBMyVFMyU4MSU4RiVFMyU4MiU4QSVFNiU4RSVCNCVFMyU4MiU4MCVFMyU4MSU5RiVFMyU4MiU4MSVFMyU4MSVBRSVFMyU4MyU5RCVFMyU4MiVBNCVFMyU4MyVCMyVFMyU4MyU4OCVFMyU4MSVCRSVFMyU4MSVBOCVFMyU4MiU4MSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzJkOWM2OGZlMmFkMGUwZDdlMWZkMGUxYzhkYTIwYTQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBoZWRyYWxsJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zM2Y4NGRiMGU3MTE4NDM2ZGQxMjAzYWNiMzE4YjYwMA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D06cc8cacedc55bd2a4cb98196e7be23c)
Amplify + Nuxt.js + Cognitoでログイン機能を実装してみた - Qiita
今回の記事は、AWS amplifyの機能の一つであるAuthenticationについての記事です。 Nuxt.jsとAmazon Cognitoによるアプリケーションにユーザーのサインアップ、サインインなどの機能を追加し、実際にログイン画面を実装していきたいと思います。 環境 ・Pug を使用 ・コーディング規約は Nuxt.js に則って StandardJS ・Visual Studio Code ※amplify initによりプロジェクトが初期化されている前提のもと話を進めていきます。 Cognitoの準備 Cognitoを使用するためにAWSサービス機能のauthを追加しましょう
この記事は、Ateam LifeDesign Advent Calendar 2022 シリーズ1の7日目の記事です。 ハイドレーションとは？ ハイドレーションまたはリハイドレーションは、クライアント側JavaScriptが、静的ホスティングまたはサーバー側レンダリングのいずれかによって配信される静的HTML Webページを、イベントハンドラーをHTML要素にアタッチすることによって動的Webページに変換する手法です。 (Wikipediaより) つまり、サーバーサイドレンダリング(SSR)などで事前にサーバー側で作られたHTMLを、JavaScriptで動的にしていくプロセスのこと。 ハイドレーションの流れ 1. サーバー側でHTMLを生成 SSRや静的サイトジェネレート(SG)など 2. サーバー側で生成した静的なHTMLをブラウザで受け取り、表示する 操作はできないが、HTMLを利用
Nuxt3でセッションを使用したログイン認証機能を作る
はじめに Nuxt3も安定してきたのでクッキーを使ってセッション管理するログイン認証機能を作ってみます。必要最小限ですがDBを使用した本格的な認証機能です。 主な仕様 主な仕様は以下のとおりです。 Nuxt3がベース MongoDBによるユーザ情報(ログイン情報)の管理 Redisによるセッション情報の管理 動作環境 動作させるプラットフォームはWindows10です。WSL2も使用します。 デモでは以下のソフトウェアが必要です。 Node v16.0以上 MongoDB v6.0(WSL2にインストール) Redis v7.0(WSL2にインストール)
前置き Nuxt.jsと言えばコンポーネント。 componentの内容を、ページによって少しで良いから変えたい… そんな時、slotに随分と助けられたので記録に残しました。 Vue.jsでも同様の使い方が可能です。 ※サンプルテキストはHello Nuxt.js!ではなくHello Vue.js!になっていますが、ご了承ください。 間違い等がございましたら、優しくご指摘いただけると嬉しいです！ 基礎編：超簡単な解説から実践編まで 応用編：全体のまとめ、propsとの違い を書いていきます。 slotって？メリットは？ ウェブサイトを作ってて、 「同じコードをコピペしまくってめんどいなぁ〜 あ！コンポーネント使えばいいじゃん！！ あれ？でもページによって○○だけ変えたいんだよなぁ」 って時、ありますよね？ コンポーネントを使いまわしたいけど、 ここの文字だけ変えたい！って時に使います。 （
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> いろんなやり方ある・・・が、自社案件じゃないと歯がゆい 公式モジュール nuxt公式が出しているGoogleTagManager用のモジュールを使ってみる。 ところが情報色々ぐぐってみると、 デフォルトではページビューの計測オプションがfalseになっており、 計測したい場合はこちらのオプション有効化することに加
Nuxt+TypeScript+Firebaseのはじめるときにやること: 2019年12月版 - くらげになりたい。
ひさびさに新規でNuxtアプリを作ろうと思ったら、 いろいろ変わっていたので、備忘用のまとめ。 (時間がなかったので割と雑め...いつかきれいに加筆する予定...) ソースコード 自分用のスタータになるようにGitHubで公開してみた。 (この記事の執筆時よりも変わっていくと思います...) github.com プロジェクト作成 # 雛形の作成 $ npx create-nuxt-app <project_name> # GitとGitFlowの初期化 $ cd <project_name> $ git init $ git flow init # giboでgitignoreを生成 $ gibo dump Vim macOS VisualStudioCode Node > .gitignore # remoteの設定 $ git remote add origin git@github
GitHub - nuxt-community/firebase-module: 🔥 Easily integrate Firebase into your Nuxt project. 🔥
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
Introduction to Story-Driven Development with Nuxt Stories
Develop at the Speed of Thought! You want your ideas to come to life as you think of them. The instant you write down those ideas, you demand instant gratification from instant functionality. nuxt-stories is a module that you can use to rapidly write stories, game-plans, notes, documentation, whatever for your Nuxt web application. Actually, if you think about it, even your collection of stories c
spaモードでasyncDataもfetchも呼ばれないということはなく、クライアントサイドでちゃんと呼ばれる。 【PageAにアクセス】 Client PageA asyncData Client PageA beforeCreate Client PageA data Client PageA created Client PageA beforeMount Client PageA fetch Client PageA mounted 【nuxt-linkでPageBにアクセス】 Client PageB asyncData Client PageA beforeDestroy Client PageA destroyed Client PageB beforeCreate Client PageB data Client PageB created Client PageB bef
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
NUXT.js×REST API×Typescript×SSR NUXT.jsはSSRの設定自体はmode: 'universal', とするだけでいいのですが、SSRとSPAで気を使って実装しないと、データの取得などで、どっちかでは動く、動かない問題が出てきます。 結構ハマったのでメモ。 問題 SSR時だけAPIレスポンスが取得できない。 SPA時はAPIレスポンスがちゃんと返ってきて問題ないのだが、 SSR時はリクエストはされているのに、APIレスポンスが返ってこないようなエラーが起こった。 原因 SSRする場合、asyncDataのライフサイクルでAPIのリクエストをする必要があると思います。 その時、proxyとかを使っているとSSR時のみAPI取得ができません。 nuxt-linkの遷移ならうまくいくのに、画面リロードしたらエラーでるみたいなケースです。 ※SSRのときはprox
ep.71『ドキュメント作成の決定版！nuxt/contentとコントリビューション』 | UIT INSIDE
@potato4d と @IkutaNozomu が、 nuxt/content を利用した社内ドキュメントの作成について話しました。 nuxt/content について Nuxt.js の SSG 関連のモジュール Markdown などを MongoDB Like な API のもと柔軟に扱うことができる LINE での利用事例 インフラ基盤のドキュメント https://linedevday.linecorp.com/2020/ja/sessions/9285 UIT Playbook https://uit-inside.linecorp.com/episode/54 nuxt/content への貢献 Ikuta https://github.com/nuxt/content/pulls?q=NozomuIkuta Theme Docsはv0なので、足りない機能などがあった v0
ポートフォリオサイトをVue.jsからNuxt.jsに書き換えてサーバーサイドレンダリングをする - Kekeの日記
本記事 本記事はVue.jsを使ってGoogle App Engineにホストしている静的なサイトをNuxt.jsを使って書き直そう思います。 題材は以前使った自分のポートフォリトサイトです。 keisukeyamashita.com GoogleCloudPlatform（GCP）で無料枠を使いきり画像などのコンテンツをCloud Storageに置いてありましたが、Embulkをマスターしたことによって簡単に二つ目のアカウントに移行できたので、再度ホストしようと思いました。 目的 今回の移行には、以下のような目的がありました。 コンポーネント設計が自由すぎる どこまでをどうコンポーネント分けするのかは、Vue.jsやReactを使っている人ならよくあると思います。 僕自身も、学生で、インターンといえばサーバーサイド、インフラ、モバイルアプリしか歩んでこなかったので、フロントエンドを知識
SPA におけるアクセシビリティ課題について シングルページアプリケーション（SPA）は、1 つの HTML ファイルに対して JavaScript と Web API を活用して、ユーザーに素早いページ切り替えの体験を提供するウェブアプリケーションの一形態です。 しかし、SPA にはアクセシビリティの課題があります。例えば、視覚障害のあるユーザーが使うスクリーンリーダーという支援技術ではページが遷移したことを認識できないことがあります。これは、JavaScript を使ってページを切り替える際に発生する問題です。 具体的には、ユーザーがあるページから別のページへ移動した際、スクリーンリーダーが新しいページに移動したことを認識しないことがあります。 この問題を解決するために、JavaScript と WAI-ARIA という技術を使って、Route Announcer という方法があります
はじめに フロントエンジニア３年目（総エンジニア歴６年）を迎えるにあたり、Nuxt / パフォーマンス / SEO など、Web アプリケーション開発について、たくさん学んできました。 今回は、Nuxt におけるパフォーマンスにフォーカスした話を記事にしたいと思います。 きっかけとしては、下記の記事を読んだ時でした。 医療のマスターDBを爆速で検索するWebサービスを爆速で作った こちら、本当に素晴らしい記事でした。。。 上記記事を読んだ時、「Nuxt でも同じように爆速で稼働するアプリケーション開発が可能では？」と思い、すぐに手をつけました。 注意点 本記事は公開されてから月日が経つにつれ、Nuxt での情報は古いものとなっていくので、本記事を確認する際は公開日をしっかり確認していただければと思います。（ただ、キーワードとしては、バージョン関係なくヒントにはなるので、そう言ったものはキャ
Nuxt offers first-class support for end-to-end and unit testing of your Nuxt application via @nuxt/test-utils, a library of test utilities and configuration that currently powers the tests we use on Nuxt itself and tests throughout the module ecosystem. InstallationIn order to allow you to manage your other testing dependencies, @nuxt/test-utils ships with various optional peer dependencies. For e
Nuxt.jsにおいてStore（ストア）を利用すると、データの状態管理をおこなうVuexによってコンポーネント間のデータの受け渡しを一元化できます。本記事ではそのStoreとvuex-persistedstateモジュールを利用してデータをLocal Storage（もしくはSession Storage）に保存してみます。 Storeにはクラシックモードとモジュールモードがありますが、本記事ではモジュールモードによる記述で説明していきます。２つのモードの違いについては公式サイトを参照して下さい。 Nuxt.jsによるプロジェクトの作成は下記ページをご覧下さい。 Nuxt.js入門 [$route.params][layouts] プロジェクト内のディレクトリを確認します。Storeによる機能は、主に「store」ディレクトリ内にファイルを追加していくことで利用できます。 $ tree
axios-moduleというのはNuxt-communityが提供してるプラグインです。オフィシャルのリストには入っていないのですが、Nuxtのドキュメントでもこちらを使用が推奨されており、事実上のオフィシャルプラグインだと思います。 下記の環境で試してます。 nuxt: 2.8.1 @nuxtjs/axios: 5.5.4 とりあえず相対パス指定する 開発と本番でAPI（など）のURLを変えたいということはあると思います。 例えば/static/data/の下にusers.jsonというJSONを配置します。そしてvueコンポーネントでそいつを取得するとします。とりあえずasyncDataで相対パス指定しますよね。
Easily integrate Storybook in your Nuxt application to build, document and test your components.
Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more. A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄 We have lots of features packed into v3.9 and can't wait for you to try them out. ⚡️ Vite 5This release comes with Vite 5 and Rollup 4 support. Module authors may ne
Una UI The Atomic UI Framework for Nuxt A technology that helps you build fast, modern, and lightweight web applications with the power of Unocss Engine.
Nuxt.js のモジュールを自作して簡単に使い回す 基礎知識があるのとないのとでは理解度に違いがあるので、 モジュールとは何？という方はこちらを読んでみてください。 Nuxt.js はドキュメントが多くて助かりますね！ 引用 この記事は @mya_ake さんの Nuxt.js と axios のエラーハンドリング周りの話 から引用させていただきました。 この場を借りてお礼申し上げます。 対象読者 「エラーハンドリングで冗長なコードを書きたくない」と考えている方 「他のプロジェクトでもコードを使い回ししたい」と考えている方 個人開発をしている方 はじめに Nuxt.js にはモジュールという Nuxt のコア機能を拡張するもの存在します。 有名所は以下の Github にリストがあります。 nuxt-community / modules 実際に使っている方は多いのではないでしょうか。
前回の記事 では画面遷移の仕方を紹介しました。 画面間でデータのを受け渡しをする方法を紹介します。Nuxt.js というか Vue.js の仕様も含まれています。 画面間でデータを渡す画面間でデータの受け渡しをする方法はいくつかあります。URLのクエリパラメータで渡す方法やパスパラメータによる方法、またフレームワーク側でデータを保持する方法などです。Nuxt.js においてこれらのやり方をまとめてみました。 クエリパラメータを使うURLのクエリパラメータとしてデータを取得したい場合には $route オブジェクトの query プロパティから取得ができます。 以下のように pageName=next というデータを nuxt-link から渡します。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nuxtのサードパーティ製Javascriptの読み込む方法を色々試してみた
Nuxt.jsで外部scssを読み込む - Qiita
Nuxt DevTools v1.0 · Nuxt Blog
[Nuxt.js入門] 全体像をざっくり掴むためのポイントまとめ - Qiita
【図解】Hydration（ハイドレーション）をなんとなく理解したい - Qiita
https://slides.nahoko.dev/v-tokyo-16-nuxt-3-migration/1
【Nuxt.js】slot基礎編：コンポーネントの一部を置き換えよう - Qiita
nuxtでGTMタグをheadとbodyに埋め込む（非SPA、モジュール不使用、シンプル） - Qiita
nuxt spa, ssg, ssrそれぞれのasyncData, fetchのタイミング - Qiita
GitHub - nuxt/vite: ⚡ Vite Experience with Nuxt 2
NUXT.jsでSSRする場合の落とし穴 - Qiita
SPA のアクセシビリティを強化する Nuxt の Route Announcer 機能
Nuxt でハイパフォーマンスを意識したアプリケーション開発 - Qiita
Testing · Get Started with Nuxt
Nuxt.jsのStoreによるデータ保存 [vuex-persistedstate][js-cookie]
Nuxt.js の axios-module（プラグイン）で開発環境と本番環境で取得先のURLを変えたい
Storybook Integration for Nuxt
Nuxt 3.9 · Nuxt Blog
Una UI - The Atomic UI Framework
Nuxt.jsモジュールを自作して開発効率を向上させる
Nuxt.jsをはじめよう - クエリパラメータやパスパラメータを使ってデータを渡す