useAsyncData とそれを実現する Nuxt 3 の非同期処理の機構 - Yukii's Blog
Nuxt 3 から、これまでの asyncData と fetch がそれぞれ useAsyncData と useFetch に置き換わった。そして、 useFetch は内部で useAsyncData を利用するため、実質 useAsyncData のみで非同期機構が実現されている。 本質的に、 SSR / rehydrate の機構とページ遷移の機構について、フレームワークとしてのリアーキテクチャの結果であり、その機構についての自分の理解を dump する。 ページ遷移時の非同期処理のリアーキテクチャ Nuxt 2 までは、 asyncData() や fetch() を定義すると、 SSR 時にはそれらが完了するまでレスポンスコードの生成を await し、CSR (ページ遷移)時には asyncData についてはページ遷移のフックとして、 fetch については create
JavaScript や CSS で ~/ から始まるパスをマッピングして import する方法 2020
この記事では、マッピングする方法について述べるだけで、それに伴う仕様や実装方法などについては言及しません。 TL;DR import util from '~/util'; のように ~/ から始まるパスにしたとき、 src ディレクトリからの相対パスとしてマッピングするには、2020 年 12 月現在、次の方法があります。 Parcel もしくは Nuxt.js を使う場合、設定しなくても自動でマッピングされます webpack を使う場合、webpack.config.js の resolve.alias を設定します Babel だけを使う場合、 babel-plugin-module-resolver を使って設定します tsc で型チェックする場合、もしくは Next.js を使う場合、tsconfig.json の paths を設定します 「~/ を任意のディレクトリにマッピ
Nuxt で Vue 3.0 (Composition-API) を使いたいとき - ハードルを下げ続けるブログ@task
ja.nuxtjs.org composition-api.nuxtjs.org Vue3.0 がリリースされてからしばらく立ちましたが、Nuxt において Vue3.0 がサポートされた v3.0 がリリースされるのはもうちょっとかかりそうです。 とはいえ、v3.0 がリリースされるのを待って、無理やりバージョンをあげようとしてもおそらく、かなりの痛みを伴うことが、他の皆様のVue3.0移行記事からも読み取れます。 そこで、Vue 3.0 リリースより少し前から、既存の Nuxt Project に composition-API を導入した所感と、導入方法を記録しておきます。 というか、この過渡期においてNuxtへの Composition-API 導入についての日本語記事があまり見当たらなかったので、少しでも参考になれば幸いです。 なお、バージョンは記事公開時点の最新とします。 Nu
Nuxt Contentでフィードの自動生成
先日，サイトマップを自動生成しましたが，新規記事の投稿を通知するにはフィードもあると便利ですね． （WordPress時代のフィードをGoogleに設定したままだったので更新したい．） SSR のウェブサイトであれば @nuxtjs/feed で対応できるのですが，今回は SSG なのでとある理由により利用できません． SSG製サイトでのフィード生成@nuxtjs/feed は Axios を使用していてこのままではローカルで生成できないのと，フックによって generate 前に実行するようになっているので，最新の内容で更新できないという問題があるようです． そのため，現状 SSG の場合は自作モジュールで対応する必要があります． 環境Node.js: v13.12.0npm: v6.14.8@nuxt/content: v1.9.0feed: v4.2.1実装例 const fs =
Nuxt.jsプロジェクトのプログラム上でURLを生成する - ひげぶろぐ
コード内で特定のルートへの絶対パスを取得するには以下のように書けば良い。 let path = this.$router.resolve({ name: 'page_name', params: { id: 1} }).href var fullUrl = window.location.origin + '/' + path が、Nuxt.jsで生成したプロジェクトの pages/articles/_title.vue 的なページに遷移したかったのに、以下のコードだとエラーが出た。 let path = this.$router.resolve({ name: 'articles', params: { title: 'hogehoge'} }).href var fullUrl = window.location.origin + '/' + path # エラー [vue-route
Nuxtで独自のルーティングを追加・拡張する - Vがいる日々
Nuxt では通常、ルーティングはディレクトリ構造から自動的に算出される。 一方で、ディレクトリ構造によらない独自のルーティングを手動で追加したいときもある（リダイレクト処理だけしたいときやエイリアスを利用したいときなど）。
Vue.js Server-Side Rendering Guide - Introduction · GitBook
Server-Side Rendering (SSR) Overview What is SSR? Vue.js is a framework for building client-side applications. By default, Vue components produce and manipulate DOM in the browser as output. However, it is also possible to render the same components into HTML strings on the server, send them directly to the browser, and finally "hydrate" the static markup into a fully interactive app on the cli
Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介
Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介JavaScriptVue.jsNuxt Nuxt.jsで爆速アプリケーション開発をする方法 や Nuxt v2へのアップデート方法 や Nuxt アプリケーションのデプロイの自動化 などの記事を公開したり、日本語ドキュメントの管理などをしている potato4d です。 私は普段の仕事の半分以上が Nuxt.js のプロジェクト、それもそのうち半分ほどは新規プロジェクトという状態で、同じようなコードを書くことが非常に多くあります。しかし、本来は重複するようなコードを毎回プロジェクトごとで書きたくないですし、問題があればまとめて治せるような体制にしておきたいところです。 Nuxt.js は幸いなことに、こういったコードの共通化のために任意の拡張を施すことができる「モジュ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
"[vite]: Rollup failed to resolve import" の対応 - Yukii's Blog
help: Is there no asyncData equivalent? - githubhot
Nuxt.jsでSSR時に起きたエラーをStackdriver Error Reportingでログ収集する
alias プロパティ
NGINX
The target Property
The mode Property