みかづきブログ・カスタム

基本的にはちょちょいのほいです。

NuxtJS

Nuxt.jsで作ったサイトをGitHub Pagesで公開する際の注意点(_nuxtディレクトリが404になる)👀

nuxt generateで静的書き出ししたウェブサイトをGitHub Pagesにアップすると、_nuxt以下のファイルが404になってしまいます。原因としてはこちらに書いてある通りなのですが、アンダースコア (_)、ピリオド (.)、またはハッシュ記号 (#) で始まる、またはテ…

universalモードのNuxt.jsでnuxt generateで静的サイト書き出しをしつつ、staticなディレクトリ内の静的HTMLにもアクセスできるようにする 💻

凄くレアなケースだと思うのですが、Nuxt.jsをつかってサイトを作っているとき、ある階層以下はVueを使わない普通のHTMLをホスティングしたいこともあると思います。例えば、 /policy/index.html にVueを使わずにつくったHTMLを置きたいときなどです。そんな…

Yarn + TypeScript + Nuxt.jsで ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue というエラーが起こらなくなった 🤔

解決したので記録を残しておく。 困っていたこと TypeScriptを有効にして、あとはデフォルトの設定で作成したNuxtプロジェクトで、 ERROR Failed to compile with 1 errors This relative module was not found: ./index.vue?vue&type=script&lang=ts& in ./…

Yarn + TypeScript + Nuxt.jsで ./index.vue?vue&type=script&lang=ts& in ./pages/index.vue というエラーが起こる 😱

根本的には未解決なのだが、記録を残しておく。 実行環境 OS: macOS Catallina(10.15.6) node: 12.10.0 yarn: 1.22.5 nuxt: 2.14.0 実行手順 yarn create nuxt-app app? Project name: app ? Programming language: TypeScript ? Package manager: Yarn ? …

続・Nuxt.jsで、This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. というエラーが出たので調査する 🔍

blog.kimizuka.orgまたもや、 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration…

TypeSctiptで開発しているNuxtプロジェクトにvue-scrolltoを導入する 💻

Nuxt.jsを使ったプロジェクトでページ内スクロールを実装する際は、vue-scrolltoを使うと楽々です。 楽々なんですが、開発にTypeScriptを使っていると、導入までの手順が増えるので、今回はそこをまとめようと思います。 vue-scroll導入手順 ❶ nuxt.config.j…

next-svg-loaderで読み込んだSVGのパスを取得する 🖼

blog.kimizuka.orgNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダー、nuxt-svg-loader ですが、オブジェクトが返ってくると都合が悪いケースもあります。 <template> <img src="~/assets/img/title.svg" alt="title" /> </template> というケースや、 <style> .title { background: url(~assets/img/title.s</style>…

TypeScriptで開発しているNuxt.jsのプロジェクトにnuxt-svg-loaderを導入する 🖥

blog.kimizuka.orgテストの仕方を先に記事にしてしまいましたが、nuxt-svg-loaderとTypeScriptの共存のさせ方もまとめておきます。 nuxt-svg-loaderとは www.npmjs.comNuxt.jsでSVGを扱うときにコンポーネントのように扱えるようになる便利なローダーです。 …

Nuxt.jsで、This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. というエラーが出たので調査する 🔍

Nuxt.jsでウェブアプリをつくっていたら、 The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Baili…

nuxt generateで動的なルーティングを書き出す 🔨

すべて 公式のドキュメント に書いてあることなので、わざわざまとめるほどのことでもないのですが、せっかく調べたのでまとめておきます。ja.nuxtjs.org nuxt generateとは 動的なルーティングとは nuxt generateでは動的なルーティングは無視される nuxt g…

Nuxt.jsで立ち上がる開発用サーバにhostを設定してローカルIPでアクセスできるようにする 🖥

Nuxt.js は開発環境を整えるのがとても簡単で、セットアップが終われば、 yarn devnpm run devのいずれかで、すぐに開発サーバが立ち上がります。このときのURLは、ポート3000が空いていれば、 http://localhost:3000もしくは、 http://0.0.0.0:3000となりま…

nuxt-svg-loaderとJestを共存させる 💯

www.npmjs.comNuxt.jsでSVGをいい感じに使いたいときはnuxt-svg-loaderを使うと便利です。 <template> <div> <icon /> </div> </template> <script lang="ts"> import Icon from '~/assets/svg/icon.svg'; @Component({ components: { Icon } }) export default class Button extends Vue {} </script> こんな感じで、SVGをコンポ…

NuxtJS + TypeScript(nuxt-property-decorator) + Firebase Hosting + Cloud Functions でSSR環境をつくった際に {"code": "MODULE_NOT_FOUND"} になってしまったので調査した 🔥

いま振り返ると単純な話だが、ものすごくはまった。 ことの発端 結論 疑ったこと ことの発端 Nuxt.js + Firebase Hosting + Cloud Functions でSSRを実現しているプロジェクトが動かなくなった {"code": "MODULE_NOT_FOUND"} と表示されるので、なにかモジュ…